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.

Reset Styles

Every theme stylesheet should include a Reset at the beginning. This clears all browser default styles and prepares a blank slate to style.

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, iframe, img {
    margin: 0;
    padding: 0;
    border:0;
}

a img {
    border: 0;
}

a {
    text-decoration: none;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
}

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}

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:

background: transparent url(/images/pattern.jpg) repeat-x center top;

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:

.blog-sidebar {
    width: 250px;
}
.blog-title .blog-title-link {
    margin-bottom: .5em;
    display: block;
}

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.

/* Header page */
.header-page .banner-wrap .banner h2 {
    font-size: 3em;
    line-height: 1.5em;
}

/* No header page */
.no-header-page .header-wrap {
    height: 50px;
}

.no-header-page .main-wrap > .container {
    padding-top: 3em;
}

/* Splash page */
.splash-page .main-wrap > .container {
    padding: 70px 1.5em;
    width: 100%;
}

.splash-page .content-wrap h2 {
    font-size: 3em;
    line-height: 1.5em;
}

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.


Help make these docs better!









Tags: