Jump to content

Create another logo on top right of page. How?

BrainSuperGlue
 Share

Recommended Posts

BrainSuperGlue Newbie

BrainSuperGlue

Posted
Posted

Hi,

We're using the default bootstrap theme under 1.6.1.0.

We have our logo in the top left corner of the page as desired. 
post-1227072-0-54181600-1503069128_thumb.png

I'm trying to place another duplicate logo in the space to the right. (Picture mockup of what I need)
post-1227072-0-44065600-1503069151_thumb.png 

I guess I would need to change header.tpl but not sure if a hook is needed?

Our website is https://secondtimearoundcharities.org/ecomm/index.php

Any help would be gratefully received.

Best wishes

BSG

Link to comment
Share on other sites
BonPresta Rising Star

BonPresta

Posted
Posted

Hi,

 

We're using the default bootstrap theme under 1.6.1.0.

 

We have our logo in the top left corner of the page as desired. 

attachicon.gifheaderquestion.PNG

 

I'm trying to place another duplicate logo in the space to the right. (Picture mockup of what I need)

attachicon.gifheaderquestion2.PNG 

 

I guess I would need to change header.tpl but not sure if a hook is needed?

 

Our website is https://secondtimearoundcharities.org/ecomm/index.php

 

Any help would be gratefully received.

 

Best wishes

 

BSG

 

Hello,

 

You need to find in the header.tpl such code

<div class="row">
    <div id="header_logo">
        <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
            <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
        </a>
    </div>
    {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div>

And replace with

<div class="row">
    <div id="header_logo">
        <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
            <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
        </a>
    </div>
    {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
    <div id="header_logo">
        <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
            <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
        </a>
    </div>
</div>
Link to comment
Share on other sites
BrainSuperGlue Newbie

BrainSuperGlue

Posted
  • Author
Posted

 

Hello,

 

You need to find in the header.tpl such code

<div class="row">
    <div id="header_logo">
        <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
            <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
        </a>
    </div>
    {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
</div>

And replace with

<div class="row">
    <div id="header_logo">
        <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
            <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
        </a>
    </div>
    {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
    <div id="header_logo">
        <a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
            <img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
        </a>
    </div>
</div>

Hi BonPresta,

 

I added those lines into themes/default-bootstrap/header.tpl and the second logo puts itself underneath the catalogue categories bar.

post-1227072-0-28852100-1503103160_thumb.png

 

Does it think there is something already hidden there, so places the second logo in the first place it can find?

 

I went into Inspect mode within Firefox and placed the mouse pointer (the position of the yellow circle in the attached picture) and it didn't find an hidden element there.

post-1227072-0-07894000-1503104348_thumb.png

 

Thoughts?

 

Many thanks

 

BSG

 

 

Link to comment
Share on other sites
BonPresta Rising Star

BonPresta

Posted
Posted

Hi BonPresta,

 

I added those lines into themes/default-bootstrap/header.tpl and the second logo puts itself underneath the catalogue categories bar.

attachicon.gifheaderquestion3.PNG

 

Does it think there is something already hidden there, so places the second logo in the first place it can find?

 

I went into Inspect mode within Firefox and placed the mouse pointer (the position of the yellow circle in the attached picture) and it didn't find an hidden element there.

attachicon.gifheaderquestion4.png

 

Thoughts?

 

Many thanks

 

BSG

 

 

 

 

Because the search and the menu are in the same hook

 

You need to put a logo above the menu,
Here are two options, add a logo module to the Top.
Or insert the logo code above the menu in the file - blocktopmenu.tpl
 
<div id="header_logo">
	<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
		<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
	</a>
</div>

{if $MENU != ''}
	<!-- Menu -->
	<div id="block_top_menu" class="sf-contener clearfix col-lg-12">
		<div class="cat-title">{l s="Menu" mod="blocktopmenu"}</div>
		<ul class="sf-menu clearfix menu-content">
			{$MENU}
			{if $MENU_SEARCH}
				<li class="sf-search noBack" style="float:right">
					<form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
						<p>
							<input type="hidden" name="controller" value="search" />
							<input type="hidden" value="position" name="orderby"/>
							<input type="hidden" value="desc" name="orderway"/>
							<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
						</p>
					</form>
				</li>
			{/if}
		</ul>
	</div>
	<!--/ Menu -->
{/if}
Link to comment
Share on other sites
BrainSuperGlue Newbie

BrainSuperGlue

Posted
  • Author
Posted

 

Because the search and the menu are in the same hook

 

You need to put a logo above the menu,
Here are two options, add a logo module to the Top.
Or insert the logo code above the menu in the file - blocktopmenu.tpl
 
<div id="header_logo">
	<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
		<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
	</a>
</div>

{if $MENU != ''}
	<!-- Menu -->
	<div id="block_top_menu" class="sf-contener clearfix col-lg-12">
		<div class="cat-title">{l s="Menu" mod="blocktopmenu"}</div>
		<ul class="sf-menu clearfix menu-content">
			{$MENU}
			{if $MENU_SEARCH}
				<li class="sf-search noBack" style="float:right">
					<form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
						<p>
							<input type="hidden" name="controller" value="search" />
							<input type="hidden" value="position" name="orderby"/>
							<input type="hidden" value="desc" name="orderway"/>
							<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
						</p>
					</form>
				</li>
			{/if}
		</ul>
	</div>
	<!--/ Menu -->
{/if}

 

Yep, added the logo code to blocktopmenu.tpl and the second logo appears as needed.

 

That's excellent and many thanks.

 

The only thing down the road would be to make a change to the mobile setup so only the first logo is shown.

Link to comment
Share on other sites
BrainSuperGlue Newbie

BrainSuperGlue

Posted
  • Author
Posted (edited)

I guess that for the additional logo code added into blocktopmenu.tpl, that using div add class=" hidden-xs hidden-sm" encapulating the logo code would stop the second logo appearing if the screen wasn't large enough.

OK, for those who will look for the solution later. This is working now. With the help of BonPresta.

 

If you want a second logo in the top right of the screen to mirror the one on the left add the following code to themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl

 

<div add class=" hidden-xs">
<div id="header_logo">
	<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
		<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
	</a>
</div>
</div>

Using just the hidden-xs class will mean when the screen has reached the smallest width and the responsive logo is the full width of the screen, a second logo is overkill, so by encapsulating the second logo code, it will turn off the second logo.

 

BSG

Edited by BrainSuperGlue (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...