Editing Page and Content CSS
Editing the CSS is considered in two sections:
- 1. Presentation styles for the page elements
- 2. Dropdown menu styles
Presentation Styles for Page Elements
- CSS for page design is organized in the CSS file into sections:
- 1. Defining major elements
- 2. Local menus and footer styles
- 3. Content elements such as headings and subheadings, text and link styles
- 4. Image styles for photos or images incorporated in the editable content.
Defining major elements
Major elements on the page are Header, Global Menu, Local Menu, Content, and Footer. These are containers for menus, images and content. Additionally, you may define a Section Image div element to provide for a different identifying image for each section. By defining a section image div, all pages in a section can have a single identifying image set in the editor, making it easy for the visitor to know exactly where they are in your site.
Navigator’s default design is a fixed-width design beginning at the left edge of the page. If your site has a fixed-width design centered in the page (a very common fixed-width design), start with the Fixed-Width Centered layout package. It has styles already in place for this condition, which requires particular handling of positioning and margins to make it work.
If you have trouble getting a CSS design to perform the way you intend, one of the most common errors to check is clearing floats. Arranging elements with floats is very handy, but the floats must be cleared properly to allow other elements to fall into place below the floated elements. If all else fails, you can try adding <br clear=”all” /> to the html code after the last floating element. This clears the floats and html alignments that appear before it, but may in some conditions add a large amount of white space to the page.
Local Menus and Footer Styles
The local menu is created with an unordered list, similarly to the global menu, but without dropdowns. It is usually displayed vertically.
Local menu default styles are provided. They cover most menu conditions, including styles for links when the mouse is over them, and links for pages that have been clicked, or “selected.”
In all the unordered lists, the styles are separated into their detailed elements: Ul, li, li_selected, li_over (styled to allow for IE to display it) a:link, a:visited, a:active, and a:hover. Navigator creates the list code automatically based on what is entered in the Editor interface; you have full control over how it is styled.
Depending on your design, you may want to place the footer div element within the content area, or beneath all other elements on the page. The footer is typically used for the copyright notice, links to Privacy Policy, Terms of Use, Contact, and webmaster links.
To include a text menu in the footer that contains the global menu links, but without the graphics and dropdowns, add styles to sn_styles.css for the footer links. Use sn_dropdown-appearance.css as a reference, and use the section link selectors. Define them as specifically as possible, including the #footer selector in each expression so they don’t inherit global menu styles. Finally, use the following php snippet to call the menu in the footer div:
<?php sections(); ?>
Content Elements
Content elements include the html headings and subheadings (Navigator uses h1, h2, and h3), default text and paragraph styles, a second set of text styles for “text2” which allows highlighting of text on a page with backgrounds, borders and text styles, photos and links.
Links in page content require visited link styles so visitors know what content links they have clicked. If you don’t style them, they will either inherit a style or display as purple, the default html visited link color.
Headers and text styles are very straightforward. Set font-families, colors, sizes, margins, background images, padding etc.
Link styles cover html links in various content containers created by Navigator. Different types of page blocks (see Navigator help on the Autograff website for definitions of page blocks) are classed differently, so you can style links differently for document links, html links, links to pages within the site, and email links.
Photo and Image styles
Image styles include styles for left-floated, right-floated, or centered images. The images are in containers which also contain the image caption if needed, so that the caption goes with the image, however it is aligned.
Defining right and left margins for right and left aligned images will keep the text away from the photo. Some designs give the image container a border and padding. The caption should be styled to look different from standard text, often smaller.
