Structure |
|
#wrapper |
Wrapper div for everything in body |
#page |
Wrapper div for everything in body #wrapper except for #footer |
#headerwrap |
Wrapper div for the logo, header widgets and Top Menu: use #header to target only the logo and widgets, or #headercontent to target the inline block. Note: it may sometimes be useful to target #header differently when #dropmenu do not exist - use the body.nomenu prefix. |
#dropmenu |
The Top Menu wrapper. Use #dropmenu ul to access the actual menu, #dropsearch to access the menu Search Widget, and #dropmenu #dropxtra to access drop-downs. |
#pageframe |
Wrapper div for #pagecontent, #sidebar, .contentfooter. The #pageframe div is special: it knows if #sidebar floats left, right, or is trailing the body, and will position any background image accordingly [left | center | right]. |
#pagecontent |
Contentarea wrapper if the site has #sidebar float. If #sidebar is #footerbar [trailing the body], use #pagecontentsec instead. |
#sidebar |
Sidebar content wrapper: prefix when the Sidebar floats left or right. Can be suffixed like so: #sidebar.sidebarleft and #sidebar.sidebarright. |
#footerbar |
Sidebar content wrapper: prefix when the Sidebar trails the body [always for mobile devices]. |
#footer |
The page footer outside #pageframe, outside #page, inside #wrapper |
#footerbarwrap |
Footer content wrapper: contains #footerbar. |
Inner content - divs |
|
#headerticker |
The Newsticker Widget |
.contentheader |
H1 and .date wrapper |
.contentbody |
Inline contentwrapper [wraps all content generated by a WYSIWYG editor] |
.contentbodylots |
Inline contentwrapper if multiple WYSIWYG elements are present [like in Tiles or Gallery Layouts]. |
.contentbox |
Wrapper for smaller inline objects [like Tiles, Condensed Blog entries, singular Calendar events]. Target Digital Signage boxes with .contentbox.timebox and .contentbox.event to differentiate between event elements. |
.contentfooter |
Footer widgets wrapper inside #pageframe |
Note: .contentheader, .contentbody, .contentbox and .contentfooter should have identical margin-left and margin-right values to do perfect alignments. |
|
.odd, .even |
To alternate list items in directory views |
.fctable |
In XHTML: Generated old-style table that surrounds .fctext [wysiwyg] output. This is a legacy tag from old XHTML website setups. In modern setups, this tag will usually be a DIV, not a table. In HTML5: wrapper div for inline text. |
.paragraph |
In XHTML: generated div that surrounds .fctext output [inside table.fctable tr td]. Legacy tag. In HTML5: not in use. |
.sidebaritem |
Wrapper for items in #Sidebar and #footerbar [contains H2 + .fctable ] |
Inner content - fonts |
|
H1 |
Page titles. Can be suffixed with h1.maintitle to target the sticky title in blog views. |
.date |
Header metadata in documents [in contentheader: Date and Byline below H1] |
H2 |
Sidebar titles, large contentbox titles [in major inline elements] |
H3 |
Inline subtitles - very rarely used |
#dropmenu a.toplink |
Top-level links in the Menu: equivalent of #dropmenu ul li a |
#dropmenu a.droplink |
Second-level links in the Menu: equivalent of #dropmenu ul li ul li a |
#dropmenu .current a |
Active link in the Top Menu [.current a.droplink for singling out second-level] |
H4, h4.fctext |
Inline small-item box titles [like Tile titles and sub-titles in Widgets] |
a.sidebarlink |
Sidebaritem menu link [listing container link if in #sidebar]. Target with .fctext a.sidebarlink for block access |
.fctext |
In XHTML: Generated font declaration: fonts, sizes, colors and styles of editable body. Will default to Lucida Grande 13/16 if undefined, and is disregarded in the Freestyle template. Note: For consistency, the .fctext class is also used on similar, non-generated elements [like previews in Tiles, Condensed Blog entries, form labels etc.], both in XHTML and HTML5. It is not in use in HTML5 for inline text; instead, the .wswrap class is used here. |
.wswrap * |
Open Text Web Clients will disregard CSS font formatting in generated content [family, size and color]. To overcome this, we can use .wswrap * !important to override body text produced by such a web clients. it is basically a global .fctext tag. The .fcwrap tag can be used in place of .wswrap to address the same content without resorting to the important declaration. |
.smallfctext |
Div that Inherits from .fctext, for smaller details [like inline timestamps, singular monthly calendar events, etc.] |
.fcquote |
In XHTML: Generated Quote class [class attached to any text using the generated quoted style used by some intranet client softwares]. In HTML5: not in use. Instead, we simply use <blockquote>. Note: very useful for creating exceptions to the .fctext class. For example, a .fcquote .fctext can be used to create buttons out of WYSIWYG generated links. |
.todaydate |
In calendars overviews: class to single out Today |
#signature |
Footer signature text [#footer #signature]. Useful to separate from #footer. |
Forms elements |
|
.label [.fctext.label] |
Input Labels |
.txtfield [input.txtfield] |
Input + textarea. |
.formbtn |
button, submit class |
.searchsubmit |
Search Widget submit button [formatted as graphic element] |
Forms iframe elements |
|
.commentbody |
<body> class for iframe in Commenting Widget |
.messagebody |
<body> class for iframe in template forms [pages that are forms] |
.minibox |
#sidebar iframe class [iframe.minibox] |
.fullbox |
#pagecontent iframe class |
Tweaks |
|
body |
Body can be addressed with a class to differentiate between UIs: body.website and body.digitalsign. There's also body.mobilesite, which is obsolete and supports old-style Mobile UIs [modern websites are responsive and will not need it] |
All website elements can be targeted by Layout by adding classes to #wrapper: the class name will be the Layout name: |
|
#wrapper.blogdir |
Blog |
#wrapper.newsdir |
Condensed Blog [Newspaper Layout] + Daily Calendar View |
#wrapper.tilesdir |
Tiles |
#wrapper.listingdir |
Listing Container Layout |
#wrapper.gallerydir |
Gallery Layout |
#wrapper.tabsdir |
Tabs [Resources Layout] |
#wrapper.webshopdir |
The Webstore layout |
#wrapper.webpage |
All document template types |
#wrapper.calendarmonth |
Monthly Calendar View |
All website elements can be targeted differently depending on if the site has a Top Menu or not by adding a class to body: |
|
body |
No distinction |
body.nomenu |
Any element if the Top Menu does not exist [can be useful to reposition #header] |
The #pageframe div is special: it knows if #sidebar floats left, right or do not exist, and will position any background image accordingly [left | center | right]. |
|
#pageframe |
{background-image:(whatever)} ... With no positioning declaration allows you to attach an Y-tiling backdrop that is wider than the page: the visible portion will always follow the #sidebar div around... |
#contentpadding |
inline wrapper, immediately inside #pageframe. |
#sidebar.sidebarleft #sidebar.sidebarright |
To differentiate Sidebarpositions. Useful for creating custom margins and paddings. |
Map |
|