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.

32
ITEMS
2777
VIEWS
FAVE
EMBED
SHARE
  1. 1
    0 Voting...
    /* Add a margin to the top of the page */

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

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

  2. 2
    0 Voting...
    /*Add custom non-repeating, large background image*/

    /*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. 3
    0 Voting...
    /* 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) */

    /* 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;}

  4. 4
    0 Voting...
    /* Change the paper's text color */

    /* 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}

  5. 5
    3 Voting...
    /* Control the paper subtitle color */

    /* Control the paper subtitle color */

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

  6. 6
    0 Voting...
    /* Disable auto-crop for article images.*/

    /* 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;
    }

  7. 7
    1 Voting...
    /* featured article background color */

    /* featured article background color */

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

  8. 8
    0 Voting...
    Hide all stories

    Hide all stories

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

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

  9. 9
    0 Voting...
    Hide paper's banner

    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;
    }

  10. 10
    0 Voting...
    Hide Powered by Paper.li

    Hide Powered by Paper.li

    This hides the footer on your paper

    .paper-footer {
    display: none;
    }

  11. 11
    0 Voting...
    /* Hide social sharing buttons */

    /* Hide social sharing buttons */

    .addthis-smartlayers {
    display: none;
    }

  12. 12
    0 Voting...
    /* Hides the Editor's box in iframe version of paper */

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

    .iframed .block-editor {
    display: none;
    }

  13. 13
    0 Voting...
    /* Hides the multi-share tab in iframe version of paper */

    /* Hides the multi-share tab in iframe version of paper */

    .iframed .share-bar {
    display: none;
    }

  14. 14
    1 Voting...
    /* Hide the contributor avatar 'shared by' */

    /* Hide the contributor avatar 'shared by' */

    .user-avatar {
    display: none;
    }

  15. 15
    0 Voting...
    /* Hide the date */

    /* Hide the date */

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

  16. 16
    1 Voting...
    /* Hide the editor's box */

    /* Hide the editor's box */

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

  17. 17
    1 Voting...
    /* Hide the Multi-Share tab */

    /* Hide the Multi-Share tab */

    .share-bar {
    display: none;
    }

  18. 18
    1 Voting...
    /* Hide the "next edition" update time */

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

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

  19. 19
    1 Voting...
    /* Hide the Paper Title */

    /* Hide the Paper Title */

    .paper-masthead .paper-info {
    display:none;
    }

  20. 20
    1 Voting...
    /* Hide the "Powered by Paper.li" at the footer */

    /* Hide the "Powered by Paper.li" at the footer */

    .paper-footer {
    display:none;
    }

  21. 21
    0 Voting...
    /* Hide the subscription box */

    /* Hide the subscription box */

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

    .paper-sidebar-body .paper-sidebar-block:nth-child(2) {
    border-top: 2px solid #dcdcdc;
    }

  22. 22
    1 Voting...
    How-to add a Custom Header Bar

    How-to add a Custom Header Bar

    This post walks you through how to add a custom header bar to your paper.

    Regardless if you use the custom CSS in this post, or your own, you will want to add this CSS in addition to ensure the Edit Button displays on your paper when you are sign-ed in.

    .no-default-header #header {
    min-height: 52px;
    }

  23. 23
    0 Voting...
    How To Add A Custom News Ticker To Your Paper.li

    How To Add A Custom News Ticker To Your Paper.li

    This is a follow post on how to customize your paper with a rotating news ticker. Hot, hot hot!

  24. 24
    1 Voting...
    /* Increase bottom margin of the main article */

    /* Increase bottom margin of the main article */

    .lead-article .article-inner {
    margin-bottom: 15px;
    }

  25. 25
    1 Voting...
    /* Increase the bottom margin of the article title */

    /* Increase the bottom margin of the article title */

    .article h2 {
    margin-bottom: 15px;
    }