CSS Editor

Page you need to restyle

Our goal is to change the size of the text to the right of the image of the Products List page.

View HTML source of the Page

In order to be able to change the style of the page, you need to know what elements to address. We can see that the text is contained in a div with id='dx_home_shop'. We can already have a preview of what the text will look like by setting its font size to 1.3em (courtesy of the browser)

CSS Module

On the back end of the VirtualNewspaper, there's a module called CSS. It is structured in three main parts. Title selector, area selector and page selector. A combination of the three allows you to find the element you want to act upon.

Areas

Here, as the name implies, you need to select area of the VirtualNewspaper you're interested in. In our example the area corresponds to the "Shop"..

Select Page

Each area contains multiple pages. By hovering on each bar, if available, a preview of the page will be shown. By clicking on the + sign the CSS editor will open with the custom styles that might have been created for the page. For the example, we'll open the "Products List" page

CSS Editor

On the editor, you can write standard css code, which will be applied to the selected page. In out example we're modifying the font-size for the id dx_home_shop. as previously tested on the brower's style editor. Finally, click on Save and Publish to make your styles effective.