There are a few common things people usually want to do with the design beyond what is explained in the main design tutorials. We will explain how to do them on this page.

The new design you see in this tutorial is the default design if you install the latest version of the software. If you update to v5/v6 from a version less than v5 you exported your previous versions template design into a template set within the new admin tool. After the update this exported template set is the active template set within the software and is what you see when you go to the client side of your software. The design displayed in this tutorial is the default template set in your admin tool here:

Design > Template Sets

If you want to view the default template set ¹⁾ in your site you only need to uncheck the "active" box next to all other template sets within the above admin tool.

Note that the default template set is updated with new template changes every time you update to the latest GeoProducts version. DO NOT MAKE CHANGES TO THE DEFAULT TEMPLATE SET. Any changes you make to the default template set will get overwritten every time you update the software.

If you need to make changes to the default template set design in the admin at Design > Template Sets use the button to Create Main Template Set, that will create a new template set based on the default templates. Make your changes to that new template set that is created.

We get the question often of how do we change the colors of the navigation bars and section header bars used in the default design. The first answer is that the colors within those bars isn't set by a color value referenced within the theme_styles.css file. Those colors you see are "background images" set for those areas within the theme_styles.css file. If you want to change these look for the following images that are referenced as background images within the theme_styles.css file. Searching for the file name alone should do. They are found in your working template set here within the file system:

/geo_templates/[your template set]/external/images/backgrounds/c_bar_primary.gif
/geo_templates/[your template set]/external/images/backgrounds/c_bar_secondary.gif

Note the above are only 1 pixel wide by about 30 pixels tall images. The "background image" is "repeated" across the space it is set as the background for. Since the space it "repeats" is "shorter" than the image itself you never see the image stacked on top of each other (unless you make a change in the design to make those areas taller) but only as set side by side creating the slight gradation you see across the area it is used. Those images are slightly different colors from top to bottom to create the nice effect you see. You can change the "colors" of these elements in your design in one of two ways:

