X-Cart forums

[Christofer]

Hello there, i am playing with the main .css to make some cosmetic changes. I tried to change the header height coz i don't like the blank space between the header and container, but when i make smaller that space i saw that the breadcrumb became not clickable.

After a small search i saw that when you are in a product, in the blank space it appears the "Printable version", so probably when i make that blank space smaller it conflicts the div with the breadcrumb div.. So anyone knows how to put the printable version in the same line with the breadcrumb?

If that is not possible, then i think i can put it somewhere near the products options? (i don't mind to have the button printable version on the categories, i just want it on the products, that's why i say if it is possible to move it in the products, near to product options.. of course if it can't be on the line of breadcrumb)

any advice?

[ARW VISIONS]

It's possible. How comfortable are you with the .tpl system and CSS?

[Christofer]

with .tpl i am newbie with the whole meaning of the word. With css im ok, i am using it the last years with my sites and my last shop.. are you planning to tell me exactly the code or just to give me directions?

[ARW VISIONS]

WellI guess I could tell you excatly how to do it.

[Christofer]

Originally Posted by Ashley

WellI guess I could tell you excatly how to do it.

that would be great if you can do it..

[ARW VISIONS]

Back up head.tpl, home.tpl, and main.css

Find this code in head.tpl

{if $printable_link_visible}
<div class="printable-bar">
<a href="{$php_url.url}?printable=Y{if $php_url.query_string ne ''}&amp;{$php_url.query_string|amp}{/if}">{$lng.lbl_printable_version}</a>
</div>
{/if}

Cut and paste it directly after this code in home.tpl

{include file="customer/bread_crumbs.tpl"}


now in main.css

find this code

.line3 .printable-bar {
position: absolute;
top: 6px;
right: 186px;
height: 18px;
}
.line3 .printable-bar a:link,
.line3 .printable-bar a:visited,
.line3 .printable-bar a:hover,
.line3 .printable-bar a:active
{
background: transparent url(images/printer.gif) no-repeat right top;
padding: 2px 20px 2px 0px;
color: #818891;
font-size: 10px;
line-height: 16px;
}

change it to this

.printable-bar {
position: absolute;
top: 0px;
right: 0px;
height: 18px;
}
.printable-bar a:link,
.printable-bar a:visited,
.printable-bar a:hover,
.printable-bar a:active
{
background: transparent url(images/printer.gif) no-repeat right top;
padding: 2px 20px 2px 0px;
color: #818891;
font-size: 10px;
line-height: 16px;
}

[Christofer]

ok! it worked like a charm my friend, thank you.
now if i make smaller the header height and the container top padding it will not affect the breadcrumb, right? i mean it will be still clickable..

also by deleting from head.tpl the :
╗{if $printable_link_visible}
<div class="printable-bar">
<a href="{$php_url.url}?printable=Y{if $php_url.query_string ne ''}&amp;{$php_url.query_string|amp}{/if}">{$lng.lbl_printable_version}</a>
</div>
{/if}

it remains a :
<div class="line3">
</div>


EDIT :
The breadcrumb still made not clickable after i make the header height and container border less. But after deleting from the head.tpl the :
<div class="line3">
</div>
it worked

coz the code you said to delete it was inside this div. So should i leave this div as it is, or should i delete it?

[ARW VISIONS]

whatever works.