List Headline Image
Updated by Kelly Hungerford on Feb 08, 2017
Headline for Paper.li CSS Styling
 REPORT
49 items   62 followers   29 votes   12.48k views

Paper.li CSS Styling

If your paper has a custom domain you can modify your paper's CSS.

I've started this list to capture the most frequently requested style changes and the code.

Copy and paste into your paper's CSS editor and you're set.

1

/* Add a margin to the top of the page */

Mar 14, 2014 by Dorian Staten
/* Add a margin to the top of the page */

.paper-window {
margin-top: 20px !important;
}

2

/*Add custom non-repeating, large background image*/

Sep 17, 2013 by Julia Phillips Yaziji
/*Add custom non-repeating, large background image*/

/* Contribution from publisher of http://dailyhemo.com */

body{
background-image: url("http://my_custom_background.jpg");

    background-position: center top;

    background-color: #3b3b3b;

    background-repeat: no-repeat;

  background-attachment: fixed;

}

3

/* Change font family and color of editor's name */

Nov 21, 2014 by Julia Phillips Yaziji
/* Change font family and color of editor's name */

.paper-editor-info .editor-details .editor-name a {
color: #4682b4 !important;
font-family: "Comic Sans MS";
}

4

/* Change font family and color of editor's note text */

Nov 21, 2014 by Julia Phillips Yaziji
/* Change font family and color of editor's note text */

.paper-editor-info .editor-note .editor-note-text {
color: #4682b4 !important;
font-family: "Comic Sans MS";
}

5

/* Change font family and color of editor's profile description */

Nov 21, 2014 by Julia Phillips Yaziji
/* Change font family and color of editor's profile description */

.paper-editor-info .editor-description {
color: #4682b4 !important;
font-family: "Comic Sans MS";
}

6

/* Change font of article titles */

Dec 09, 2014 by Julia Phillips Yaziji

/* Change font of article titles */

.cust-fs-at {
font-family: "Open Sans" !important;
}

7

/* Change font of Topic Menu bar */

Apr 06, 2016 by Julia Phillips Yaziji
/* Change font of Topic Menu bar */

/* Change font of Topic Menu bar */

.paper-navigation {
font-family: Georgia;
}

8

/* Change hover color of all article links*/

Nov 01, 2016 by Julia Phillips Yaziji

.cust-cs.cust-cs-hover a:hover {
color: #ffffff !important;
}

9

/* Change hover color of top article title*/

Oct 24, 2016 by Julia Phillips Yaziji

.cust-fs-at.cust-cs-hover a:hover {
color: #13b0d2 !important;
}

10

/* Change navigation bar link color */

Sep 18, 2014 by Julia Phillips Yaziji
/* Change navigation bar link color */

/* Change navigation bar link color */
.paper-navigation li>a {
color: red;
}

11

/* Change the background color of the paper's main section (where all the text is) */

Oct 31, 2013
/* Change the background color of the paper's main section (where all the text is) */

/* Change the background color of the paper's main section (where all the text is) */
.paper-window {background-color: #000;}
.paper-masthead .hero-unit, .navbar-paper .navbar-inner {background-color: transparent;}

12

/* Change the paper's text color */

Oct 31, 2013
/* Change the paper's text color */

/* Change the paper's text color */
.cust-cs a, .cust-fs-pg strong, .cust-fs-pg {color: #fff !important}

13

/* Change the paper subtitle color */

Jun 17, 2013
/* Change the paper subtitle color */

.paper-masthead .paper-info p {
color: #000000 !important;
}

14

/* Change the paper title color */

Jun 17, 2013
/* Change the paper title color */

.paper-masthead .paper-info h1 {
color: #000000 !important;
}

15

/* Change the text & appearance on your paper's subscription (sign-up box) */

Jul 18, 2014 by Dorian Staten
/* Change the text & appearance on your paper's subscription (sign-up box) */

/* Change your subscription box text and the text's appearance on your paper */

.subscribe-form h4 {
display: none;
}

.subscribe-form {
font-weight: bold;
font-size: 16px;
color: #000000;
}

.subscribe-form:before {
content: 'Enter your text here';
}

16

/* Customize background color of subscription box */

Oct 19, 2015 by Julia Phillips Yaziji

.paper-sidebar-body .paper-sidebar-block:nth-child(1) {
color: #dcdcdc; /* Main text color /
background-color: #000000; /
Box background color */
}

17

/* Disable auto-crop for article images.*/

Oct 11, 2013 by Julia Phillips Yaziji
/* Disable auto-crop for article images.*/

/* Note: Code will give warning but okay to use.*/
.article-image {
height: auto !important;
}

.article-image img {
top: 0 !important;
}

18

/* Featured article background color */

Jun 17, 2013
/* Featured article background color */

.lead-article .article-inner {
background-color: #000000;
}

19

/* Hide 'all stories' links at bottom of each section */

Mar 12, 2014
/* Hide 'all stories' links at bottom of each section */

/* This CSS is for hiding the 'All stories' links */

.section-more-link {
display: none;
}

20

/* Hide archives link */

Aug 01, 2014 by Dorian Staten
/* Hide archives link */

/* Hide archives link */
ul.nav-paper-date li:nth-child(4) {
display: none;
}

21

/* Hide paper navigation menu (topics) */

Jul 24, 2014 by Dorian Staten
/* Hide paper navigation menu (topics) */

/* Hide paper navigation menu (topics) */
.paper-navigation {
display: none;
}

22

Hide paper's banner

Jan 22, 2014
Hide paper's banner

This code hides the paper's banner, which can come in really handy when you customize your paper and don't want the banner to show, but you still want a banner to display in your newsletter.

/* Hide the banner */

.paper-banner {
display: none;
}

23

/* Hide Powered by Paper.li */

Mar 12, 2014
/* Hide Powered by Paper.li */

/* Hide Powered by Paper.li in your footer */

.paper-footer {
display: none;
}

24

/* Hide social sharing buttons */

Mar 29, 2014 by Dorian Staten
/* Hide social sharing buttons */

.addthis-smartlayers {
display: none;
}

25

/* Hides the Editor's box in iframe version of paper */

Aug 27, 2013 by Julia Phillips Yaziji
/* Hides the Editor's box in iframe version of paper */

.iframed .paper-sidebar-block:nth-child(2) {
display: none;
}

(Note: If you have hidden the subscription box as well, then the code above should be modified. Change child(2) to child(1))