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
- 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%; }
More From This Section
Our CMS is the perfect content management solution for web designers and graphic designers. Read this quick introduction to get you on the right track.
Give other people access to your website, in a full or limited way. This can include staff users, so their activity is tracked, independent SEO people, or staff POS users.
We make extensive use of the ColorBox popup, that popup with the thick rounded black edges.
Click the link for more info
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 blog pages provide individual RSS feeds for the page as well as a combined RSS feed.
Here is the process to follow to import a website designed externally.
The :active option in CSS is actually for an active link on the calling page.. but links only stay active for a split second, when a nwe page is loaded. Heres a quick way to change the class of current page.
Do you want to run advertising on your website? How do you go about it...
What to do if your filesite pages are being overwritten on when the site is published
A quick guide to where to add your js scripts to the custom template
Transfering a Website to a new owner
Please follow this procedure if you need to import a website with lots of pages.
We have Google ReCaptcha V3 and CleanTalk to help prevent spam on forms and forums.
HTML coding is required to enable youtube videos to work via a popup Colorbox video
Learn how we deal with mobile devices, and what else you can do with them.
How do you set the timezone for your country - this can be set in the contact area of your website
Learn more about using the [BANNERHOMES] feature for a rotating homes banner on your home page.
How best to update the website design of a live site
Each page has a unique ID.
Smart Blocks allow you to set and edit content once and have it update in multiple places on your site.
You can choose not to use the CMS for managing your website and upload your own HTML/CSS/JS files.
FAQ Topics
Building your site
Advanced Page Types
E-Commerce
- Shopping Basics
- Category Management
- Products
- Product Options
- Layout and Formatting
- Payment Options
- Processing Orders
- Advanced Ecommerce
- Product Pricing, Currencies
- Plugins
- Wholesale
- Rental, Booking and Appointment Systems
- Freight - Couriers
- Stock & Quantities
- Vouchers, Discounts, Loyalty Points
- Selling Photos / Prints
- Shopping Cart Add-on Page types
- Advanced APIs / Add ons
- Point of Sale (POS)
- Reports
- Orders / Invoices
Email & Membership
- Member Management
- Members Pages / Template Customisations
- From Addresses and Reply To Email Notifications
- Global Enquiry form options
- Standard Field Names
- Webmail
- Bulk Email
- CRM Features
- Email Campaigns
- Forums & Blogs
- Pop3/Imap Email Services
- Scams and Hoaxes
- Lead Magnets / Growing Your Customer Database
- Form Spam Filtering