1. You can create new images in the same dimensions (or near) with the colors you want within them. Name the images the same file name as the images they will replace. Upload those images over the image above with the same name in the same location on the server. This will overwrite the current image and require no "theme_styles.css" file changes but if you wanted the older image back you would need to retrieve it from the /default template set.
2. You can create new images of your own file name. Upload those to the same directory as those above (suggested for organization's sake). Then change your theme_styles.css file to reference the new images instead of the old.

The above images should be pretty easy to find in your theme_styles.css file. Just search for the file names.

Many of the same concepts above still apply but some of the files have changed. The "top blue bar" that disappears under the site logo on the left is the following background image:

/geo_templates/[your template set]/external/images/backgrounds/search_bar.gif

These are still used also:

/geo_templates/[your template set]/external/images/backgrounds/c_bar_primary.gif
/geo_templates/[your template set]/external/images/backgrounds/c_bar_secondary.gif

And the following is used as a background for the "featured banner" at the top left of the front page to "head" the single scrolling featured pic display:

/geo_templates/[your template set]/external/images/backgrounds/showcase_ribbon.png

Note that this requires the ZipSearch Addon to be installed, and the zip/postal data imported for the region(s) your site uses. Search for the following code within the front_page.tpl template:

			<!-- Zip/postal search - commented out by default since it requires zipsearch addon -->
			<!--
			<div class="content_box center">
				<h1 class="title">
					Search by Zip/Postal:
				</h1>
				{module tag='module_zip_filter_1'}
			</div>
			<br />
			-->

And remove the "HTML comments", it should look like this after:

			<!-- Zip/postal search - commented out by default since it requires zipsearch addon -->
 
			<div class="content_box center">
				<h1 class="title">
					Search by Zip/Postal:
				</h1>
				{module tag='module_zip_filter_1'}
			</div>
			<br />

and the form should appear in the left column of the home page. You can take this form in its entirety and move it anywhere else in your design to make this form appear but it is only truly useful/effective in the category browsing and home pages. Also note that you can place this form anywhere within the design by placing the zip search module placement tag within the design where you want it to appear. You can find the settings for that module here within the admin tool:

PAGE MODULES > BROWSING > BROWSING FILTER MODULES > BROWSING ZIP FILTER

The pricing page you see linked to in the top of the default design is an extra page within the system using the extra page feature. The information in that page is not dynamically generated from the pricing you set within your price plan admin tool. You need to edit the information in this page directly in that html to display the pricing information you want.

Within the default design the pricing page is extra page 9 that can be found here in the admin tool:

PAGES MANAGEMENT > EXTRA PAGES > EXTRA PAGE 9 > [EDIT]

As with any extra page there are two templates available to be set. One is the basic page template that you can set on almost all pages in the system. The other is the "body template" that by default contains all the information that will be placed where the {body_html} of the page template attached on that same page. For more in depth description about the extra page look at the extra pages wiki page here.

To change the pricing displayed in the pricing page you will need to edit the "body html" template shown in the above admin tool. Within the default design you can go to the following admin tool:

DESIGN > MANAGER

Go to your working template set and edit the following template:

main_page / extra_pages / pricing.tpl 

In v6 we will add the following css controls to the header row html td tags to facilitate more control:

• browse_table_column_header_type
• browse_table_column_header_business_type
• browse_table_column_image
• browse_table_column_header_tags
• browse_table_column_header_1
• browse_table_column_header_2
• browse_table_column_header_3
• browse_table_column_header_4
• browse_table_column_header_5
• browse_table_column_header_6
• browse_table_column_header_7
• browse_table_column_header_8
• browse_table_column_header_9
• browse_table_column_header_10
• browse_table_column_header_11
• browse_table_column_header_12
• browse_table_column_header_13
• browse_table_column_header_14
• browse_table_column_header_15
• browse_table_column_header_16
• browse_table_column_header_17
• browse_table_column_header_18
• browse_table_column_header_19
• browse_table_column_header_20
• browse_table_column_header_address
• browse_table_column_header_city
• browse_table_column_header_state
• browse_table_column_header_zip
• browse_table_column_header_country
• browse_table_column_header_num_bids
• browse_table_column_header_price
• browse_table_column_header_entry_date
• browse_table_column_header_time_left

Note that we are not putting these individual css within the css files but they will be referenced within the html for those columns. That means that if you wish to "set css values" for one of the above you will not find them in your .css files that come with your installation. You will need to add them to the theme_styles.css in your custom template set and add the controls you want there.

If you do not have v6 yet have no fear as you can manually add those to your system template where we have added those in v6 onward. If you need to add these to your site you would make those changes in the following system template:

/geo_templates/[your template set - not default]/system/browsing/common/listing_set.tpl

And as always follow these guidelines when making system/module template changes as the /default template set is over written in an update:

http://geodesicsolutions.com/support/wiki/tutorials/design_adv/replace_system_templates

Just search for all html td tags in the "header row" within that file to find all places where to add the above css labels. But note if you use the same css labels as we have above you will not need to keep track of these changes after v6 as we will have already added those in v6 onward.

What does adding these give you? This gives you control over the td encompassing backgrounds, width of the cell helping in control of the column and other options css gives you.

Also note that the css tags added above will have effect within the search results, newest listing browsing and featured listing browsing pages.

Our default site design does not have a background color or background image set by default. But to make that change within the default design should be a simple css change within the theme_styles.css file. To make that change edit the following file within the DESIGN > MANAGER admin tool. Make sure to make that change only within your working template set:

/external/css/theme_styles.css

Look for the following css at the top of the theme_styles:

body {
          margin: 10px 0 20px 0;
          padding: 0;
          font-family: Geneva, Arial, Helvetica, sans-serif;
          color: #666666;
}

and add the background-color (to change the background color for the whole Geo portion of your site) and/or background-image (to add a background image for the whole Geo portion of your site) attribute like so:

body {
          margin: 10px 0 20px 0;
          padding: 0;
          font-family: Geneva, Arial, Helvetica, sans-serif;
          color: #666666;
          background-color: #xxxxxx;
          background-image: url('xxxxx.jpg');
}

Note that either one or both are optional. Only add what you want to change. For the background-color attribute "xxxxxx" is the rgb hex value for the color you want to set as background color. There are other ways to denote color. For the background image set the url of the image you wish to use. For additional formats to either background color or background image research css on the Internet.

Note that the above may not have the effects you want it based on the layers that display "above" the page background and the opacity of those layers. You may need to make many changes in the layers above the page background to make the page background visible.