Knowledge Base

Answers to Common liveSite Questions

Back to Knowledge Base

 
Site Design

Adding a gradient background to your site theme.

Here is a nifty way to quickly add a two color gradient background + a transparent background pattern to your site's theme.  Edit your site's theme in the Theme Designer, and go to the "Site Wide" fold and into the "General" fold and to the "Advanced Styling" field and add this CSS code:

/* add a gradient backgound to your site theme */
body {
    background: url('/files/texture10.png') repeat left top,
        linear-gradient(bottom, #1CD96B 20%, #74F7F7 80%);
    background: url('/files/texture10.png') repeat left top,
        -o-linear-gradient(bottom, #1CD96B 20%, #74F7F7 80%);
    background: url('/files/texture10.png') repeat left top,
        -moz-linear-gradient(bottom, #1CD96B 20%, #74F7F7 80%);
    background: url('/files/texture10.png') repeat left top,   
        -webkit-linear-gradient(bottom, #1CD96B 20%, #74F7F7 80%);
    background: url('/files/texture10.png') repeat left top,
        -ms-linear-gradient(bottom, #1CD96B 20%, #74F7F7 80%);
    background: url('/files/texture10.png') repeat left top,
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.20, #1CD96B),
        color-stop(0.80, #74F7F7));
}

Of course, you can change the two colors and the background pattern image to suit your needs.  For example, if you don't want the background image pattern, you can remove the code line(s):

url('/files/texture10.png') repeat left top,

You can also apply this same technique to add a gradient background to your theme's main menu:

/* add a gradient background to the main menu region (and textured pattern if you want) */
.menu_main-menu {
    background:
        /* url('/files/texture10.png') repeat left top, */
        linear-gradient(bottom, #CCCCCC 30%, #DFDFDF 70%);
    background:
        /* url('/files/texture10.png') repeat left top, */
        -o-linear-gradient(bottom, #CCCCCC 30%, #DFDFDF 70%);
    background:
        /* url('/files/texture10.png') repeat left top, */
        -moz-linear-gradient(bottom, #CCCCCC 30%, #DFDFDF 70%);
    background:
        /* url('/files/texture10.png') repeat left top, */  
        -webkit-linear-gradient(bottom, #CCCCCC 30%, #DFDFDF 70%);
    background:
        /* url('/files/texture10.png') repeat left top, */
        -ms-linear-gradient(bottom, #CCCCCC 30%, #DFDFDF 70%);
    background:
        /* url('/files/texture10.png') repeat left top, */
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.30, #CCCCCC),
        color-stop(0.70, #DFDFDF));
}

 


 
Add Feedback:
Was this page helpful? Please let us know how we can improve it.
Please login or register to add your feedback.