Personalize your RSS article’s styles

You can use article templates or CSS options available in the Google News Publisher Center to customize the presentation of your RSS articles in Google News.

Customize your articles using CSS

As a publisher, you can use the Article style function to customize the presentation of your RSS articles. To begin the process, follow these steps:

  1. Sign in to the Google News Publisher Center.

  2. Select your publication.

  3. Click the Advanced tab.

  4. Scroll to “Article styles.”

  5. In the CSS input box for your edition, enter the CSS.

  6. To save and preview your changes, click Save and preview

  7. After you save your CSS, the preview panel on the right will show your style changes.
    Tip: You can also preview your saved styles with the Google News Designer Mode on Android or iOS devices. It may take up to a minute for your style changes to appear in the Designer Mode.

  8. To make the CSS style publicly visible, click Publish. The newly published style will be reflected in Google News within 2 hours. 

Google News HTML

Google News doesn’t serve the exact HTML that publishers use in their feed. When Google News adds publisher-generated articles to its library and turns them into data that its clients can read, it can’t distinguish between certain tags. As a result, Google News will report a syntax error if you style 2 different tags that turn into the same tag. For example, adding styles to both <div> and <p> tags generates a syntax error. 

Below are some of the changes that Google News makes to publisher-generated article HTML:

Publisher tag Google News tag
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

Allowed element selectors

HTML elements

The Google News Publisher Center supports the following HTML tags:

  • <a>

  • <b> | <strong>

  • <blockquote>

  • <cite> | <small>

  • <del> | <s> | <strike>

  • <div> | <p>

  • <em> | <i>

  • <h1>

  •  … 

  • <h6>

  • <ol>

  • <q>

  • <sub>

  • <sup>

  • <u>

  • <ul>

Important: A ”|” between tags indicates that only one of the tags will be styled due to HTML element changes (see above).

Google News elements

In the Google News Publisher Center, you can use customized Google News elements to style your article. Review the available elements listed below:
Google News element Description Screenshot example
<ns-caption-copyright> Copyright for an image 1
<ns-caption> Caption text beneath an image 2
<ns-edition-name> The publication name header 3
<ns-author-timestamp> The author and time of publication header text 4
<ns-author-timestamp-separator> The dot between the author and the publication time 5
<ns-slideshow-copyright> Copyright beneath slides 6
<ns-slideshow-caption> Captions beneath slides 7
<ns-subtitle> Article subtitle 8
<ns-title> The title text for the news article 9
<ns-header-divider> The divider between the article title and author timestamp 10
<ns-logo> The logo at the top of the article 11

CSS style examples

You can style certain elements of your article in Google News, by modifying the CSS as shown in the example below:
 

CSS Example

/* All links are red. */
a { color: #cc0000; }
/* All article text will be black, horizontally centered, and be on a white background. */
p {
  color: #000000;
  -ns-block-align: center;
  /* Setting background-color on a 'p' tag will set the background of the entire article. */
  background-color: #FFFFFF;
  /* Font-settings in the 'p' tag become "default" styles overridden by styles rules on other tags. */
  font-weight: 300;
      font-size: 14sp;
      font-style: normal;
       vertical-align: baseline;
  }
/* There are Google News-specific elements you can style too! */
ns-title {
  font-weight: 700;
  text-decoration: underline;
}
/* 
 * Styles all tags with the attribute ' class="style-id:firstHeaderOne" ' to have a red text. 
 * Example affected HTML: <h1 class="style-id:firstHeaderOne">
 */
[style-id="firstHeaderOne"] { color: #cc0000; }
/*
 * Section-specific style overrides. Use the section name.
 * For example: To make all links grey in the "Top News" section.
*/
 
a [section="Top News"] { color: #0c0c0c; }
/* Style-id-specific styles can be used in conjunction with section overrides. */
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }
/* Custom styles can also be written for articles rendered on a tablet. */
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }

 

Google News-specific CSS extensions

Style-id selector

To apply a style to all elements in the style-id:my-style-id class, use a style-id selector instead of an element selector:
[style-id="my-style-id"] { color: #cc0000; }

Section selector

The section selector must be used in conjunction with a style-id or element selector. Use the section selector for section-specific style overrides:

/* Black text on a white background for all sections. */

p { color: #000000; background-color: #FFFFFF; }

/* 

 * White text on black background for "Top News" section. 

 * The value after 'section=' must be a valid section name.

 */

p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

Device selector

The device selector must be used in conjunction with a style-id or element selector. Use the device selector for device-specific style overrides:

/* Black text on a white background for all devices. */

p { color: #000000; background-color: #FFFFFF; }

/*

 * White text on black background for tablet devices. 

 * This selector may currently only take on the values 'all' and 'tablet'.

 */

p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

Allowed property declarations and values 

Google News only allows the below 5 categories of CSS property declarations:

About “dp” and “sp.”

Density-independent Pixels (dp) are a unit of measurement used instead of pixels (px) because different devices have different pixel densities. Using dp ensures a style looks the same on devices with different pixel densities. 

Scale-independent Pixels (sp) are usually the same as a dp, but also depend on the user's font size settings. If a user increases font size, the size of an sp will also increase. 

To learn more about dp and sp, review the Material Design reference guide. 

Available block style

Name Values
line-height decimal-number | percentage
text-align left | right | center | justify
-ns-block-align left | right | center
-ns-display visible | gone

margin

margin-right

margin-left

margin-top

margin-bottom

dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp

padding

padding-right

padding-left

padding-top

padding-bottom

dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp

Text style

Name Values
font-family <family-name>
font-size dp | sp
font-weight bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style normal | italic
letter-spacing dp | sp
text-decoration none | underline | line-through
text-transform capitalize | uppercase | lowercase | none
vertical-align baseline | super | sub

HR style

Name Values
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

Block and text style

Name Values
background-color <hex-color>

Span and HR style

Name Values
color <hex-color>

 

 

Do it now in the Publisher Center

 

 

Was this helpful?
How can we improve it?