Hi, fellow community members! My name is Dorian Staten, and I am the creator and editor of The Freethinker Post, a Paper.li newspaper that focuses on progressive news and politics.

I’m a prolific tweeter and I do my best to keep people informed about what’s going on in news and politics in the United States as well as around the globe. Paper.li has become a powerful tool for me in that regard, as it allows me to take the most important stories my Twitter followers care about, wrap them up in a clean, professional newspaper format, and then deliver them to my subscribers’ email inboxes each day.

Since Paper.li launched the Pro white label (customization) features last month, I’ve worked tirelessly to leverage them all and enhance and personalize my Paper.li.  I’m very pleased with how far I have been able to take my paper and I wanted to share my customizations with you, and guide those of you who would like to make similar improvements to your own papers.

This will be the first post in a series that will cover topics such as adding a custom header, footer, news ticker, and stats counter to your paper, as well as a some tips and tricks. For this first part of the series, I’ll explain how to create a custom header. You can view mine here on The Freethinker Post.

So, without further ado, let’s dive into it, shall we?

Note: Anytime I provide code, it will be in either blue or red. The code that appears in red is the code you should change to personalize (e.g. adding your email address in the ‘Contact Me’ link).

Why should you add a custom header to your Paper.li?

There are various reasons why you should consider to add a customized header to your paper. By having a good custom header you can add a nice touch to your paper, personalize it to your liking and really make it your own. I use my custom header make it easier for my visitors to find “share” buttons and helpful links.

Note: the first step to moving forward with customizations is to configure a custom domain for your paper.

Preparing Your CSS (IMPORTANT!)

Before we get into creating your custom header, you need to prepare your CSS.

If you’re going to use the code I’ll be providing in this post, the first thing you’ll need to do is copy and paste the following code into your CSS (Go to Paper Settings > Appearance > Custom design > Edit the CSS of your paper) then paste the following code into the edit box that pops up.:

@media screen and (max-device-width: 720px) {
.customHeader {
display: none;
   }
}

@media (min-device-width: 720px) and (max-device-width: 8192px) {
.customHeaderMobile {
display: none;
   }
}

The above code ensures that your custom header bar will fit properly on the page no matter if your visitor is using a PC with a high resolution, a tablet, a mobile phone, or any other device. The header bar will appear and fit properly on all devices, but a smaller version with only the share buttons will be visible when visitors are using mobile phones due to size constraints.

Creating Your Custom Header Bar

Let’s get to it!

To create your custom header bar, click here and then copy and paste the code from the new window into your header (go to Paper Settings > Appearance > Custom design, switch the slider next to ‘Show Paper.li header’ to ‘Off,’ then click ‘Add or edit your custom header (HTML)’ and paste the code into the edit box that pops up.)

See below for instructions on how to personalize the code for your site.

Custom Header Code

Click image to enlarge

Personalizing Your Custom Header Bar

After we’ve done that, we just need to personalize the code for your site. The image above shows what needs to be changed. Let’s go over the changes you need to make – one at a time:

  • The first items you’ll see in red are #DCDCDC and #000000. These are color codes. #DCDCDC is gainsboro, which is a shade of grey and the default color of the links in the header bar. #000000 is black, the default background color of the header bar. To change the color of the links and background in your bar, simply change those letters/numbers to the color code of your choice (make sure you leave the ‘#’ symbols, only change the letters/numbers). You can find a list of color codes on this page. You can leave the default colors, or you can play with the colors to see what suits your site best.
  • The next item you’ll see in red is YourTwitterName. Simply change that to your Twitter account name, and then your ‘Follow Me On Twitter’ link will be ready to go.
  • Then we have YourRSSFeedURL. To find your RSS feed URL, go to Paper Settings > Settings, and then click ‘Show feed URL’ next to ‘RSS feed.’ Copy the URL that is displayed, and then paste it over YourRSSFeedURL in your code. Your header bar RSS Feed link is now set.
  • Next we have YourName@Some.com. Simply change that to whatever your contact email address is and then your header bar ‘Contact Me’ link will be set.
  • Last we have http://dastaten.com/shadow.png. This URL points to the image that creates the transparent shadow effect immediately below the header bar. You are welcome to leave this and continue to use my image, or you can go to http://dastaten.com/shadow.png in your browser, right-click and save the tiny image in the upper-left hand corner, then upload it to your server and change the link to reflect the new location. It’s totally up to you. The only downside to using the image on my server is if I ever run out of money and quit paying for hosting, your shadow will disappear. Let’s hope for both our sake that doesn’t happen though. 😉

 

And we’re done!  If you copied and pasted the CSS I provided, then copied, pasted, and edited the rest of the code as I explained, your header bar should appear on your page and your links should all be working. Feel free to play with it and change it to your liking. Have fun and make it your own!

If you use this code, feel free to leave a comment with a link to your site. I’d love to see what you do with your custom header.

Stay tuned for next time when we’ll talk about adding a custom news ticker to your paper. See you then!

Dorian Staten
I lived and worked in Texas, US for the first 39 years of my life, and spent most of my working years in web design. I'm self taught and started my own web design business in Galveston, Texas in 1998. My business never really got off the ground, but the experience taught me the skills I needed to get my foot in the door and quickly build a career in web design. I left the rat race a couple of years ago and have spent the last nine months in Cancun, Mexico. I'm a liberal humanist and now spend a great deal of my time following the news and politics. My goal these days is to use social media and my Paper.li newspaper to inform people about the injustices currently going on in the world.

Published by

13 Responses to “How-to Add a Custom Header Bar to Your Paper.li”

  1. Paper.li

    Dorian, thank you for sharing your CSS changes with us! I’m going to get to work with a custom header myself and will let you know how it goes.

    Reply
  2. Bill Hibbler

    Hi Dorian, great to run into another Texan here. Thanks for such detailed instructions. I’ve got a question, though. Is there a maximum size you recommend for a header in order to be compatible with mobile devices? And should the background be transparent or can it just be the same color as what you use for background color in your CSS?

    Reply
    • Dorian Staten

      Hi Bill, I’m glad you enjoyed the post. I have a detailed stat counter for my site that tells me about the browsers users are using when visiting, and the smallest resolution used appears to be 320X533. That accounts for 13.4% of my hits, and is actually more than the next size up, which is 720X768 (10.6%). So I’d say you can’t go wrong by staying below 320px. You can also use CSS and div tags, as I have for the header in this blog post, that will force devices to display different sized versions of the header, depending on the device resolution. As for your second question, either way will work. You can either set the color as the same as the background, or simply remove the “background-color: #000000;” in order to set it as transparent. It’s your call. Thanks for the comment, Bill. If you have any other questions, let me know. =)

      Reply
  3. Howard Edidin

    Dorian,
    Nice work.

    I have two questions for your you.
    1. Would you know how to set the date format in the email notification?
    2. Could you post how to do a custom footer to match the header?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *