Displaying the style switcher
After setting styles, we’ll display the style switcher in Contao front-end. As is usual in Contao, we have to create a new front end module within the theme in use, entering the following information:
- Title: the title of the module (it will not be displayed in the front-end).
- Headline: the headline for the module that will be displayed in the front-end page.
- Module type: you will choose "Style switcher" in the Applications list.
- Style switcher: the style switcher you want to show in the front end page.
You can also add more advanced settings, as for any other Contao module. In our scenario, however, enter only the following information:
- Title: Font size switcher
- Headline: none
- Module type: Style switcher
- Style switcher: Font size switcher
Then save the module and add it to the layout of the theme in use.
In our scenario, remember to include in the layout the "main" stylesheet, while be careful not to include any of the stylesheets used in the style switcher, as they are dynamically loaded, according to the choices made by the user.
At this point, the style switcher will be displayed on your website. If you want, you can change its appearance using the following CSS classes:
- mod_zad_switcher: block that encloses the entire style switcher.
- next_style: link for the NEXT style button.
- previous_style: link for the PREVIOUS style button.
- default_style: link for the DEFAULT style button.
- item_style: link for each style button, in case you did not use the NEXT/PREVIOUS/DEFAULT buttons.
In our scenario, you can change the look of the style switcher adding following settings to the main stylesheet:
.mod_zad_switcher {
background-color: #DDDDDD;
color: #000000;
padding: 5px;
}
.mod_zad_switcher a.previous_style,
.mod_zad_switcher a.default_style,
.mod_zad_switcher a.next_style {
margin-right: 5px;
text-decoration: underline;
background-color: #DDDDDD;
color: #BB0000;
font-weight: bold;
}Finally, our style switcher will look like the following:
