Administrator Help - RC v3.3
Search for:  by:     Edit Help
 Chapter - 3.2 Advanced Design
Following chapter intended for audience with at least moderate HTML and ASP skills.

Core Tables Structure

Below is an image of RC core table structure along with template names (from Content Management), which used to render the content inside the core. This would be a main reference for next chapters.

Note: The core built entirely in header.asp and footer.asp (along with header/footer inclusive pages – templates in Content Management and footer_content_xl.asp page). To view the entire core structure at the site, enable a "Full Portal" mode from [Side Bars Content & Geometry] admin page and then navigate to "Terms of Use" page (by default this page has almost no content allowing a clear view of the core structure).





Design Pages

Let’s start with footer_content_xl.asp

The page by itself does not render any content or enclosure but rather contains series of ASP Subs, which called from other pages to create tables and content enclosure. The enclosure in this case means a table (or nested tables) used to create a design decoration surrounding the actual content.
There are 3 sections in footer_content_xl.asp page. Each section is responsible for certain design enclosure.

1. Custom portal/side bars boxes section

This section contains 2 subs:

Sub Build_Box_Top(box_width, box_height, box_head, box_id)
Sub Build_Box_Bottom(box_head)

The Sub Build_Box_Top builds top table part and Sub Build_Box_Bottom builds bottom part. The content goes in between.

Those 2 subs are responsible for building:

  • Side Bar content boxes (right_side_bar/left_side_bar page templates - see Content Management).
  • Custom portal boxes (left_portal/right_portal page templates)
  • Any other content boxes, which must have a header row where the box title is presented except for the default portal boxes (3 on each side - see the next section)

To see how subs work in action, go to Content Management page, create a new "True" content template. Name it test and enter in Body/Content section:

<% Call Build_Box_Top("300", "200", "Test Box", "xl") %>
This is a Test Box
<% Call Build_Box_Bottom("Test Box") %>

Click the link next to "Link to this True content page" at the top of the Content Management page to view newly created content page. See the box in the center of the page? That is the box you just created. To create similar page manually, make a new .asp page and enter this code:

<!--#include file="header.asp"-->
<% Call Build_Box_Top("300", "200", "Test Box", "xl") %>
This is a Test Box
<% Call Build_Box_Bottom("Test Box") %>
<!--#include file="footer.asp"-->

Now that you see how it works, the benefits are obvious. You just need 2 lines of code to generate a uniform enclosure for new pages you might be creating. By modifying 2 subs in footer_content_xl.asp you create a different enclosure look for ALL content boxes on ALL pages at RC. Sure, you could have just used .css to modify the box appearance but by modifying the subs directly, you can actually change table’s structure and/or add any other layers into the box enclosure, which would be global for the entire site.

Here is a reference for subs arguments:

box_width - The box width. Can be in pixels or % (example - "200" or "95%")
box_height -
The minimum box height. Can be in pixels (example - "300")
box_head - The box header text.
box_id -
The box toplayer identification. See Working with Dynamic Layer Identifications further in this chapter.

2. Default portal bars boxes section

There are 3 built-in portal boxes on left and right side of portal. Those boxes are located inside the 2 side cells in Portal/Main Content table (table with purple border on graphic representation above). Respective subs called from right_portal and left_portal page templates in Content Management. Default boxes are almost identical to custom boxes except for the fact, that they are called from a single Sub:

Sub Build_Box(box_width, box_height, box_head, box_content, box_id)

The content passed directly into the sub and rendered inside the sub. The default content for each of the default boxes could be selected on Main Page Configuration admin page.

As with custom box, the default box could be customized the same way. Only make sure the content is properly rendered at the appropriated location within the sub (variable box_content). Default sub can also be called from anywhere at the custom pages if the content is previously assigned into variable box_content. In all other cases where the content built by directly presenting HTML code on a page, use custom top/bottom boxes subs to enclose HTML code.

3. List Tables Enclosure section

The final part hosts 2 subs which render the enclosure for list tables or tables/content which do not have a header row with title. List tables actually have the header row with titles but those tables contain multiple columns with various headers for each column. The example of list tables is the ads list in viewlist.asp, vewuserlist.asp, etc… Therefore, the headers for list content tables (do not confuse with list tables enclosure, which actually enclose list tables) are built directly on a corresponding page and the style is rendered with H_bar class in a corresponding stylesheet.
2 subs only draw the enclosure surrounding list and other content tables. The subs are:


Sub Build_List_Top(box_align, box_width, box_id)
Sub Build_List_Bottom()


As with any other enclosure subs, the content would go in between those 2 subs.
Here is a reference for subs arguments:


box_align - The table position (center/left right)
box_width - The width of the table. Can be in pix or % (example: "600" or "95%")
box_id - Specificid for xl type of templates only (default are "xl_list", "xl_content", "xl_logo_decor" but can be any custom id). See Working with Dynamic Layer Identifications further in this chapter.


Example of use:
<%
Call Build_List_Top("center", "300", "xl_list")
%>
<div style="height: 200px;">This is some content</div>
<%
Call Build_List_Bottom()
%>

4. Working with Dynamic Layer Identifications

You noted that the last argument on both List and Box subs is the box_id. So why this argument is passed at all and how exactly it can be useful for the board design. Lets consider an example:

You have 6 default portal boxes and you wish that each box has a different header background color. What you have to do now is to open right_portal and left_portal templates in Content Management, then in each one of 6 [Call Build_Box…] calling statementsnote the last argument. In left_portal from top to bottom - xl1, xl2, xl3 and in right_portal - xl7, xl8, xl9.

Go to the .css template you are currently working with. Add the following:


#xl1 .xl-box-head (background-color: red;)
#xl2 .xl-box-head (background-color: green;)
#xl3 .xl-box-head (background-color: yellow;)

...

So now,you end up with each of your portal boxes having a different header color. The same thing could be done for side bars boxes. For the respective IDs’ argument look into left_side_bar and right_side_bar templates.

This is just a very basic example of what could be achieved by assigning dynamic Identifications to the content enclosure. It gives you an absolute control over your site appearance with the precision to a single enclosure. The rest depends on your imagination, design skills and knowledge of CSS.

Here is another example:

You satisfied with the list tables’ appearance; however, you would like not to have odd/even cells "Zebra" for top new ads in newads.asp and would like the background color to be flat pink. The current calling ID argument for the enclosure in newads.asp is the default "xl-list":

Call Build_List_Top("center", "99%", "xl_list")

You change it to:

Call Build_List_Top("center", "99%", "xl_list_nozebra")

Next you open the current .css stylesheet.Noted that #xl_list id has the following assigned:

#xl_list .xl-list-space-top, #xl_list .xl-list-space-bottom {line-height: 5px;}

You do not wish to loose that for the table in newads.asp (because of the ID reassignment). Therefore, you first add this line to preserve the existed layout to newly assigned ID:

#xl_list_nozebra .xl-list-space-top, #xl_list_nozebra .xl-list-space-bottom {line-height: 5px;}

Finally, you do the background change by adding the line:

#xl_list_nozebra .oddcell, #xl_list_nozebra .evencell {background-color: pink;}

What you have just done, is without affecting any other list tables on your classified (which must have a "zebra" background), modified a specific table appearance without ever touching any HTML code.

Just remember the base idea: you pass a unique for the template ID to the sub, which builds the content enclosure, and then by manipulating a standard class bound tothatID, you change the appearance of a particular layer, enclosure,table, font, links...etc.

 

©2003-2010  Rapid Classified v3.3  GA Soft