Step 6: Edit the main.less File
Let's style the title and menu. We'll use the accent color we added for the title and menu. And we'll also use the float CSS property to move the title and menu.
- If you're not in the Code Editor, from the Theme tab, click Edit HTML/CSS.
- Under the Styles area, click main.less to open it.
- Scroll down to the Header area to find the .wsite-logo class. You'll notice that there is styling for the link color (logos by default are a link to the home page), an image height (for when a user uploads a logo graphic to use instead of the title text), and styling for the title text. The link style uses the accent color we created:
4. Let's float the entire logo area to the left. Let's also make the title bigger.
For the .wsite-logo class, add a float property and set it to left.
For the #wsite-title element, change the font-size property to 5em.
For the .wsite-logo class, add a float property and set it to left.
For the #wsite-title element, change the font-size property to 5em.
5. Now let's float the menu to the right. Scroll down to the Navigation area until you find the .wsite-menu-default class. Like the .wsite-logo class, this menu class includes styles for multiple aspects of the menu, including active and hover link styles, font styles and padding. Since the link color uses the @text_color variable, it will use the primary color set by the user (remember we set the @text_color variable to use the @site-primary-color variable in Step 5). And the link hover style will use the accent color.
Let's float the menu to the right by adding the float property, and change the text so that it's all uppercase by adding the text-transform property.
6. Click Save.
The layout of the header has changed. If the title doesn't seem to be lining up correctly, it's because the editor window is too small.
The layout of the header has changed. If the title doesn't seem to be lining up correctly, it's because the editor window is too small.
Ok! We're done changing the styling of the header template. Pages using the header template should now reflect the changes we made. Now let's change how blog pages look.
What Just Happened?
You edited the main.less stylesheet and used CSS properties to change the display of the title and the menu.
You edited the main.less stylesheet and used CSS properties to change the display of the title and the menu.