Follow

Promote! Customize the Headlines widget

Customize the Headlines widget: change the background color, size, text and remove the paper.li label.  The Headlines widget can also be adjusted for pages that use https protocol.

 

If you haven't already found the default embed code for the Headline widget, find out where it's located in the settings here.

The  default embed code for the Headline widget can be customized in the following ways:

  • width: 200 px is the default.   Width can be adjusted directly in the default code.  Change the default value of 200.  

  • background: '#FB0000' is the default (red) Hex color code, but you can change this value to match the color scheme of your paper.   (To find the Hex color code of any image, try this tool.)

 

Additional Adjustments for the Headlines widget

In addition to simply changing the default values for the existing fields in the HTML code, fields and custom text values can be added in order to adjust the default text (which is set for a daily paper) to a weekly or twice daily paper.  

 

The following fields can be added to the HTML code given as the default:

  • content: 'Today's content'  (Default is "Today's content", shown below left)  Can be adjusted to "This week's headlines" for example.

  • readit: 'Read it now!' (Default is "Read it now!", shown below left)  

  • footer: 'Updated daily'  (Default is "Updated daily", shown below left)    Can be adjusted to "Updated weekly" for example.

  • White label:  Remove the "by paper.li" footer.  

  • URL: When clicking on the headlines widget, a visitor would normally be taken to the paper URL.  If you have embedded your paper using an iframe on your own site, you can redirect the Headlines widget to go to that page.

 

To add one or all of the above custom text fields:

1.  Start with the default HTML found in the right sidebar settings.

Example of default code:

<script src="http://widgets.paper.li/javascripts/init.js" type="text/javascript"></script>
<script>Paperli.PaperWidget.Show({pid: 'YOUR Paper ID GOES HERE', width: 200, background: '#FB0000'})</script>

2.  Insert the following code below to the default code, just after the background HTML Hex color value, replacing the default text within the quotes for a weekly or twice-daily paper.

, text: {content: 'Today's content', readIt: 'Read it now!', footer: 'Updated daily'}

NOTE: If you would like to use a ' in your custom text, replace the ' by the HTML code &#39.  Example:  This week's content will be written "This week&#39s content"

3. Paste the resulting code from step (2) into your blog or webpage.

<script src="http://widgets.paper.li/javascripts/init.js" type="text/javascript"></script>
<script>Paperli.PaperWidget.Show({pid: 'YOUR Paper ID GOES HERE', width: 200, background: '#FB0000', text: {content: 'Today's content', readIt: 'Read it now!', footer: 'Updated daily'}})</script>

4.  To redirect the URL to another site, insert the following code below just after the HTML Hex color value, replacing the example URL below within the quotes.

url: 'http:/exampleURL.com/'

 5.  The final script would look something like:

<script src="http://widgets.paper.li/javascripts/init.js" type="text/javascript"></script>
<script>Paperli.PaperWidget.Show({pid: 'YOUR Paper ID GOES HERE', width: 200, background: '#FB0000'url:'http:/exampleURL.com/', text: {content: 'Today's content', readIt: 'Read it now!', footer: 'Updated daily'}})</script>

 

Change the text color, text font, color of background, and hide "by paper.li"

As the headlines widget is rendered within the hosted page (the page where it's embedded) you can add some additional code there customize the text color, text font, and the color of the background.

The best is to add the below code under <head> tag of the page where you have embedded the headlines widget.

But if you add the below code just before the widget code on the page where it is embedded, it will work too.


Customizing the font of the headline widget

Replace the font name below with the font you wish.

<style>
.sr-ttl {
font-family: Arial !important;
}
</style>


Customizing the text color of the headlines widget

Replace the color hex code #00000 below with the color you wish, using this tool.

<style>
sr-paper-widget .sr-ttl,
.sr-paper-widget .sr-ft-lbl {
color: #000000 !important;
}
</style>

Customizing the background of the headline widget

Replace the color hex code #00000 below with the color you wish, using this tool.

<style>
.sr-paper-widget {
background-color: #00000;
}
</style>

 

Remove the "by paper.li" 

<style>
.sr-paper-widget .sr-ft {
display: none;

</style>

 

 

 

Default Headlines widget

Customized Headlines widget

 

 

 Screen Shot 2014-02-12 at 11.26.47 PM.png Using Headline widget on websites that require https

If you would like to use the Headline widget in a site that uses https protocol, you will need to adjust the code by clicking the checkbox on the bottom of the screen.

 

 

 

If you need help with these instructions, don't hesitate to contact us:  tweet us @paper_li, Submit a request to support or Pro publishers can contact us directly via the email given to you at the bottom of your any billing email received from us.   

Was this article helpful?
3 out of 4 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk