Working with Bare Bones Add-on in v3.2c

Introduction

An article is intended for web developers or enthusiasts with substantial knowledge of  HTML/CSS. Any ASP experience is also a plus.

This article provides an in-depth look at "Bare Bones add-on" kit included into Rapid Classified v3.2c package and ways to build custom classified template by adding new layers, generating new css style sheets and more. The kit contains a "light" version of 2 pages - header.asp and footer.asp (or header/footer from here on), which in general is a trimmed version of header/footer distributed with the default RC package.

Lets for a moment make a quick review about what does header/footer pages contain by default. The answer is - practically everything you see that is common for all (or most) of the RC pages. In particular - Logo area, Top Menu, left/right portal blocks, left/right side bars, bottom search block, bottom menu, copyright info block. So just 2 classified pages contain all of the above and responsible for dynamic content management. That is selectively display portal/side bars content type managed from "Main Page Configuration" and "Side bars Content and Geometry". While for the most who prefer to stay with current design it is convenient, the others, who are willing to substantially customize site appearance (customize menus, use custom header/footer and design which matches the existed site) it might be just impossible to figure out the ASP/HTM code flow from header down to footer. One invalid or improperly modified line and the entire site would crash.

With bare bones kit, it is now possible to customize the site with minimal effort, concentrating mostly on a new design and not on a dilemma where to insert the custom code. The header/footer code is kept to a minimum - just to hold the pages content in place and have a sketchy top and bottom menus. Note: the top menu still has some ASP routine, which used to generate links according to the selected Pay Mode and Clients Logon state.

The disadvantage of bare bones kit is, that you loose the ability to control portal/side bars content from "Main Page Configuration" and "Side bars Content and Geometry". Overall site width and position can only be controlled by respective entries in css and in some cases might even require layers rearrangement. But that could be compensated with just a few lines of code and with the use of custom inclusive templates, which could still be managed on-line in Content Management. Reference would be provided in the following chapter.

Analyzing sample site built with Bare Bones

Before going any further, have a look at the sample site, which was created with Bare Bones kit: http://www.4u2ges.com/demos/barebone. You may download this template from the following link:

download Download template package

After downloading, unzip the package and read setup.txt for installation instructions.

Please note: Sample template provided on "AS IS" basis and not supported. You might need to customize it further according to the specific requirements and setup type.

The design template was created with base bones kit and a free template downloaded from:
http://www.free-css-templates.com/preview/Simple/
This template was customized though for a proper fit and new set of images were generated with OGIM and Text-It for main page slogan image. The design is plain and fairly simple.

Practically, any suitable template whether you designed it yourself or downloaded somewhere could be integrated into RC. In a given example, client menu and client logon form were moved into the left portal block. Because of such a move, number of pages had to be amended. Feel free to install the pack and then customize it in any way you'd like as it now has fairly simple css based content wrapper design.

The RC css style template for this pack is xl_simple.css. It has some default styles removed. Another style sheet is wrapper.css. It does contain classes for the header/footer wrapper structure such as logo area, top menu, portal block and main content holders and bottom menu. Floating was used to hold portal/main content inline. By swapping left/right floating for layers identified as  #left and #right, you can move portal block to the right.

 

Form here on it is assumed that you have installed simple template pack

 

Header/Footer

The header contains the following lines in <body> section:


<div id="wrap">

<div id="header">
<!--#include file="content/logo_table.asp"-->
</div>

<div id="menu">
<!--#include file="content/menu_top_xl.asp"-->
</div>

<div id="content">

<div class="right" id="right">
<div class="links-br"><%= strAdmin %></div>

As you see, it's pretty much easy to figure out the code flow, change it if necessary by amending HTML in header or CSS in wrapper.css (don't forget that you can edit all css files online in v3.2c). The actual content for layers is included into common inclusive templates and also maintained in Content Management (replacement content templates provided in the package). The last line of code reveals admin tasks and help links when admin is logged in.

The footer contains the following lines in <body> section which could be edited  (do not change anything below whose lines in footer):

</div>
<div class="left" id="left">
<!--#include file="content/left_portal.asp"-->
</div>
<div style="clear: both;"> </div>

</div>

<div id="footer">
<!--#include file="content/menu_bottom.asp"-->
</div>

</div>

So what you see above is a base code for the entire content wrapper structure with inclusive pages for header/footer content. The site content would go between pink <div> identified as [right] and the portal block would go between light green <div> identified as [left].

 

Portal Block

Lets now see how we can compensate the inability to automatically display built-in portal content maintained in "Main Page Configuration". Strictly speaking it would be much more flexible to maintain this content manually, because you would be in total control over the process. Just follow recommendations and references below.

Open content/left_portal.asp page either in Content Management or in any text editor (template is included into footer inside <div> layer identified as [left]). This is the code inside template:

<%
Call Build_Box_Top(190, 220, "Client Menu", "xl1")
%>
<!--#include file="user_menu.asp"-->
<%
Call Build_Box_Bottom("Box Head")


Call Build_Box(190, 200, "Categories", BuildContent(18, 1, 2, 190), "xl2")
Call Build_Box(190, 200, "Top New Ads", BuildContent(4, 4, 3, 190), "xl3")


Call Build_Box_Top(190, 200, "Sponsors", "xl4")
%>
Google AdSense code....
<%
Call Build_Box_Bottom("Box Head")
%>
 

The code above builds 4 portal blocks. There are 2 different methods of generating blocks:

  • Method 1 - Used for generating custom content inside standard portal box.
  • Method 2 - Used for generating content from built-in routines (similarly to the content assignment in "Main Page Configuration")

Portal blocks 1 and 4 use Method 1, while blocks 2 and 3 use Method 2.

Lets review each method line by line.

Method 1 (custom content)

<% Call Build_Box_Top(190, 220, "Client Menu", "xl1") %>
<!--#include file="user_menu.asp"-->
<% Call Build_Box_Bottom("Box Head") %>

  • First line calls a subroutine for building a box. The subroutine is located inside footer_content_xl.asp page.
  • Second line in this case shows an included template. user_menu.asp is custom inclusive template user_menu created specifically to display client logon form and client menu when client is logged in to the account. Menu and logon form appearance could be easily customized via <div> identification [umenu] and [umenul] in wrapper.css. In general, second line of code could be any valid HTML or even ASP code, which you need to display within custom box. You would insert the code directly (such as Google AdSense code in block 4) or use inclusive templates as in this case. You may create as many blocks as you'd like lining them up one below the other.
  • Third line calls the box closing routine. It would be the same for all custom blocks.
     
Finally review the call arguments reference from an example:

Build_Box_Top(190, 220, "Client Menu", "xl1")

  • 190 - block width (value in pixels). Must be a number without double quotes. Make sure this value is slightly less than the block wrapper <div> width. In this case the width assigned to #left id in wrapper.css is 200px. So 190 for the inner block is just about right value, which gives enough space for separation. You can change this value depending on the particular design and a best fit.
  • 220 - block height (value in pixels). This is minimum default box height. Box would be stretched beyond this value as more content is added.
  • "Client Menu" - box head title. Anything you feel is right for the title. Make is short enough to fit within the specified box width.
  • "xl1"- unique box identification. Make sure to use a unique value for this ID. It also must start with a letter. This ID could be used in css stylesheet for unique box design. If for instance you have 2 boxes one below another with respective IDs "xl1" and "xl2", then in css you may specifically assign different style attributes for respective classes inside a box such as [xl-box-table], [xl-box-head], etc..

Method 2 (built-in content)

<% Call Build_Box(190, 200, "Categories", BuildContent(18, 1, 2, 190), "xl2") %>

Only one line of ASP code is used in this case. Review arguments from an example (most arguments are similar to the Method 1 and simply repeated here):

  • 190 - block width (value in pixels). Must be a number without double quotes. Make sure this value is slightly less than the block wrapper <div> width. In this case the width assigned to #left id in wrapper.css is 200px. So 190 for the inner block is just about right value, which gives enough space for separation. You can change this value depending on the particular design and a best fit.
  • 220 - block height (value in pixels). This is minimum default box height. Box would be stretched beyond this value as more content is added.
  • "Categories" - box head title. Anything you feel is right for the title. Make is short enough to fit within the specified box width.
  • "xl2"- unique box identification. Make sure to use a unique value for this ID. It also must start with a letter. This ID could be used in css stylesheet for unique box design. If for instance you have 2 boxes one below another with respective IDs "xl1" and "xl2", then in css you may specifically assign different style attributes for respective classes inside a box such as [xl-box-table], [xl-box-head], etc..

Arguments specific to BuildContent(18, 1, 2, 190) function:

  • 18 - Content Type. Must be a number from one of the following:

    1 - Top Hot Ads
    2 - Most Visited Ads
    3 - Top Posters
    4 - Top New Ads
    5 - News Template
    6 - Editors Pick List
    11 through 16 - Custom1 through 6 Templates maintained in Content Management.
    17 - Categories Tree View
    18 - First Level Categories List.

    Tip: Print this list and have it handy, when choosing built-in content type to display in a given box.
     
  • 1 - Number of items to display. Apparently this value only relevant for Content Type 1,2,3,4 and 6. For other types simply use 1.
  • 2 - This value is retired and is not relevant anymore. Use any number for this argument.
  • 190 - Repeat block width value from Build_Box call subroutine (see above).
     
Custom or built-in blocks could also be displayed on any given page, included into any "Custom Inclusive" or "True Content Page" templates.

You may also pass the Banner Rotator Zone and RSS feed code into the box.

For Banner Zone the code might look like:

<%
Call Build_Box_Top(190, 220, "Client Menu", "xl1")
Response.Write RotateBanner(1)
Call Build_Box_Bottom("Box Head")
%>

where RotateBanner(1) is the respective zone code gathered from Banners Rotator admin page.

For RSS feed the code might look like:

 <%
Call Build_Box_Top(190, 220, "Client Menu", "xl1")
Response.Write Display_RSS("Some Feed")
Call Build_Box_Bottom("Box Head")
%>

where Display_RSS("Some Feed") is the respective feed code gathered from RSS Management admin page.

 

Changing Content Width

Sample template configured with overall content width equals to 1000px. If you need to reduce width to 800px, then certain amendments would require. Content width controlled by width property assigned to #wrap, #left and #right in wrapper.css. The sum of width for #left and #right should be just about equal to width assigned to #wrap. However, simply reducing the content width might not work as expected. Certain pages within classified (particularly administration pages) require over 700px in width. Addition of portal block with about 200px might force the page content to overlap. Within the default classified header/footer a special dynamic routine takes care of this problem by simply hiding a portal in pages with wide content. In bare bones kit this routine in not available but could be integrated.

Another problem with hiding portal block is, that client logon form and menu would be hidden as well. You might wish to create a separate "Client control panel" page first. Here is how it could achieved.

Remove the following code from left-portal template (or replace the box content with something else.):
<%
Call Build_Box_Top(190, 220, "Client Menu", "xl1")
%>
<!--#include file="user_menu.asp"-->
<%
Call Build_Box_Bottom("Box Head")

Create a new page (user_control.asp for instance) and make a URL link to it Main menu. The page could only have 3 lines:

<!--#include file="user_header.asp"-->
<!--#include file="user_menu.asp"-->
<!--#include file="user_footer.asp"-->

Or with box wrapper:

<!--#include file="user_header.asp"-->
<% Call Build_Box_Top("99%", 500, "Control Panel", "xl100") %>
<!--#include file="user_menu.asp"-->
<% Call Build_Box_Bottom("Box Head") %>
<!--#include file="user_footer.asp"-->


Since user_menu template was optimized for narrow portal block, you might wish to customize this template further for proper display within main content space. You may create user menu with large icons similar to admin tasks panel, etc.. Just make sure the ASP code routine retains its flow.

Now you may start working with dynamic content width assignment and portal hiding routine.

- First, remove width property assigned to #right in wrapper.css.
- Given that you assigned width: 800px to #wrap element, add the following routine in header.asp right before <body> tag.

<%
'list of pages to exclude portal display at. Add/remove pages if necessary.
noPortal = "update.asp,post_new2.asp,advsearch.asp,"
noPortal = noPortal & "process.asp,rotstat.asp,advertise.asp,"
noPortal = noPortal & "alert.asp,sitemap.asp,viewad.asp,adpreview.asp"

If InStr(scr_Name, "admin_") <> 0 Or InStr(noPortal, scr_Name) <> 0 Then
Hide_Portal = True
right_width = 800
Else
right_width = 595
End If
%>


- In header.asp modify opening <div> tag for main content in the following manner:

<div class="right" id="right" style="width:<%= right_width %>px">

- In footer.asp enclose the portal block into ASP conditional statement:

<% If Not Hide_Portal Then %>
<div class="left" id="left">
<!--#include file="content/left_portal.asp"-->
</div>
<% End If %>

That is it. Now, whenever the page listed in noPortal variable (or the page name starts with admin_) is navigated to in a browser, the portal block would be hidden and full width would be assigned to main content identified as id="right" (800px). In all other cases the width: 595px would be assigned to it.

Note however, the routine is optimized for the particular sample template design. If you have a different design structure, classes, etc.. then writing of a different handling code routine might be necessary.
 

Using other built-in css templates with sample bare bones kit

Bare bones sample kit (if you downloaded and installed it) is based on a new design css style sheet - xl_simple.css. The wrapper.css which is also included into the kit designed strictly for wrapping the page content (logo, menus.. etc) and could be common for all xl style sheets (just like the other common for all templates style sheet common.css). You may however elect to use any other built-in xl style sheet templates with this particular structure design by switching it in Admin Preferences. It would work out just fine. Except maybe for the background gradient images used for the top and bottom menus, which could be generated in different color in OGIM or any other gradient image creator.

If you need to set a different style for portal block boxes (means different from content boxes used elsewhere), then use cascading technique and assign different style properties for the respective classes. By default, box is wrapped with the following classes:

xl-box-table
xl-box-head
xl-box-head1
xl-box-content
xl-box-content1
xl-disable-box-decor
xl-bbc
xl-bbl
xl-bbr

Not all classes are used in some xl templates though. But you may see what layers they are assigned to in footer_content_xl.asp.

In xl_simple.css, the default styles are assigned directly to classes (lines 45-57 in xl_simple.css). Example of this assignment is a box for Editors pick list and Top Hot ads at the default page. At the same time, boxes used in portal block styled differently by using parent <div> layer identification (#left in this case). Look at lines 59-76 in xl_simple.css. Those lines make boxes in portal block to look different than other boxes used on some other pages. Essentially you may use this core css technique in other xl style sheet templates.

Finally, it is possible to further break down styling for each individual box in portal (or elsewhere for that matter). From a chapter above you noted individual identification assigned for each individual box (such as xl1, xl2..). Here is an example how to use individual box identification. In xl_simple.css each box in left portal block appear with the same blue arrow icon. Here is the line which assigns this style:

#left .xl-box-head {
...
background: url(../img/simple-arrow.png) left center no-repeat;
...
}

So if you need each box to have a different icon image, then place icon images you have in img folder and just assign respective images to the same class but for different identification of a parent layer:

#xl1 .xl-box-head {
background: url(../img/some_icon1.gif) left center no-repeat;
}

#xl2 .xl-box-head {
background: url(../img/some_icon2.gif) left center no-repeat;
}

#xl3 .xl-box-head {
background: url(../img/some_icon3.gif) left center no-repeat;
}

As a result, first 3 boxes would have different icons. But 4-th box would have an icon image inherited from - #left .xl-box-head. That is because there was nothing explicitly assigned to xl4 identification.
 

Use similar technique to assign other styles to layers for the entire portal block or for individual boxes.