Implement the CSS or LESS
Your stylesheets provide the look and feel of the theme, and as such, is what gives your theme its soul. Weebly themes support both CSS and LESS, which is a pre-processor for CSS that provides additional functionality, such as variables, mixins, and nesting. You can use either CSS or LESS, but not a mix.
For CSS, there is one main stylesheet, main_style.css. If your theme uses color variations, then those different variations are declared in JSON at the beginning of the stylesheet. For LESS, there is one main stylesheet, main.less, and if using color variations, there will be a stylesheet for each color.
For CSS, there is one main stylesheet, main_style.css. If your theme uses color variations, then those different variations are declared in JSON at the beginning of the stylesheet. For LESS, there is one main stylesheet, main.less, and if using color variations, there will be a stylesheet for each color.
Tip: Start with the stylesheet from an existing theme so that you're sure to have all necessary classes and IDs styled.
In this topic:
Reset
Every theme stylesheet should include a Reset at the beginning. This clears all browser default styles and prepares a blank slate to style.
Every theme stylesheet should include a Reset at the beginning. This clears all browser default styles and prepares a blank slate to style.
Resets
Reference an Image
To reference an image in your stylesheet, use the image name and extension (.jpg, .png, etc.) as the URL path. Make sure to reference your images using the physical directory path, and not the logical path shown in the editor.
Here's an example CSS property that references the image file pattern.jpg in the root directory:
Here's an example CSS property that references the image file pattern.jpg in the root directory:
Code Editor
Page and Element Styles
When you create your styles, be sure to pay attention to the design guidelines, including the different pages and elements. There are particular components and functionality on pages that your theme's styling must support. For example, the blog index page needs to support a sidebar and blog title and a blog title link. The Base theme styles those like this:
Page & Element Styles
Additionally, certain Weebly elements allow configuration, and your theme must be able to support those. Feel free to review other themes' stylesheets for ideas!
Layout Styles
The different layouts for the header types are the only CSS difference between the theme template types: Header, No Header, and Splash. You need to create styles for each header type that has a template.
The different layouts for the header types are the only CSS difference between the theme template types: Header, No Header, and Splash. You need to create styles for each header type that has a template.
Layout Styles
Color Variables in LESS
If you're using LESS, and you're creating color palettes or variations, then you'll use color variables to represent the colors that can be changed. In the main.less file, instead of defining a color for something like a header, you can use a variable whose value gets replaced based on the color choice made by the user.
For color palettes, the @site-primary-color and @site-accent-color variables represent the primary and accent color. The correct color displays based on which palette is in use. More info about creating color palettes here.
For color variations, you define variables in the main LESS file (for example you might define background: @bg; ), and then you provide the color values in each of the variations' LESS files. For example, a red variation file might have @bg: #f44242 and a blue variation file might have @bg: #4277f4. More info about creating color variations here.
You can find more info about using color variables in LESS here.
For color palettes, the @site-primary-color and @site-accent-color variables represent the primary and accent color. The correct color displays based on which palette is in use. More info about creating color palettes here.
For color variations, you define variables in the main LESS file (for example you might define background: @bg; ), and then you provide the color values in each of the variations' LESS files. For example, a red variation file might have @bg: #f44242 and a blue variation file might have @bg: #4277f4. More info about creating color variations here.
You can find more info about using color variables in LESS here.