Configuring CSS

You can customize the appearance of mobile Turbo pages using your own CSS.

Tip. If you want to customize the look of mobile pages without using CSS, go to Customization.

Restrictions

To ensure that Turbo page loading speed doesn't fall, the use of CSS is restricted. When writing the CSS markup, don't use:

  • Third-party fonts (including custom fonts).
  • Low-performance animation.
  • Selectors by tag name or ID.
  • Third-party downloadable resources (such as .page { background-image: url("https://example.com/image.png") }).

To check the restrictions, use Stylelint. Configuration.

The maximum size of CSS in gzip format is 21 KB.

How do I customize it?

Step 1. Class definition

To define a class with the appropriate style:

  1. Go to the Turbo pages for content sites → Debugging page in Yandex.Webmaster.
  2. In the RSS debugging section, insert the item of the page that contains debugging elements and click Apply.
  3. Open developer tools. To do this, press F12.

  4. Choose the desired element on the Turbo page using the tool.

  5. Find classes and styles that you want to change. Use them when you debug the display.

Step 2. Debugging the display

To debug the display of new styles:
  1. Switch to the style debugging section. To do this, click CSS.
  2. Write your CSS and click the Apply button to see how the styles are applied on the sample Turbo page.

Styles are not applied if they are written incorrectly. Errors are displayed under the field in the CSS block.

Step 3. Saving styles

When the CSS styles are ready and the sample Turbo page is displayed correctly:
  1. Copy the style set and go to the Turbo pages for content sites → Settings page.
  2. In the CSS section, choose Mobile.
  3. Paste the style set in the CSS code field and click Save.

HTML and CSS

Use HTML and CSS to create custom markup for the pages. This allows you to make Turbo pages look more like the original pages, as well as customize the display of content.

CSS example

/* Page header color selection */
.cover {
  background: #BBD8E4;
  padding-bottom: 32px;
}

/* Center the page title */
.cover .title {
  text-align: center;
}

.cover .subtitle {
  text-align: center;
  margin-top: 8px;
}

.cover .image {
  margin-top: 24px;
  border-radius: 4px;
}

/* Link color */
.link {
  color: #307896;
}

/* Color of the Turbo page icon in the header */
.page .header-turbo-icon {
  fill: rgba(0, 0, 0, 0.6);
}

/* Title font */
.title_level_2 {
  font-weight: 100;
}