General Styles
Websites have a set of default text styles, Just like Word or a page layout program. The styles includes headlines, subheads, paragraph text etc. Each of the page attributes can be configured in your styles to best fit your design.
The General Styles stylesheet contains the most broadly applicable styles in your Made Daily website. Styles set, for example, for Headline 1 or Paragraph in general styles will apply to everywhere headline 1s or paragraphs are used in your site, including text content that you create, product listing, stories, etc.
You can also make it so a style looks different at each website breakpoint. For example, Headline 1 be styled one way for desktop, and differently for mobile or tablet.
From Site Styles, Click Edit Styles on the General Styles, style sheet, to access the Style sheet.
To change a style click edit. Next make your style changes. You can edit: Background, Text, Padding, Margins, Borders, Corners, Box Shadow, Text Shadow and more.
Once you are finished click SAVE.
After you edit a style you need to publish your stylesheet to see the changes reflected. To publish the Style Sheet click the PUBLISH STYLES button.
We recommend that you keep changes in General Styles to a minimum. Start with setting a text size or basic color and see how that looks first. If you need to make additional style changes make those changes in the appropriate style sheet.
For changing the look of the Navigation use Navigation Styles.
For design components that use text and use the text editor, use Text Editor Styles.
For buttons & Alerts use buttons and alerts and so on.
Text Editor Styles
When you add text content to a page you may want to control size, color, and style of your typeface. The text editor comes with default set of styles that can be modified to best reflect your design.
The text editor styles are located in Site Styles, in the Publishing styles section.
Click Edit Styles to access the Text Editor Style sheet.
To change a style click the edit link.
Next make your style changes. You can edit: Background, Text, Padding, Margins, Borders, Corners, Box Shadow, Text Shadow and more.
Once you are finished click SAVE.
After you have completed editing your styles you need to publish your stylesheet to see the changes. To publish the Style Sheet click the PUBLISH STYLES button.
Remember that you can set separate styles for each responsive breakpoint. Click on the tablet or mobile icon and then edit the style.
You should view responsive style changes in the context of a page and work back and forth between pages and styles as you tweak your design.
Navigation Styles
The Navigation styles for your website will vary based on the number of website flows.
The default navigation styles are Main Navigation, Side Navigation, Footer Navigation, Social links, and Off Canvas Navigation. Each flow will have its own set of styles.
Navigation styles contain a series of styles required to power the website navigation flow.
The navigation container style should be used to position the navigation list, like aligning the text left, center or right.
The navigation items Normal, Hover, and Active will set the various states of the navigation.
The Normal state is when a navigation item is not clicked or rolled over. The Hover state is when the navigation item is being rolled over. And the Active is when the navigation has been clicked, often designated as a an underline or separate color.
Navigation Item Icon will control the style of the icon used in the navigation.
Navigation image will style the image nav, if you upload your own image for the navigation.
Divider will style the divider that can be placed between navigation items.
And the Nav Button will style any navigational buttons you may add to a page.
To edit the styles click Edit Styles on the Navigation Stylesheet you want to change.
To change a style click the edit link.
Next make your style changes.
Once you are finished click SAVE.
After you have completed editing your styles you need to publish your stylesheet to see the changes. To publish the Style Sheet click the PUBLISH STYLES button.
It’s also important to understand the relationship between a navigation style and the navigation flow component. The navigation flow component is connected to a website flow.
The navigation type sets how the flow will display.
Vertical tree navigation is displayed in a single column ordered vertically top to bottom.
Horizontal navigation is displayed in a single row ordered left to right.
Horizontal Menu is displayed as a drop-down menu.
When you select the style you are telling the navigation component which style sheet it should use.
Remember that you can set separate styles for each responsive breakpoint. Click on the tablet or mobile icon and then edit the style.
You should view responsive style changes in the context of a page and work back and forth between pages and styles as you tweak your design.
Buttons & Alerts
Style your buttons and alerts, off canvas icons and share buttons for your website.
Styling the Global buttons will affect the other buttons in the style sheet, so start with the global button and then style the rest of the buttons based off the Global button.
Make sure to style the mobile version as well.
The Normal state is when a button is not clicked or rolled over.
The Hover state is when the button is being rolled over.
When editing buttons, it’s best to start with the typestyle, padding around the text, the border color and corners.
To edit the button and alert styles click Edit Styles on the Buttons & Alerts Stylesheet.
To change a style click the edit link.
Next make your style changes.
Once you are finished click SAVE.
After you have completed editing your styles you need to publish your stylesheet to see the changes. To publish the Style Sheet click the PUBLISH STYLES button.
Remember that you can set separate styles for each responsive breakpoint. Click on the tablet or mobile icon and then edit the style.
You should view responsive style changes in the context of a page and work back and forth between pages and styles as you tweak your design.
