====== Front Pages Changes in Default Design ======

======Change Rotating Images Top Right of Search Box======

These instructions deal with the area in the red circle of the screenshot below:

{{:startup_tutorial_and_checklist:design_configuration:specific_html_elements:full_front_page_top_rotate_images.png}}

To change the slideshow images next to the search box 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

Search for the following html tag:

<div class="gj_image_fade">  ( you can search for "gj_image_fade")

You'll see a section of code something like this one:

<code>
<div class="gj_image_fade">
<div style="display: none;"><img src="{external file='images/showcase_slideshow/house.png'}" alt="" /></div>
<div style="display: none;"><img src="{external file='images/showcase_slideshow/jersey.png'}" alt="" /></div>
<div style="display: none;"><img src="{external file='images/showcase_slideshow/puppies.png'}" alt="" /></div>
<div style="display: none;"><img src="{external file='images/showcase_slideshow/car4.png'}" alt="" /></div>
<div style="display: none;"><img src="{external file='images/showcase_slideshow/horse.png'}" alt="" /></div>
<div style="display: none;"><img src="{external file='images/showcase_slideshow/ipad2.png'}" alt="" /></div>
<div style="display: none;"><img src="{external file='images/showcase_slideshow/guitar.png'}" alt="" /></div>
<div style="display: none;"><img src="{external file='images/showcase_slideshow/car6.png'}" alt="" /></div>
</div>
</code>

You see the images used in that slideshow in the code above.  You have a couple of options:

  - upload images named the same way as above to the same location within your custom template set
  - upload your own images to your site and manually change the above code to reference them.  

By default the above mentioned image are within the following directory of your custom template set:

/external/images/showcase_slideshow/

Make sure your images are the same size as the current images or you may need to adjust your html source code to match their size.  If not you'll need to adjust the css/html to accommodate.  The default images are 250 pixels width by 140 pixels height.

====== Edit the "for sale" section in the left column ======

These instructions deal with the area in the red circle of the screenshot below:

{{:startup_tutorial_and_checklist:design_configuration:specific_html_elements:for_sale_front_page.png}}

To change the above shown area 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

Search for the following html comments:

<!-- SELL CONTAINER BEGIN -->

<!-- SELL CONTAINER END -->

The html used to create the above section is between those two comment tags.

===== Car Background Image =====

Changing the "car image background is a matter of changing the css to point to an image of your choosing in the css or upload your image over the current image (with the same file name and location) within your custom template set.  If you just want to overwrite the current image there without needing to change the css to point to a new file you would upload the file name exactly as:

  car_silhouette.png

You need to use the same file type and suggest relatively the same dimensions of 122 pixels wide by 70 pixels tall.  You would upload that image into the following directory of your **custom template set** within the following directory:

  /external/images/backgrounds/car_silhouette.png
  
If you wish to change the css to point to your own custom image you should still upload your image to the same location in your custom template set:

  /external/images/backgrounds/
  
and then change the css to point to that image.  The css to edit is the following:

<code>
.content_box.showcase .forsale_text {
	background: url('../images/backgrounds/car_silhouette.png') no-repeat left top;
}
</code>

In the default.css file.  But note that you can't edit the default.css file as that file will be overwritten with the next version update.  You will need to follow the [[startup_tutorial_and_checklist:design_configuration:editing_css:editing_custom_css|instructions to edit css within your custom.css file]] to copy the above to your custom.css and make the changes there.  For example if your new image file was named:

  some_new_image.jpg
  
and uploaded to the same directory the current background image is in the above css in the default.css would become the following in your custom.css file:

<code>
.content_box.showcase .forsale_text {
	background: url('../images/backgrounds/some_new_image.jpg') no-repeat left top;
}
</code>

**If you want to remove the use of that background image altogether** you would edit that default css within your custom.css file to something like this:

<code>
.content_box.showcase .forsale_text {
	background: none;
}
</code>
====== Links on the right side below the rotating images ======

These instructions deal with the area in the red circle of the screenshot below:

{{:startup_tutorial_and_checklist:design_configuration:specific_html_elements:front_page_right_side_links.png}}

To change the above shown area 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

Search for the following html comments:
<code>
	<ul class="search_bullets">
		<li id="active"><a href="index.php?a=28&amp;b=137" id="current">How it Works</a></li>
		<li><a href="index.php?a=28&amp;b=135">Buyer/Seller Features</a></li>
		<li><a href="index.php?a=28&amp;b=141">Help</a></li>
	</ul>
