Site Customizations
Although we provide quite a few options for customizing your site by way of page leafs and page settings, there may come a point where you want to customize it just a little bit more. This can come by way of applying some custom CSS.
- 1.While in your site admin, click on the Settings link on the menu on the left.
- 2.Next, click the Scripts tab.
Custom CSS can be added here within a style tag like so:
<style>
body{
background:red;
}
</style>
This CSS rule will turn the background of your site red.
With great power comes great responsibility! While it's possible to muck things up, here's an example of what's possible with some custom CSS.
A real-life, actual website on Mavenseed.
There are a ton of CSS classes that you can apply Page Leafs in order to get even more out of the design. In fact, the padding and margin settings on Page Leafs simply apply these utility classes! Here's a list of commonly used classes and what they do.
Class Name | What it does |
pl-1, pl-2, pl-3, pl-4, pl-5 | Padding left in increasing amounts |
pr-1, pr-2, pr-3, pr-5, pr-5 | Padding right in increasing amounts |
px-1, px-2, px-3, px-4, px-5 | Padding left AND right in increasing amounts |
py-1, py-2, py-3, py-4, py-5 | Padding top AND bottom in increasing amounts |
| |
ml-1, ml-2, ml-3, ml-4, ml-5 | Margin left in increasing amounts |
mr-1, mr-2, mr-3, mr-5, mr-5 | Margin right in increasing amounts |
mx-1, mx-2, mx-3, mx-4, mx-5 | Margin left AND right in increasing amounts |
my-1, my-2, my-3, my-4, my-5 | Margin top AND bottom in increasing amounts |
| |
ml-auto | Margin left auto |
mr-auto | Margin right auto |
mx-auto | Margin left AND right auto |
my-auto | Margin top AND bottom auto |
| |
text-primary | Sets text to primary color |
bg-primary | Sets background to primary color |
We have been steadily adding special CSS classes to select markup that you can use to target specific sections with styles. These classes are prepended with ms-, and will never be changed.
Class Name | What it targets |
ms--reviews | The reviews container when viewing content. |
ms--reviews-anchor | The container for the review stars linking to the reviews. |
ms--playlist | The playlist container. |
ms--playlists | The list of playlists. |
ms--playlist-item | The playlist item |
ms--question-form | The questions form when viewing a lesson. |
ms--question-list | The list of questions. |
ms--bundled-products | The bundled products container when viewing content. |
ms--site-widget-XX | Target a specific page leaf widget (XX is the id) with custom CSS. |
Last modified 2yr ago