Theming

Theming and Styling the News App

The look and feel of the News app is mostly controlled by the custom properties defined in news-app.html. However, to avoid FOUC on browsers in which custom properties have no native implementation, the following properties are defined with literal values in index.html:

  • Page background color
  • Font
  • Text color

Broad changes to the look and feel of the News app can be made with a few properties in index.html and news-app.html. Here's how to modify:

To change the page background color for the whole app, edit the value of background-color for the <body> element in index.html:

index.html

<style>
  body {
    ...
    background-color: #FAFAFA;
    ...
  }
</style>

To change the font for the app headlines, article text and main title, edit the value of font-family for the <body> element in index.html:

index.html

<style>
  body {
    ...
    font-family: Georgia;
    ...
  }
</style>

To change the text color for the app headlines, article text and main title, edit the value of color for the <body> element in index.html:

index.html

<style>
  body {
    ...
    color: #383838;
    ...
  }
</style>

This controls the font and text color inside the shadow trees of elements inside the <body> tags, since these properties are inherited.

To change border styles and colors throughout the app, edit the value of --app-border-style and --app-transparent-border-style in news-app.html:

news-app.html

<style>
  :host {
    ...
    --app-border-style: 5px solid #FFF200;
    --app-transparent-border-style: 1px solid #FFF200;
    ...
  }
</style>

In this tutorial, we modify the look and feel of the News theme from the defaults to match this design.

Before:

News theme before modifications

After:

News theme after modifications

We'll take these steps:

In index.html, change the document title and the value of the app-title property and the contents of <news-app> from "NEWS" to your choice of title.

index.html

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>Your Site Title</title>
  <link rel="shortcut icon" sizes="32x32" href="/images/news-icon-32.jpg">
  <meta name="theme-color" content="#000">
  <link rel="manifest" href="/manifest.json">
  ...
</head>
...
<body>
  <news-app unresolved app-title="Your Site Title">Your Site Title</news-app>
</body>

Before:

News site before modifying the title

After:

News site after modifying the title

In index.html, change the value of the background-color property to #F1F3F2. Also, change the value of font-family to sans-serif.

index.html

