Time for action – setting up our graphic treatments in the stylesheet

Now we need to set up a section in our stylesheet for design treatment rules.

  1. The first step is to upload our graphics files. Create a folder called images inside the folder containing your other files. Upload your image files to it.
  2. In style.css, below the STANDARD STYLING section, but above our media queries, add in our color scheme for background colors:
    /*------------------REUSABLE GRAPHIC TREATMENTS -------------------*/
/*main background colorscheme*/
.bg-main{
  background-color: #222;
}
.bg-secondary{
  background-color: #666;
}
.bg-tertiary{
  background-color: #999;
}
.bg-light1{
  background-color: #eee;
}
.bg-light2{
  background-color: #ddd;
}
.bg-dark1{
  background-color: #000;
}
.bg-dark2{
  background-color: #444;
}
  3. Next, add some gradient schemes below. You'll need to include the browser-prefixed versions of the CSS as well—we've left it out here to save space.
    .grd-vt-main{
  background: linear-gradient(top, #333, #000);
}
.grd-vt-secondary{
  background: linear-gradient(top, #555, #222);
}
.grd-vt-tertiary{
  background: linear-gradient(top, #ddd, #999);
}
  4. Beneath this, add some rules for handling borders:
    /*borders*/
.bdr{
  border: 1px solid;
}
  /*apply thickness*/
.bdr-2px{
  border: 2px solid;
}
  /*pick a side*/
.bdr-top{
  border-left:none; 
  border-right: none; 
  border-bottom: none;
}
.bdr-left{
  border-top:none; 
  border-right: none; 
  border-bottom: none;
}
.bdr-right{
  border-left:none; 
  border-top: none; 
  border-bottom: none;
}
.bdr-bottom{
  border-left:none; 
  border-right: none; 
  border-top: none;
}
  /*leverage selectors for border colors
   -be sure to apply your rules in this order*/
.bg-main.bdr{
  border-color: #aaa;
}
.bg-secondary.bdr{
  border-color: #999;
}
.bg-tertiary.bdr{
  border-color: #eee;
}
  5. Next, set up the rounded corners. As with gradients, we've omitted the browser-prefixed code to save space, but you'll find it in the code files of this chapter.
    /*rounded corners*/
.rnd
  border-radius: 5px;
}
  /*only two corners*/
.rnd-top{
border-radius: 5px 5px 0 0;
}
.rnd-left{
border-radius: 5px 0 0 5px;
}
.rnd-right{
border-radius: 0 5px 5px 0;
}
.rnd-bottom{
border-radius: 0 0 5px 5px;
}
  6. Finally, set up some box shadows (again, browser-prefixed code has been omitted).
    ...
/*box-shadows*/
.shdw-centered{
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.shdw-offset{
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
  7. Now, save your stylesheet again.

What just happened?

We added styling for borders, gradients, rounded corners, and box shadows.

Keeping in mind our "object-oriented" CSS strategy, these rules have been added, not because we'll definitely use them, but in case we need to use them. Just as the layout-core.css sheet freed us to open up our index.html file and simply apply class rules to our HTML elements to get our layout going, we can now go in and start applying our color scheme and graphic embellishments to our layout. And of course, if we want to change our mind about colors or gradients or borders, it's easy to update in one or two places in the stylesheet and our entire site will evenly update.

Tip

Keeping WordPress in mind

In the next chapter, we'll get into "WordPress-ifying" this layout. Keep in mind that WordPress can spit out quite a few classes of its own, and it likes to take advantage of applying multiple classes to HTML objects as well. The good news is, the majority of these classes are such that objects can be identified and offered special styling. We'll come back to this as we work through creating our theme in the next two chapters.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset