You can modify existed XL templates or create new. All XL .css stylesheet names if modified/created must start with [xl_]. A table below displays some of the classes and layers identification specific to XL stylesheet templates.

Class name starts with the [.] and layer id with [#]. For more information about designing see an Advanced Design chapter.

Note: The term [enclosure] referenced in the list, means a table or nested tables surrounding the content on pages. The enclosure creates a specific to the style design by the mean of assigning properties to the layers classes.

Identifications (global)	Description
#xl_logo_decor (dynamic)*	Identifies the top logo enclosure table (used in one instance only)
#xl_content (dynamic)*	Identifies all content enclosure tables, which do not have a title in a header
#xl_list (dynamic)*	Identifies all list enclosure tables (for lists in viewlist.asp, viewuserlist.asp, admin_logs.asp.. etc)
#xl, #xl1-22 (dynamic)*	Identifies all enclosure tables for boxes with a single textual header (side bars boxes, portal boxes... etc). #xl1 through #xl22 identify portal and side bar boxes and used for individual box configuration if needed. For specific box ID see left_portal, right_portal, left_side_bar and right_side_bar templates at Content Management page. #xl identifies all other boxes on different pages.
#left-sidebar, #right-sidebar (class also exist: .left-sidebar, .right-sidebar)	Identifies a cell which hosts ALL right or left side bars boxes
#left-portal, #right-portal class also exist: .left-bar, .right-bar )	Identifies a cell which hosts ALL right or left portal boxes
#ntable	Identifies Navigation Table *
#top-menu	Identifies a <div> layer enclosing the entire top menu in menu_top_xl template (See Content Management page)
#xl-user-menu	Identifies a cell which hosts the user portion of the top menu in menu_top_xl template (See Content Management page)
#xl-site-menu	Identifies a cell which hosts the main portion of the top menu in menu_top_xl template (See Content Management page)
#top_search	Identifies top search block
Identifications (default portal content)
#portal-hot-list	Identifies table built the Top Hot List inside portal box
#portal-most-visited	Identifies table built the Most Visited Ads inside portal box
#portal-top-poster	Identifies table built the Top Posters inside portal box
#portal-top-new	Identifies table built the Top New Ads inside portal box
#portal-pick	Identifies table built the Editors Pick inside portal box
#portal-tree	Identifies table built the Tree View inside portal box
#portal-cats	Identifies table built the Categories List inside portal box
Classes (boxes with header)
.xl-box-div	<div> layer enclosing portal, side bar as well as any other boxes which have a single header title (See footer_content_xl.asp page)
.xl-box-table	Table inside the above layer
.xl-box-head, .xl-box-head1	Header content for the above layer. 3 different classes allow flexibility while creating bg images decoration.
.xl-box-content, .xl-box-content1	Content cell for the above boxes
.xl-bbl, .xl-bbc, .xl-bbr, xl-bbc1	3 cells in a last row for the boxes above (left/center/right). Mainly used for creating bottom decoration for boxes (rounded corners in xl_express template)
.xl-disable-box-decor	Last row for the above boxes. May be used to suppress 3 decorating bottom cells for specific area - #left-sidebar .xl-disable-box-decor {display: none;}
Classes (Navigation)
.xl-navigation	Navigation Table **
.xl-navigation1, xl-navigation2 .xl-navigation22	Cell and <div> housing the top menu template (See footer_content_xl.asp page)
.top-menu	<div> layer enclosing the entire top menu in menu_top_xl template (See Content Management page)
.xl-menu-links	Links in menu_top_xl template (See Content Management page)
.xl-navigation3, .xl-navigation4	Cell and <div> housing the bottom menu template (See footer_content_xl.asp page)
.tsb1, .tsb2	2 additional <div> layers inside the top search block
Classes (List/Content boxes)
.xl-list-space-top, .xl-list-space-bottom	Top / Bottom <br> spacer.
.xl-list-table	Enclosure table
.xl-disable-decor, .xl-disable-decor	First and Last row for the box. May be used to suppress decorating for a specific type of box - #xl_list .xl-disable-decor {display: none;}
.xl-list-head, xl-list-head1, xl-list-head2	Cell and <div> housing the decoration of box top. Mainly used for creating top decoration for content/list boxes (rounded corners in xl_express template)
.xl-list-content, .xl-list-content1	Content cell
.xl-lbl, xl-lbr, xl-lbc	Cell and <div> housing the decoration of box bottom

There are 32 existed xl templates, which designed mostly to display various techniques in classes/identifications properties assignment. By modifying existed templates you can effectively change the appearance of your RC installation. You can create images and assign then to appropriate classes in .css. The possibilities of all combinations for creating or modifying XL templates are practically infinite. With XL you may create custom boxes enclosure by the mean of passing any custom identification to the existed boxes and then use that identification for classes properties in .css. The enclosure boxes HTML structure for the entire site can also be modified by just modifying one page which hosts ALL site enclosures - footer_content_xl.asp. See Advanced Design chapter for the reference to the structure and concept of the Rapid Classified design.

Note: It would require advanced CSS skills to customize existed or create a new Style Sheets.

 

OGIM templates identified by the word [ogim] within .css file name. There are 9 OGIM generated templates included. The main advantage of OGIM templates is that all background images for templates were generated with OGIM (Online Gradient Image Maker) service.

See: http://www.ogim.4u2ges.com/rapid-classified-design.asp

The "Reference" for each background image used in OGIM templates is provided so that you may edit each image online.

"Reference" is nothing else but the URL link to OGIM engine. By navigating to such URL you start OGIM engine with respective settings and controls which were used to build the original source image. From there on you may modify the image or create your own by specifying desired color combination for gradient transition, gradient shapes, stripes.. etc. Finally you download the image and override the original or use it to create a new template.

Note: To radically change the template or build a new one you would still need to have at list a base understanding on CSS styling.