Updated by Kelly Hungerford on May 29, 2015
Headline for Paper.li CSS Styling
43 items   7.32k 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 */

Paper.li CSS Styling | /* Add a margin to the top of the page */

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

2

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

Paper.li CSS Styling | /*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 */

Paper.li CSS Styling | /* 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 */

Paper.li CSS Styling | /* 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 */

Paper.li CSS Styling | /* 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 */

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

7

/* Change navigation bar link color */

Paper.li CSS Styling | /* Change navigation bar link color */

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

8

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

Paper.li CSS Styling | /* 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;}

9

/* Change the paper's text color */

Paper.li CSS Styling | /* 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}

10

/* Change the paper subtitle color */

Paper.li CSS Styling | /* Change the paper subtitle color */

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

11

/* Change the paper title color */

Paper.li CSS Styling | /* Change the paper title color */

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

12

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

Paper.li CSS Styling | /* 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';
}

13

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

Paper.li CSS Styling | /* 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;
}

14

/* featured article background color */

Paper.li CSS Styling | /* featured article background color */

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

15

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

Paper.li CSS Styling | /* Hide 'all stories' links at bottom of each section */

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

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

16

/* Hide archives link */

Paper.li CSS Styling | /* Hide archives link */

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

17

/* Hide paper navigation menu (topics) */

Paper.li CSS Styling | /* Hide paper navigation menu (topics) */

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

18

Hide paper's banner

Paper.li CSS Styling | 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;
}

19

/* Hide Powered by Paper.li */

Paper.li CSS Styling | /* Hide Powered by Paper.li */

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

.paper-footer {
display: none;
}

20

/* Hide social sharing buttons */

Paper.li CSS Styling | /* Hide social sharing buttons */

.addthis-smartlayers {
display: none;
}

21

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

Paper.li CSS Styling | /* Hides the Editor's box in iframe version of paper */

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

22

/* Hide the date */

Paper.li CSS Styling | /* Hide the date */

ul.nav-paper-date li:nth-child(1) {
display: none;
}

23

/* Hide the editor's box */

Paper.li CSS Styling | /* Hide the editor's box */

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

24

/* Hide the Multi-Share tab */

Paper.li CSS Styling | /* Hide the Multi-Share tab */

.share-bar {
display: none;
}

25

/* Hide the "next edition" update time */

Paper.li CSS Styling | /* Hide the "next edition" update time */

ul.nav-paper-date li:nth-child(2) {
display: none;
}