Sidebar

startup_tutorial_and_checklist:design_configuration:specific_html_elements:changing_links_in_the_header

Header Changes in Default Design

This support wiki page concerns all the links that appear in the header of the default design. All the changes within this page would be affected in the header.tpl template.

Changing the Home to Help Links

This section of this support article concerns the links in the red circle here of the default design:

To edit the above links in the html you'll edit the header.tpl file of your custom template set using the DESIGN > MANAGER admin tool. Look for the following block of html:

		<nav class="page-bar fixed-menu">
			<a href="index.php" class="menu-link">Home</a>
			<a href="index.php?a=1" class="menu-link">Sell</a>
			<a href="index.php?a=19" class="menu-link">Search</a>
			{addon addon='storefront' tag='list_stores_link' no_li=1}
			<a href="index.php?a=28&amp;b=135" class="menu-link">Features</a>
			<a href="index.php?a=28&amp;b=143" class="menu-link">Pricing</a>
			<a href="index.php?a=28&amp;b=141" class="menu-link">Help</a>
			<a href="index.php?a=28&amp;b=142" class="menu-link extra">About Us</a>
			<a href="index.php?a=28&amp;b=136" class="menu-link extra">Contact Us</a>
		</nav>

In the above code you see the links to change if you like. To add another link in the list of links simply add another <a href="URL" class="menu-link"> … </a> to the list in the order you want it to show. The "class" determines which menu it will appear in. If it has class of "menu-link" it will show in the menu for small screens / mobile devices. If you use class "menu-link extra"1), that link will ONLY show on the mobile menu. This is specifically for "about us" and "contact us" links, which are not part of the menu tabs on the desktop view.

Note that the "stores" link will only appear if that addon is installed and enabled AND at least one live store in the software.

You would make these changes in your custom template set. To edit the contents of the "features" page look to make changes in the following template:

/main_page/extra_pages/seller_buyer_features.tpl

To edit the contents of the "Pricing" page look to make changes in the following template:

/main_page/extra_pages/pricing.tpl

And no the above page is NOT dynamically generated. The variety of ways that pricing can be setup within the software and the amount of time it would take to make the above page dynamic is prohibitive and most likely not the way you would want it to display. So we leave this one for you to edit.

To edit the contents of the "help" page look to make changes in the following template:

/main_page/extra_pages/help.tpl  

Changing the About Us and Contact Us Links

The section of this support wiki article concerns the links circled in the following screenshot:

Edit the header.tpl file in your custom template set using the DESIGN > MANAGER admin tool and look for the following code:

		<ul id="extra_links">
			<li><a href="index.php?a=28&amp;b=142">About Us</a></li>
			<li>|</li>
			<li><a href="index.php?a=28&amp;b=136">Contact Us</a></li>
		</ul>

You can see the links in the code and the "about us" and "contact us" text we use. You can change those links/text to what you like. You also add another link next to the above that will use the same css formatting by adding your own code like this:

                    <li>|</li>
			<li><a href="some url">Some Text</a></li> 

You would make these changes in your custom template set. To edit the contents of the "Contact Us" page look to make changes in the following template:

/main_page/extra_pages/about_us.tpl

Changing the Register/Login or My Account/Logout Links

This section of the support wiki concerns the links circled in the following screenshot:

You would edit the header.tpl template within your custom template set using the DESIGN > MANAGER admin tool and look for the following code:

		<div class="fixed-menu clearfix user-bar">
			{addon addon='social_connect' tag='facebook_session_profile_picture'}
			<div class="user-welcome">Welcome, {module tag='display_username'}</div>
			<span class="user-links">
				{if not $logged_in}
					{*Logged out code*}
					<a href="register.php" class="menu-link">Register</a>
					<a href="index.php?a=10" class="menu-link">Login</a>
				{else}
					{*Logged in code*}
					<a href="index.php?a=4" class="menu-link">My Account</a>
					<a href="index.php?a=17" class="menu-link">Logout</a>
				{/if}
			</span>
			{addon author='geo_addons' addon='social_connect' tag='facebook_login_button'}
		</div>
		 

