Sidebar

startup_tutorial_and_checklist:design_configuration:specific_html_elements:default_banner_locations

Default Banner Locations

Changing the Banners on the Left Side of the Default Front Page

To change the banners in the left side of the front page of the default design you will need to edit the following template:

/main_page/front_page.tpl

of your custom template set. Open the html source view of the above template within following admin tool:

DESIGN > MANAGER

You will need to click on the "source code editor" tab of the above admin tool to see the code if you have not already. Those "banners" are simply images included in the design to illustrate that you can place banners there. There is no specific "banner code" outside of an included html image tag and link to the current page. That "banner code" is in between these html comment tags:

     <!-- BANNER BEGIN -->
     <!-- BANNER END -->

Changing the Banners on the Right Side of the Default Listing Details Page

To change the banners in the right side of the listing details page of the default design you will need to edit the following template(s) depending on the listing types you use:

/main_page/listing_classified.tpl

/main_page/listing_auction.tpl

of your custom template set. Open the html source view of the above template within following admin tool:

DESIGN > MANAGER

That "banner code" is simply an image surrounded by a link to the current page and only used to illustrate the options you have in client side design management. That "banner code" for the right column looks like this by default:

<div class="listing_rightcol">
	<h3 class="title rounded_top">{$additional_text_3}</h3>
	<div class="content_box_3 cntr">
		<a href="#"><img src="{external file='../images/banners/banner1_160w.jpg'}" alt="" /></a>
	</div>
</div>

Adding Banners on the header of the Default Design

To change the banners in the right side of the header of the default design you will need to edit the following template:

/main_page/header.tpl

of your custom template set. Open the html source view of the above template within following admin tool:

DESIGN > MANAGER

That "banner code" location in the design is surrounded by the following comment tags in the above template:

<!– EDIT THE FOLLOWING LINE OF CODE WITH YOUR BANNER OR ADSENSE CODE –>

<!– EDIT THE ABOVE LINE OF CODE WITH YOUR BANNER OR ADSENSE CODE –>

To put your own code there remove what's currently in between the above comments and place your own "banner code".

Inserting Banner Code Into Your Templates

If your "banner" consists of an html image and a link you create you can insert that <img> and <a> tag directly into the Smarty template in the above locations. There is nothing else to do.

But if you are placing javascript banner code into your design there is an extra step beyond simply placing that code where you want it to appear. Anything you place into a Smarty template (the template management system our software uses) will be parsed by the Smarty template parser when you save it. With html that's not a problem. But with code like javascript that can be a problem for the Smarty parser. In cases where you insert javascript (or other code) that you don't want to get parsed or that might be mangled by the parser you would tell the parser to "not parse" the javascript you insert. To do that just place the following tag in front of your javascript:

{literal}

and the following tag after your javascript code in the template:

{/literal}

So in the end you would get something like and here we will use a Google Adsense code example. The banner code you use could be from any source:

{literal}

<!--my Google Adsense banner javascript code-->
<script type="text/javascript">
google_ad_client = "pub-1111222233334444";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text_image";
google_color_border = "FFFFFF";
google_color_bg = "0000FF";
google_color_link = "FFFFFF";
google_color_text = "000000";
google_color_url = "008000";
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
{/literal}

Do not use the exact above banner code. The above is just example javascript of a vertical Google Adsense code of a type many of our clients might use and contains a fictional Google Adsense account number. The exact javascript you would use would be specifically yours and generated from within your Google Adsense account.

Removing Right Column From Within Listing Details Page

This only works in the default design from v7.3 onwards.

You may decide to completely remove the right column from use if you do not wish to display banners within that page or on your site. This will take a small html change in your listing details templates (listing_classified.tpl or listing_auction.tpl) and a css change within your custom.css.

Remove the right column…which I believe is:

<div class="sidebar2">
	<!--  RIGHT SIDEBAR CONTENTS -->
	<h3 class="title rounded_top">{$additional_text_3}</h3>
	<div class="content_box_3 cntr">
		<a href="#"><img src="{external file='../images/banners/banner1_160w.jpg'}" alt="" /></a>
	</div>
	<!-- END RIGHT SIDBAR CONTENTS -->
</div>

<div class="center clearfix">
	{listing tag='previous_ad_link'}
	{listing tag='next_ad_link'}
</div>
<code>

and then change the following css "width" values to "80%"

<code>
@media only screen and (min-width: 59em)
.three-column .main

and the following css "left" value to "-80%"

@media only screen and (min-width: 59em)
.three-column .sidebar

You may decide to put the next and previous links added within the default right bar back somewhere else in the page.

startup_tutorial_and_checklist/design_configuration/specific_html_elements/default_banner_locations.txt · Last modified: 2016/09/02 19:00 by geojames