The look and feel of your website are powered by Cascading Style Sheets (CSS), a style sheet language used to describe how a website is shown to you. CSS works by following rules that you create for how web pages should be displayed and separating the content of your website from the theme, so you have more flexibility and control over the design and layout of your website. Don't worry; you don't need to code any CSS when using Vagaro MySite. However, the option is available for advanced users.
Prerequisites: This feature requires a MySite subscription and the web, tablet, or Pay Desk version of Vagaro. To set up your first website, see Getting Started with Vagaro MySite.
Your website's design is a combination of global site stylings (the theme) and individual styles for each component. You can set styles for each component based on the device type, which will help optimize your website. The styles you set will be inherited by devices lower on the hierarchy. For instance, if you change the content order of a container to Horizontal for computers, this change will cascade to the tablet and phone styles. However, if you want to create a unique style for a particular device, such as a phone, you will need to modify the settings for that device individually.
Any changes made will be applied to that device and will override the cascading style hierarchy. Set the setting you updated to Auto for device types lower in the hierarchy to inherit the setting.
Note
Component settings with the Computer, Tablet, or Phone icons follow the cascading style hierarchy. Settings without an icon will be applied across all device types.
To change styling per device:
-
Select the Marketing tab, then select View Site to go to the MySite editor.
-
In the top toolbar, select the Computer, Tablet, or Phone tab.
-
Select a component to be changed.
-
Modify the style of the component.
-
Preview and publish the changes to your live website:
-
To Preview: In the top-right corner, open the Publish menu, then select Preview.
-
To Publish: In the same Publish menu, select Publish.
-
Component settings set to Auto will inherit their styles based on a cascading styles hierarchy, which includes global, computer, tablet, and mobile site stylings. Global site stylings are based on the theme you selected when you first created your website to generate the base color palette and rules, like padding, header stylings, and fonts. You can change your global site stylings from the Settings page. You can also set different component styles by device (computer, tablet, or mobile).
Comments
0 comments
Please sign in to leave a comment.