Learn how to customise the look of your website through layouts and CSS stylesheets, so you can create the style you want for any elements on any page.
By default, PetchCMS can automatically add a few small icons to all the links on a page. This is useful as it helps inform your users if they are about to leave your site, which site they will visit and even what filetype they will receive.
If you want to edit CSS styles for layouts, you can use the following CSS classes which are the same for all layouts:
cblock- the table containing all content titles, images etc
header - the header table cell, containing title and sub header
title - the title text, a link in the header
subHeader - the date, rating or price, in the header
img - the table cell containing the main image
details - contains the main content description
You can add the CSS classes listed above to any default stylesheet, or to the .css file matching the layout's name, found in the 'Layout' section of the File Manager.
Content that Fits in or Stands Out
This means you can use default styles for your content blocks defined in your sites style, or you can add persistent stylings in the layout .css file, which style layouts regardless of the default stylesheet.
Create unique stylings within content blocks by making use of the unique CSS ID selectors in each layout module.
Every module has the same CSS ID format; here's the examples, where 288 is this content block's ID value: #c288, #c288header, #c288subHeader, #c288details, #c288img, #c28img
A further example:
To access this description in a stylesheet, you would use the following CSS code - #c288details{ CSS stuff here }
There's a variety of layout modules available in the Page Manager, so you can choose different layouts each of your pages. Each layout uniquely presents different pieces of information about your content blocks.
Flexible, Easy Layout Changes
All layouts are flexible and require no setup or customisation, allowing you to concentrate on creating content, not editing layouts, and each have their own unique features. The layouts currently available are:
Blog - titlebar shows title, payment options, rating and date above the main content description, image on the left, with tags below, just above the plugins, at the bottom.
Boxes - 2 columns of enclosed boxes containing the title only in the titlebar, above the image on the left, with the description on the right, with plugins and revews at the bottom.
Commerce - shows title & payment options above main content description, image and rating on the left and the form below the description, above the plugins at the bottom.
FAQ - shows a list of content titles at the top, as links to the descriptions below. Doesn't support plugins or forms.
Gallery - shows a thumbnail of the main content image, with a tooltip
popup containing the description. Forms and plugins are listed below
the thumbnails.
Tabs - shows titles listed along the top as tabs, and shows only the content block that's active. Shows a thumbnail of the main content image, with the description on the right, form and plugins are listed below.
Each PetchCMS page can use its own CSS stylesheet - simply select a different stylesheet from the sites default one when creating or editing a page in the Page Manager. This drastically changes how your pages look.
Each page also has a unique ID, like "p14" or "p33", so you can create styles unique to a specific page. For example, to make all text uppercase on a page with an id of 14, in your stylesheet you can write:
#p14 { text-transform: uppercase; }
Also, each page header even has its own unique id, such as "ph237", with the number being the page id, so you can create unique headers or banners for each page. Example:
Also, each content block even has its own unique id, such as "c2" or "c184", which can be used not only to link straight to content blocks, but to customise the style of a specific block. Example:
Even more than that, each layout module, selected in the Page Manager, has a few unique ids such as "c237head" or "c237details", which can be used to style individual items within a content block. Example: