In web development, HTML tags are used to structure a website while CSS (cascading stylesheets) is used to define what the structure looks like. Together, they allow you to design and build basic webpages. In Zoomforth you mostly do not have to worry about these finer details unless you're interested in theme development because we handle the hard parts of the design for you.
However, when you need to accomplish a particular design it can be important to add and remove CSS classes to different parts of your site. Zoomforth provides a functionality to add CSS classes to subpages, sections, and tiles. These classes can then be used in theme development to attach custom styles.
NOTE: We would like to note that using and applying these classes is an advanced web design technique. You may need additional help with understanding and using these classes in your themes.
You can use any number of class names and they will be added to the corresponding subpage, section, or tile. For example, let's say we want to add a hover effect to a section on our site. We can do this by:
Find the section on your site and click to edit it.
In the left editing panel, find the CSS classes text input.
Type the word
section-hover-effectand press ENTER.You should see your class name in the input field.
Save your site and click Publish.
Go to the themes dashboard and find the theme that your site is using.
Open the theme editor and click on the Custom CSS button to edit the custom CSS for the site. On a new line, add the following custom CSS:
.section-hover-effect:hover {
background-color: red;
}Save your custom CSS and click Publish.
Go to your live site and scroll down to your section. When you hover your cursor over the section the background should turn red.
CSS classes are very powerful because once they are defined in your custom CSS you can then apply them to other elements in the site to get the same behavior. For example, if you wanted to make another section turn red when you hovered it, you could add the CSS class section-hover-effect to the new section in the site editor and publish your site and you will see that section does the same as the first.
The true power of CSS classes is they allow you to containerize styles and apply them in a generic way to different elements giving them uniform styles.
Imagine a hover effect you wanted to apply to all tile images, All you would need to do is define the class in your theme's custom CSS and add the class name to every tile that you want that effect to appear on and it would work the same without any additional code.
For more information or advanced tricks please reach out to support.