Free Consultation: +1 (888) 374 0906

CSS is truly a powerful tool to master if you are going to do any advanced web development. When you understand selectors and their relationship to one another you can almost triple the productivity of your code while writing less of it.
Recently we gave SiteCM Resellers another tool in their arsenal of designer controls that has to do with the CSS descendant selector. The page class control adds a dynamic selector to your opening div giving you the power of using descendants for virtually every div in your code.

Let me explain with an example, say we have an opening div class
<div class="ui_page"> every div inside ui_page is then considered a descendant of that opening div. When we add the page class control like so:

<div class="ui_page <sitecm:PageClasses id="PageClasses1" runat="server" NavID="HorizontalFlyout" ClassNames="blue,green,noleft" DefaultClassName="Default" HomeText="is_home" />">

What that essentially does is write out your homepage div like so:
<div class="ui_page Default is_home"> on the homepage
<div class="ui_page Default blue"> on the second page in the navigation
<div class="ui_page Default green"> on the third page in the navigation

and so on and so forth. You can also decide with the attributes whether or not you'd like this to repeat throughout the nav and if you'd like to add the template name as a class (as in the example above).

Now all of the descendant divs can be called in the following ways:
.ui_header {width: 400px; background-image: url(/images/insidebanner.jpg);}

.is_home .ui_header {width: 880px; background-image: url(/images/homebanner.jpg);}

.blue .ui_header{background-image: url(/images/bluebanner.jpg;}

What this does is reduces the number of files you have to update in the event that something hardcoded in the site needs to change. Say a footer image gets larger, or you remove a newsletter sign up. Instead of opening 4 header files and removing it from all of them, double checking that you've made everything match again and then saving four files, putting four files back on the server we need to edit and upload one.

The most common example of this would be your home page. How many times have you wanted to hide a left sidebar on the homepage and have a wider content area? With the SiteCM page class control now you can.
.is_home .ui_left {display: none;}
.is_home .ui_main_content_wrapper{width: 880px;}

By adding those two lines beneath your original declarations for each item in structure.css you have just eliminated the need for an entirely new template. Can we all say it together?

"Cool. "

Your code is tidier because you can use the same class over and over. If your left div class is always floated left and a width of 170px you don't ever have to redefine things you've already done. But say it has a blue border in the blue template and green for the green one and by default it's orange. You don't have to rewrite your code for each template. If something in another template changes all you need to do is redefine it in it's descendant definitions.
.ui_left{float: left; width: 170px; border-top: 5px solid #DB881B;}
.green .ui_left{border-top: 5px solid #83D14D;}
.blue .ui_left{border-top: 5px solid #203EF6;}

Here is a breakdown of the tag and it's attributes
id="PageClasses1" - every tag that is the same needs a unique ID
runat="server" - every designer control needs to have this tag
NavID=" * " - the ID of the navigation you would like your tag to associate to
ClassNames="" - a comma separated list of the classes you are going to need (think templates)
DefaultClassName="Default" - the class added by default
Repeat="True|False" - whether or not you would like the list specified above to repeat through the top levels of navigation
AddTemplateName="True|False" - you can still use templates so that your client can manage which one they'd like to use but now we don't need multiple files
HomeText="is_home" - the class added to the homepage


Look for more on this in the near future.....
Write A Comment

Post A Comment


Follow Us:


eCommerce that works the way you want it to.

Learn more!



SiteCM Solo + Membership

View Case Study