<style>
  body {
    margin: 0;
    background-color: #F1F3F2;
    color: #383838;
    font-family: sans-serif;
    min-height: 100vh;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  ...
</style>

Before:

Before modifying background color and font family

After:

After modifying background color and font family

To modify border and sticky nav bar styles, we'll edit the values of the custom properties that control them. These properties are stored in news-app.html. Edit this file as follows:

news-app.html: Before

<style>
  --app-border-style: 1px solid #CCC;
  --app-transparent-border-style: 1px solid rgba(255, 255, 255, 0.5);
  --app-button-border-style: 2px solid #222;
  --app-cover-text-color: #FFF;
  --app-nav-background-color: #222;
  --app-nav-text-color: #FFF;
  --app-nav-deselected-text-color: #CCC;
  --app-nav-selected-background-color: #555;
  ...
</style>

news-app.html: After

<style>
  --app-border-style: 5px solid #FFF200;
  --app-transparent-border-style: 1px solid #FFF200;
  --app-button-border-style: 2px solid #FFF200;
  --app-cover-text-color: #FFF;
  --app-nav-background-color: #E9E7E8;
  --app-nav-text-color: #383838;
  --app-nav-deselected-text-color: #888;
  --app-nav-selected-background-color: #FFF200;
  ...
</style>

For more information on what these custom properties control, see the Custom Properties Reference below.

Before:

Before modifying border styles Before modifying sticky nav bar styles

After:

After modifying border styles After modifying sticky nav bar styles

In news-app.html, update the --app-sub-section-headline mixin.

  • Change the value of border-top to none.
  • Change the value of font-size to 24px.
  • Add two properties to this mixin: font-family: "Georgia" and font-style: italic.

news-app.html: Before

<style>
  ...
  --app-sub-section-headline: {
    border-top: var(--app-border-style);
    border-bottom: var(--app-border-style);
    font-size: 13px;
    padding: 8px;
    text-align: center;
  };
  ...
</style>

news-app.html: After

<style>
  ...
  --app-sub-section-headline: {
    border-top: var(--app-border-style);
    border-bottom: var(--app-border-style);
    font-size: 50px;
    padding: 8px;
    text-align: center;
    font-family: "Georgia";
    font-size: 24px;
    font-style: italic;
  };
  ...
</style>

For more information on what this mixin controls, see the Custom Properties Reference.

Before:

Before modifying subsection headline styles

After:

After modifying subsection headline styles

The end result can be seen here: https://polymer-news-theming.appspot.com

After modifying the news site theme

The following custom properties are defined in news-app.html:

Default: 1px solid #CCC

The width, style and color of the borders around menu bars, category headers, article headlines and items in list views.

Examples:

--app-border-style: 1px solid #CCC;

--app-border-style custom property default

--app-border-style: 5px solid #FFF200;

--app-border-style custom property modified

Default: 1px solid rgba(255, 255, 255, 0.5)

The width, style and color of the borders around the date line and featured item above an image. (For performance, this is a separate property.)

Examples:

--app-transparent-border-style: 1px solid rgba(255, 255, 255, 0.5);

--app-transparent-border-style custom property default

--app-transparent-border-style: 5px solid #FFF200;

--app-transparent-border-style custom property modified

Default: 2px solid #222

Width, style and color of borders around buttons. Used in news-network-warning.html.

Default: #FFF

Color of the text on the featured item in the list view. See Notes below.

Examples:

--app-cover-text-color: #FFF;

--app-cover-text-color default

--app-cover-text-color: orange;

--app-cover-text-color modified

Default: #222

Background of the sticky nav bar/mobile app drawer.

Examples:

--app-nav-background-color: #E9E7E8;

--app-nav-background-color default

--app-nav-background-color: orange;

--app-nav-background-color modified

Default: #FFF

Text color for the sticky nav bar/mobile app drawer.

Default: #CCC

Text color of category links in the sticky nav bar menu/mobile app drawer.

Examples:

--app-nav-deselected-text-color: #888;

--app-nav-deselected-text-color default

--app-nav-deselected-text-color: blue;

--app-nav-deselected-text-color modified

Default: #555

Background color of current category in mobile app drawer.

Examples:

--app-nav-selected-background-color: #555;

--app-nav-selected-background-color default

--app-nav-selected-background-color: #FFF200;

--app-nav-selected-background-color modified

Mixin for headlines of the sub-sections in the list view. See Notes below.

For mobile, the equivalent value of --app-cover-text-color is hard-coded in index.html to allow for browsers that don't support custom properties:

index.html

/* mobile */
@media (max-width: 767px) {
  body {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.7) 48%, rgba(0,0,0,1) 60%);
    background-repeat: no-repeat;
    background-size: 100% 100vh;
  }
  news-app[unresolved] {
    height: 22px;
    padding-top: 21px;
    font-size: 20px;
    color: #FFF; /* --app-cover-text-color */
  }
}

news.app.html

--app-sub-section-headline: {
  border-top: var(--app-border-style);
  border-bottom: var(--app-border-style);
  font-size: 13px;
  padding: 8px;
  text-align: center;
};

With defaults:

--app-sub-section-headline defaults

With these changes:

--app-sub-section-headline: {
  border-top: none;
  border-bottom: none;
  font-size: 30px;
  padding: 8px;
  text-align: left;
};
--app-sub-section-headline modified

To change the page background color, margin, font, and text color for the app, edit this section of index.html:

index.html

<style>
  body {
    margin: 0;
    background-color: #FAFAFA;
    color: #383838;
    font-family: Georgia;
    min-height: 100vh; /* Pushes footer content below the fold during initial page load to avoid FOUC */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Overrides the iOS default transparent grey highlight when tapping a link */
  }
  ...
</style>