</code>

====== Search box in the top middle of the front page ======

These instructions deal with the area in the red circle of the screenshot below:

{{:startup_tutorial_and_checklist:design_configuration:specific_html_elements:front_page_search_box.png}}

To change the above shown area 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

Search for the following html comments:
<code>
        <h1 class="search_title">What are you Looking For?</h1>
	<div class="form_search_divider"></div>
	<form method="get" action="index.php" style="display: inline;" class="showcase">
		<div class="form_search">
			<input type="hidden" name="a" value="19" />
			<input type="hidden" name="b[subcategories_also]" value="1" />
			<input class="keyword" type="text" placeholder="search keywords..." name="b[search_text]" />
	        </div>
		{if $enabledAddons.zipsearch}
			<div class="cntr" style="display: nowrap;">
				Within&nbsp;
				<select class="field" name="b[by_zip_code_distance]">
					<option value="1">Walking Distance</option>
					<option value="5">5 miles</option>
					<option value="10">10 miles</option>
					<option value="15">15 miles</option>
					<option value="20">20 miles</option>
					<option value="25">25 miles</option>
					<option value="30">30 miles</option>
					<option value="40">40 miles</option>
					<option value="50">50 miles</option>
					<option value="75">75 miles</option>
					<option value="100">100 miles</option>
					<option value="200">200 miles</option>
					<option value="300">300 miles</option>
					<option value="400">400 miles</option>
					<option value="500">500 miles</option>
				</select>
				&nbsp;of&nbsp;
				<input id="by_zip_code" class="field" type="text" size="7" name="b[by_zip_code]" value=""  placeholder="Zip Code" />
			</div>
		{/if}
		<div class="cntr">
			<br />
			<input class="button-large" type="submit" value="Search Now" />
			&nbsp; &nbsp; &nbsp;
			<a class="button" href="{$classifieds_file_name}?a=19">Advanced Search</a>
		</div>
	</form>
</code>

To change "zip code" to "post code" or something else change "Zip Code" in the placeholder attribute here:

<code>
<input id="by_zip_code" class="field" type="text" size="7" name="b[by_zip_code]" value=""  placeholder="Zip Code" />
</code>

To change the title of the form change the following code:

<code>
<h1 class="search_title">What are you Looking For?</h1>
</code>

To change the "search keywords..." inside the search text box you only need to change that text in the placeholder attribute of this text:

<code>
<input class="keyword" type="text" placeholder="search keywords..." name="b[search_text]" />
</code>

===== Set Search Form To Consider Current Region Selection =====

The search box on the front page by default searches the complete site by design irrespective of current region selected.  But if you wish you can make the software include that as a criteria within that search form automatically.  You would only need to insert the following line into the above html form:

<code>
<input type="hidden" name="b[search_location]" value="{$geographic_navigation_region}" />  
</code>

Just insert it anywhere after the opening form tag (<form>) and before the closing form tag (</form>)
  
====== The Scrolling Featured Box Top Left ======

This section deals with the scrolling featured listing display in the top left of the front page and shown in this screenshot:

{{:startup_tutorial_and_checklist:design_configuration:specific_html_elements:front_page_top_left_featured.png}}

To change the above shown area 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

For the html that affects that whole box look for the following html comment tags:

<!-- FEATURED CONTAINER BEGIN -->

<!-- FEATURED CONTAINER END -->

The html that affects that is between those two tags.  We would also like to not that you can pass some values you set in the admin tool for a specific module directly through the module placement tag.  To illustrate we've done just that with this top left featured module display.  Though the featured pic 1 module is set by default to display 4 columns in the admin tool that specific placement of that module displays 1 column because that is part of the data we pass through that tag.  You can easily see in the following code:

<code>
{module tag='module_featured_pic_1' module_number_of_columns=1 module_thumb_width=196 module_thumb_height=200 module_number_of_ads_to_display=10}
</code>

You'll see that we set these parameters that you would by default set within the featured pic 1 module's admin tool.

  * module_number_of_columns=1 
  * module_thumb_width=196 
  * module_thumb_height=200 
  * module_number_of_ads_to_display=10

While the featured pic modules have the same configuration values other modules may be different so check the code or check with us.  

This specific feature allows you any number of instances for one or many modules throughout your site without ever running out of modules to place.