The Styling Guide

What can I learn from this guide?

(intro)

How to add custom CSS to your site

... including how to add ressource files

Styling the grid

Styling individual elements

Re-designing menu bar and pop-up menus

Change the photo grid

... including how to set the number of photos, for front page and sub-pages

Changing the position of the sidebar

Handling specific pages on the site

Moving elements around

Grid

All grid nodes will be present on all page -- though some may be empty and non-visible.

body
|-- #frame
  |-- #header
    |-- #loggedin
    |-- #globalnav
    |-- #identity
      |-- a #sitename
      |-- a #byline
    |-- #contextnav
  |-- #main
    |-- #sidebar
    |-- #title
    |-- #content
  |-- #footer

Elements

All element nodes will be present on all page -- though some may be empty and non-visible.

#loggedin -- You're logged in as...
#identity -- Site name
#globalnav -- Global navigation/Section
#contextnav -- Context navigation, based on section
#sidebar -- Sidebar
#title -- The page title; may be hidden and should usually be styled similar to #content
#content -- The action content of the page
#menu -- Options menu for the content of the page

The elements have default positions as denoted on the grid tree -- but each element can be reclipped elsewhere using the JS 'visual.clip' method.

#sidebar floating and alignment with #main

The #sidebar can be placed in the left of right using simple css floats:


#sidebar {float:left;}
#content, #title {margin-right:10px; margin-left:235px;}

Navigation structure

#globalnav & #contextnav created like this:




  (...)
  (...)
  (...)

Body id attribute

Every <body> tag in the application has an ID attribute based on the page's name -- listed in the 'visual.page' object as visual.page.name. Thus all items can be customized to any given page simply by preceeding the CSS with declaration like 'body#photo-one' or 'body#album-list'. (The body's class is set to the product_key listed in visual.site.product_key and be values such as 'blog' or 'collaboration'.)

Multiple photos view

#columns
#columns .column
(...)