Customize the presentation of your articles

You can customize the presentation of your articles in Google News using article templates or CSS via our presentation options in Google News Producer

Customize an edition using CSS

Publishers can further customize the presentation of their editions via the Article style page by following these steps:

  1. Sign in to Google News Producer.
  2. Click Article style.
  3. Enter CSS in the CSS input box for your edition.
  4. When you’re ready to save and preview your changes, click Save draft style
  5. After you save your CSS, the preview pane on the right reflects your style changes.
    • If the style doesn’t affect the article you’re viewing, click X at the top to view another article.
    • You can also preview saved styles using Google News Designer Mode on Android or iOS devices.
      Note: It may take up to a minute for style changes to appear in Designer Mode.
  6. To make the CSS style publicly visible, click Publish draft style. 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 publish in their feed. When Google News adds a publisher-generated article to its library, it turns the article into data that its clients can read. After this change, Google News can’t distinguish between certain tags. 

To ensure styles are properly defined, Google News reports a syntax error if you style 2 different tags that get turned 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 following HTML tags are supported by Google News Producer:

  • <a>
  • <b> | <strong>
  • <blockquote>
  • <cite> | <small>
  • <del> | <s> | <strike>
  • <div> | <p>
  • <em> | <i>
  • <h1>
  •  … 
  • <h6>
  • <ol>
  • <q>
  • <sub>
  • <sup>
  • <u>
  • <ul>

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

Google News elements

In Producer, 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 edition 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

 

Article styles elements in Producer

Article style elements in producer

CSS style examples

The following example illustrates how to style certain elements of your article in Google News:

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

Only the following CSS property declarations are allowed:

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>

 

Was this helpful?
How can we improve it?