GoodBarber's Online Help
Section design
By default, your application has a global style applied to all your app's pages.
To modify colors, fonts, backgrounds, formats, etc... of each element of your application:
1. Go to the menu Design & Structure > Structure > Sections which will show you the entirety of your sections on the right column
2. Click "Modify the style" in the right column next to the section to edit
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875905.jpg?v=1644447327.7103372)
Content section's design
Warning: the configurations available differ depending on the type of section you're modifying.
In this tutorial we used an Article CMS section as an example.
2 parts of the section can be configured:
- List of articles (list view of the page)
- Article page itself (detailed page)
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875906.jpg?v=1644447327.7798474)
1. Click "Edit List of articles" or "Edit Article"
2. Configure the different options available detailed below:
TEMPLATE
- Your template is clearly identified with a green icon
- Browse the different templates by using the arrows to select a new one
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875907.jpg?v=1644447327.8037016)
CONTENT
- Set the background color, font and text colors, content alignment etc. of your section
- Edit thetextand tokens that will be displayed in the Info settings on the list page, for instance
- Display the Author, summary when the option is available
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875908.jpg?v=1644447327.8313742)
TOOLBAR
- Select the actions to display in the toolbar of your detailed article page, the colors of the icons etc.
NAVIGATION
- Edit the Pager design settings*
THUMBNAIL
- Add a default thumbnail to display on your list page when there isn't one in your article
*option not available on all templates
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875909.jpg?v=1644447327.8597407)
HTML CODE*
- Edit the tokens and the text: delete, for instance, the date and author information:
Delete the small part of code corresponding to this information.
*Not available when using the template 4 for your detailed page.
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875910.jpg?v=1644447327.889013)
Menu section's design
If you use a multi-level navigation system in your app, to configure the design of your Menu section:
1. Go to the menu Design & Structure > Structure > Sections
2. Click "Modify the style" next to your menu section
3. Click "Edit Menu"
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875911.jpg?v=1644447327.917158)
4. Select the menu section's template
5. Use the settings available to configure the design (background images, effect, fonts, colors, icons etc.)
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875913.jpg?v=1644447327.9838502)
Specific Header
Edit the design of the header for a specific section*.
1. Go to the menu Design & Structure > Structure > Sections
2. Click "Modify the style" next to the section
3. Click "Header"
4. Click "Modify the header of this section"
*The configuration of the settings works the same than for the general header .
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-27875914.jpg?v=1644447328.03264)
To go back to the default settings and apply the design of the general header:
1. Go to the menu Design & Structure > Structure > Sections
2. Click "Modify the style" next to the section
3. Click "Header"
4. Click the gear icon in this specific header's settings
5. Click "Go back to default header"
![picture picture](https://cmsphoto.ww-cdn.com/superstatic/1663330/art/default/27992296-28204662.jpg?v=1644447328.0588124)
Video tutorial
Note: Menus have changed in the back office, but the behavior explained in the video is still accurate.