Video tutorial: How to create beautiful ‘Apple like’ graduated backgrounds on your Woothemes website

[twitter style=”horizontal” float=”left”] [fblike style=”standard” float=”left” showfaces=”false” width=”450″ verb=”like” font=”arial”] [pinterest count=”horizontal” float=”left”][google_plusone size=”standard” float=”left” annotation=”none” language=”English (UK)”][divider_flat]The Wooframework from Woothemes comes with some ‘out of the box’ tools such as the info box to help you design a great looking website. However there are times when you will want to tweak the standard design of the info box to make it more elegant.  In the video below I show you how to create a beautiful graduated background that you can easily reuse on your website.

And here is the CSS code…

The CSS for the background graduation has been created at www.colorzilla.com. This CSS needs to be pasted in your custom.css file. Once you have updated your custom.css, then all you have to do is create a new info box and you will see the results.

.woo-sc-box.normal {
padding: 9px 15px;
border-width: 1px 1px;
border-style: solid;
border-color: silver silver -moz-use-text-color;
border-style: solid solid solid;

background: -moz-linear-gradient(top,  rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.03)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.03) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#08000000′, endColorstr=’#00000000′,GradientType=0 ); /* IE6-9 */

}

 


Comments

5 responses to “Video tutorial: How to create beautiful ‘Apple like’ graduated backgrounds on your Woothemes website”

  1. Really very useful Video for me Thank you so much post this Useful and Very Helpful Video

  2. This is a great site I can not believe that I didn’t find it earlier

  3. Hi Jamie!

    Great cute tweak!! 😀

    Nevertheelss, I have a problem. I’m working with a child theme, and my stylesheet.css loads before shortcodes.css, so my changes are overriden. Any quick solution?

    Thanks again for sharing your knowledge!!

  4. Never mind! I fixed it… you just have to deactivate the output of “shortcodes.css” option in the framework settings, and add this line to the style.css of the child theme:

    @import “../canvas/functions/css/shortcodes.css”;

    Now the css of the shortcodes is loaded before our Apple like box tweak 😉

  5. Interesting tip and a great video explanation Jamie. Was searching on Google and good to see your site comes up on first page for WorddPress training courses all around UK.