/***************************************************************************** "colors.css" has statements that overrides same named statements in main CSS file -> "style.css". To apply particular color and pattern just add name to body tag in index.html page. See example: You can also change colors and add pattern class in "style.css" directly. In that case you don't need "colors.css" file at all. *****************************************************************************/ /*========= C O L O R S E T T I N G S =========*/ body#lavender div#boxed {background-color: #705080;} /* Main background color */ body#red div#boxed {background-color: #ab4242;} body#rose div#boxed {background-color: #a93969;} body#blue div#boxed {background-color: #307090;} body#cyan div#boxed {background-color: #309090;} body#green div#boxed {background-color: #708050;} body#yellow div#boxed {background-color: #d88d33;} body#orange div#boxed {background-color: #cc6333;} body#grey div#boxed {background-color: #707070;} /*========== B O X E D L A Y O U T B A C K G R O U N D ==========*/ .pattern1 { background-image:url("../images/patterns/pattern1.jpg"); } .pattern2 { background-image:url("../images/patterns/pattern2.jpg"); } .pattern3 { background-image:url("../images/patterns/pattern3.jpg"); } .pattern4 { background-image:url("../images/patterns/pattern4.jpg"); } .pattern5 { background-image:url("../images/patterns/pattern5.jpg"); } .pattern6 { background-image:url("../images/patterns/pattern6.jpg"); } .pattern7 { background-image:url("../images/patterns/pattern7.jpg"); } .pattern8 { background-image:url("../images/patterns/pattern8.jpg"); } .pattern9 { background-image:url("../images/patterns/pattern9.jpg"); } /*------------------------------------------------------------------------------ Add .wide class together with pattern class if image is used as page background. Like this: ------------------------------------------------------------------------------*/ .wide { background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }