Move breadcrumb in leftcolumn

[okaty]

Hello,

 

Is there a way to mobe the breadcrumb in the left column above categories. But without using absolute position because it goes untop of categories. And in the same situation i have the print and facebook links in product page. I managed to move them using absolute but it's not working how i would like.

 

Thanks in advance.

[PascalVG]

You could add it to the themes/<your theme folder>/header.tpl file:

			<!-- Header -->
			<div id="header" class="grid_9 alpha omega">
				<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
					<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
				</a>
				<div id="header_right" class="grid_9 omega">
					{$HOOK_TOP}
				</div>
			</div>

{include file="$tpl_dir./breadcrumb.tpl"}


			<div id="columns" class="grid_9 alpha omega clearfix">
				<!-- Left -->
				<div id="left_column" class="column grid_2 alpha">
					{$HOOK_LEFT_COLUMN}
				</div>

But you have to manually take it out from many other files...

 

Let me think about another way...

pascal

[PascalVG]

Hi Okaty,

 

About the breadcrumb, I found an easy solution. We need to change the code from yesterday a little:

 

Edit the themes/<your theme folder>/header.tpl file:

            <!-- Header -->
            <div id="header" class="grid_9 alpha omega">
                <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
                    <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if}/>
                </a>
                <div id="header_right" class="grid_9 omega">
                    {$HOOK_TOP}
                </div>
            </div>

{include file="$tpl_dir./breadcrumb_top.tpl"}


            <div id="columns" class="grid_9 alpha omega clearfix">
                <!-- Left -->
                <div id="left_column" class="column grid_2 alpha">
                    {$HOOK_LEFT_COLUMN}
                </div>

As you can see, I changed the breadcrumb.tpl -> breadcrumb_top.tpl

 

Now locate the breadcrumb.tpl. It's in the theme/<your theme folder>/ directory.

Copy the breadcrumb.tpl as breadcrumb_top.tpl

 

NOW: Edit the original breadcrumb.tpl and do this:

 

Put all the code of the original breadcrumb.tpl in COMMENT brackets, {* code *}, like this:

 

{*

<!-- Breadcrumb -->

 {if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if}

 <div class="breadcrumb">

 <a href="{$base_dir}" title="{l s='Return to Home'}"><img src="{$img_dir}icon/home.gif" height="26" width="26" alt="{l s='Home'}" /></a>

 {if isset($path) AND $path}

 <span class="navigation-pipe" {if isset($category) && isset($category->id_category) && $category->id_category == 1}style="display:none;"{/if}>{$navigationPipe|escape:html:'UTF-8'}</span>

 {if !$path|strpos:'span'}

 <span class="navigation_page">{$path}</span>

 {else}

 {$path}

 {/if}

 {/if}

 </div>

<!-- /Breadcrumb -->

*}

 

and save.

What we do here, is making the original breadcrumb just go away from all pages from where is was called upon.

Done!

 

Reload any page and see if the breadcrumb text is at the top of the pages, as desired.

 

That should do the trick,

 

pascal

[PascalVG]

I'm not sure what you exactly want with the facebook link etc. Don't see too much difference between before-after. PLease elaborate a little where you want it (and where it now is, in your theme). Please some more pics with explanation.

Thx,

pascal

[okaty]

Amazing ! It moved exactly where i want it. I had to change a little the css files because it was showing behind the logo, but it's perfect now. Thank you very much !

 

The facebook share button and print are by default under the product images (see the pic atached). I managed to move them using position:absolute and margin:... , but for some pages they don't look well because on some pages i have only color and quantity atributes, and on othe pages i have color,size and quantity. This causes the share on facebook and print button to leavea a big blank space or to come over the last atribute. I would like to put the 2 butons inline withe the price and add to cart button. Like in the first printscreen. Hope you understood what i mean. Nevertheless thank you ! 

 

Pic: https://dl.dropboxusercontent.com/u/24174476/pic1.png

[okaty]

I  ran into a problem. I have a big gap between the top menu and the rest of the page...where the breadcrumb apears. This is a problem because it apears on the homepage, and for that reason it is blank

[vekia]

hey

 

any chance to share the website url? it will be very helpful in this case

[okaty]

This is the shop www.echipamentengm.ro. But i disbaled breadcrumb_top and let the default breadcrum and header.

[okaty]

Can you please see my latest post about the language problem, if you have time. Maybe it's a simple fix but i can't figure out .

 

Thanks again for the replies !

[PascalVG]

Okaty,

Can you please turn ON the breadcrumb_top for a moment, so we can adjust its css?

pascal

[PascalVG]

Okaty,

If you want to play with it yourself, you can change the gap editing the following values in the file:

 

themes/BlackRed/css/global.css

 

find the code below: (probably around line 544, but easiest to find using Ctrl-F and then search for : breadcrumb

 

/* ************************************************************************************************

BREADCRUMB

************************************************************************************************ */

.breadcrumb {

margin-bottom:10px;       <-- change this to smaller number

font-size:12px;

}

.breadcrumb .navigation-pipe {margin:0 3px 0 5px}     <- change these to smaller numbers

.breadcrumb img {

position:relative;

top:5px                         <-maybe needs to adjust according to new values above

}

 

pascal

[okaty]

I'm not at home at the moment, but i don't think it's a css problem. I edited the css to make gap shorter but the game remains constant, even on homepage because of the breadcrumb beeing in header.tpl I figure that if i can disbale it for homepage everything else would be ok. As soon as i will arrive home i will enanle header_top.tpl

[okaty]

Sorry for the mistakes in text, i'm writing from a smart phone

[PascalVG]

:-)

[PascalVG]

Hi Okaty,

 

About the facebook links/print etc. Try this:

 

edit file themes/BlackRed/product.tpl (BACKUP first!)

 locate the 'usefull_link_block, and move it all down just before the closing tag of </form>:

			{if isset($HOOK_PRODUCT_ACTIONS) && $HOOK_PRODUCT_ACTIONS}{$HOOK_PRODUCT_ACTIONS}{/if}

			<div class="clear"></div>
		</div>
		<ul id="usefull_link_block">
			{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
			<li class="print"><a href="javascript:print();">{l s='Print'}</a></li>
			{if $have_image && !$jqZoomEnabled}
			{/if}
		</ul>

		</form>
		{/if}
		{if isset($HOOK_EXTRA_RIGHT) && $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
	</div>

</div>

(easiest to find searching for $HOOK_EXTRA_RIGHT )

and save:

 

then change the css file:

edit file themes/BlackRed/css/product.css (BACKUP first!)

find and edit:

 

/* link list */

#usefull_link_block {

list-style-type:none;

margin-top:20px;         <-- change to a negative number, like -50px or so, check with your own site what amount looks good

}

and save. Reload product page and check.

 

Hope that does the trick.

pascal

[okaty]

Thank you Pascal !

 

The facebook share, and print buton are positioned how i wanted them. They move up and down acordingly to the atributes number from my products. I also enabled the breadcrumb_top.tpl. You can see the gap from homepage and the fact that the links from within the breadcrumb aren't working

[PascalVG]

For breadcrumb,

try this (global.css):

.breadcrumb {

margin-bottom: -12px;     <--- change this

margin-top: 176px;            <-change this

margin-left: 20px;

font-size: 12px;

}

 

Hope that helps,

pascal.

[okaty]

I want that gap to be so big. But on the homepage i don't want the bredcrumb to be visible. Like the regular bredcrumb, it only apears when you enter a subcategory or product, but not on homepage. That's what i want to achieve. And i saw that in Chrome the links from breadcrumb aren't working, and in mozila and firefox the breadcrumb remains behind the topmenu. 

[PascalVG]

Hi okaty,

I see you totally took out the breadcrumb. Is that what you want it to be, or not?

I saw you added a padding-top:50px to the #columns css code (global.css, line 54). You might consider to make it a margin-top:50px, really moving the block down, not the contents within the block.

 

Let me know if there's more to do with the breadcrumb...

pascal