Advanced CSS Tip Sheet For Responsive Design

Advanced web designers might like to learn about our CSS approaches going forward, so you can do more interesting things with the basic templates.

All websites built using our CMS include the following include files, and all of them may be upgraded from time to time. 

  • A fairly recent version of jQuery, which may be updated from time to time
  • A cms common javascript and CSS include file which provides our standard CMS features such as
    • slideshows, banner slideshows
    • popup colour box, and popup colour box slideshow rel=colorbox, class=colorbox
    • shopping cart functionality
    • default styling for standard lists
  • Your own meta include files can be inserted above and below ours
  • Your own custom javascript can be put in _scripts.js
  • Your own custom CSS can be put in style.css (this stylesheet defaults to whatever design theme you start with)

CSS and Javascript conflicts

CSS and JS conflicts will happen from time to time due to

  • your custom CSS conflicting with our standard names
  • 3rd party meta include files conflicting with yours or ours
  • we may upgrade our CSS from time to time, and some new settings may affect your design. We suggest you are very explicit with your margins, padding, borders and overflow settings when styling your objects.

The General Responsive Structure Of CMS Content

All content is now delivered (or currently under upgrade to be so) as such:
  • a class on the BODY tag for the current "wgtid___" and page ID, so you can target individual pages or content types
  • a number of wrapper DIVs with classnames usually prefixed with "cms____", and these divs often give an indication of the content type
  • we attempt to put as many classes in as we can to help you target content, with most content now wrapped by DIV's, and no inline styles so that you can override our default settings
The typical list delivery is used for the following index pages of
  • Products
  • Galleries
  • Blogs
  • FAQ
  • Categories
  • Real Estate Listings
  • Events
  • etc
A list is structured as an outer UL LI structure, with 1 of 6 base styles
  • list-style-default // biz card layout in single column, usually with image to the left.
  • list-style-bizcard //similar to list style default, but in 2 columns, and bizcard layout
  • list-style-3col // 3 column auto adjusted heights
  • list-style-4col //4 column auto ajusted heights
  • list-style-inline //assumes float left with no fixed width
Each item in the list in a LI.cmsItemLI .cmsItem has the following elements, but subtly some widgets include or don't include certain items or use alternative default alignments. you may need to change the page layout type to get the data you need. 
  • cmsImage // containing a thumbnail of 160x160, but usually visual size is max-width
  • cmsImage img.largeThumb // indicates the thumbnail is actually 320x320 
  • cmsTitle // normally containing an achor tag and bold text for the title of the news/gallery/blog/item/product
  • cmsText // summary text relating to the item
  • cmsPrice // for price
  • cmsEnquiry /// for buy button or more info
All old forms and tables and tables have been replaced with a new DIV based layout. You can override the floating prompt/data elements if you want labels above fields. 
  • cmsFormElements, cmsFormElement, cmsFormPrompt, cmsFormData

Sample CSS Upgrades

You might like to put borders around all your galleries, products, and every other styled listitem with just 1 custom CSS use like so
.cmsItem { border: 1px solid #999 } 
or just a line between the default lists like so
.list-style-default .cmsItem { border-bottom: 1px dashed #999; }
Or force all your thumbnails to be upsized to 100% like so (where as currently we reduce to 100% or use orginal image if smaller)
.cmsItem .cmsImage img { width: 100%; } 

Index Previous Next