The first difference you see is that the above has Smarty code in it. That Smarty code checks to see if the current client looking at that page is logged into the system or not. If the current user is not logged into your Geo software they would see the "register/login" links. If they were logged into the Geo software they would see the "my account/logout" links. Seeing the above code you should see how easy it would be to add text to the system that would only display something to users that are logged in or display something that would only display to users not logged into the Geo system. Just use the basic Smarty loop shown below:

		{if not $logged_in}
			{*Logged out code*}

		{else}
			{*Logged in code*}

		{/if}
		 

Changing the Social Sharing Buttons at the Top Right of the v7.3.0 and Up Default Design

This tutorial page concerns the social sharing links circled in the following default design image:

These links by default are in the footer.tpl template. These social media icons are just for illustration purposes and while they do link to their respective sites there is no specific functionality attached to them. Their intended purpose is for you the site owner to link to your "site accounts" on those sites using those links. To find the code to edit to insert your "social site urls" for each of those you will need to edit the header.tpl template using the following admin tool:

DESIGN > MANAGER

And edit the footer.tpl template in the /main_page directory of your custom template set. Look for the following code to make your changes:

		<nav class="social-contacts">
			<a href="#" title="Facebook"><img src="{external file='images/icons/social/facebook.png'}" alt="Facebook" /></a>
			<a href="#" title="Twitter"><img src="{external file='images/icons/social/twitter.png'}" alt="Twitter" /></a>
			<a href="#" title="Google+"><img src="{external file='images/icons/social/google+.png'}" alt="Google+" /></a>
			<a href="rss_listings.php" title="RSS Feed"><img src="{external file='images/icons/social/rss.png'}" alt="RSS Feed" /></a>
		</nav>

You can see the "#" within all those links? Those would be what you would change to point to your social accounts. The facebook and twitter account url's would look something like:

http://www.facebook.com/GeodesicSolutions
https://twitter.com/GeodesicSol

But of course pointing to your accounts. You can also edit the code above to remove specific links you will not use.

Changing the Social Sharing Buttons at the Top Right of the v7.0 to v7.2.5 Default Design

This tutorial page concerns the social sharing links circled in the following default design image:

These links by default are in the header.tpl template. These social media icons are just for illustration purposes and while they do link to their respective sites there is no specific functionality attached to them. Their intended purpose is for you the site owner to link to your "site accounts" on those sites using those links. To find the code to edit to insert your "social site urls" for each of those you will need to edit the header.tpl template using the following admin tool:

DESIGN > MANAGER

And edit the header.tpl template in the /main_page directory of your custom template set. Look for the following code to make your changes:

		<!-- START SOCIAL LINKS -->
		<div id="social_links">
			{* social hover buttons from http://www.marcofolio.net/css/display_social_icons_in_a_beautiful_way_using_css3.html *}
			
			{* Change each of the links below to link to your site's page for 
				that social site, or remove any that you do not wish to use *}
			<!-- Social Media Buttons - jQuery -->
			<ul class="social" id="social_hovers">
				<li class="facebook">
					<a href="http://www.facebook.com/"><strong>Facebook</strong></a>
				</li>
				<li class="twitter">
					<a href="http://twitter.com/"><strong>Twitter</strong></a>
				</li>
				<li class="delicious">
					<a href="http://www.delicious.com/"><strong>Delicious</strong></a>
				</li>
				<li class="flickr">
					<a href="http://www.flickr.com/"><strong>Flickr</strong></a>
				</li>
				<li class="linkedin">
					<a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a>
				</li>
				<li class="reddit">
					<a href="http://www.reddit.com/"><strong>Reddit</strong></a>
				</li>
				<li class="rss">
					<a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a>
				</li>
			</ul>
		</div>
		<!-- END SOCIAL LINKS -->

You can see the "http://www.facebook.com/", "http://twitter.com/", ….etc url's in the above code. Those would be what you would change to point to your social accounts. The facebook and twitter account url's would look like:

http://www.facebook.com/GeodesicSolutions
https://twitter.com/GeodesicSol

You can also edit the code above to remove specific links you will not use. For example to remove the reddit link you would remove the following code from that above in your header.tpl template:

				<li class="reddit">
					<a href="http://www.reddit.com/"><strong>Reddit</strong></a>
				</li>
1)
with the class "extra" added
startup_tutorial_and_checklist/design_configuration/specific_html_elements/changing_links_in_the_header.txt · Last modified: 2015/02/14 17:13 by jmd911