Using CSS Contextual Selectors in the Content_Area

Much of the Content_Area in the Volusion template lacks the proper HTML tag classes or IDs. Most of you who have tinkered around with the design and those of you have done a great deal of design know exactly what I mean. This makes customizing the Volusion templates a bit of a challenge. You end up having to work around a lot of code by using some heavy-lifting contextual selectors in your .css files.

Note: Using Firebug during this tutorial may make customizing the Volusion Design much easier to understand.

For simplicity, this post will focus on just one line of the Content_Area: A <td> located in a <table width="100%" cellspacing="1" cellpadding="5" border="0">.

Let’s say you don’t want that <table><td> to have such grandiose cellpadding or cellspacing. You need to collapse the <table>, but you don’t want to force all the tables in the Content_Area down, just this one. What are the steps I need to take in this crazy customized Volusion design?

1. Turn on Firebug and use the HTML inspect feature.
2. Use Firebug to locate the exact position of that <td> you want to smash.
3. Once located, Firebug will give you the exact structure (highlighted above) you need to copy in the top of the inspector window. How cool is that?!
4. Look for the Content_Area ID and begin writing your CSS selector with that. You want to be as specific as possible! Since this bit of CSS deals with the Content, I make the edit in Content_Area.css.
5. Make a CSS comment so you and future developers will have an idea why you did this and your done.

The finished form:

/*-----WORKAROUND FOR POOR CODING PRACTICES---*/
#content_area table tbody tr td table.colors_searchrefinement tbody tr td table tbody tr td {padding:0px;}

Oh dang! That is a long string of information…but needed for ultra specific declarations. In the above example, I used (padding:0px) as the declaration. This should collapse all the cells in that <table>.

Why not just target the <table> itself? Well, the <table> defines the spacing for the cells, not for itself, hence the value “cellpadding”.

Volusion Design Tip: If your site is live and you don’t want to risk f’ing everything up, simply write your contextual selectors to your .css file without the declarations. Upload or publish the file. Then use firebug to test it out before you create the live declarations.