X-Cart forums - Convert to CSS - one piece at a time

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Convert to CSS - one piece at a time (https://forum.x-cart.com/showthread.php?t=35882)

Re: Convert to CSS - one piece at a time

Would need to see how you have your header coded.

Re: Convert to CSS - one piece at a time

I figured it out after I kept playing with it. But here is the code and if any suggestions I'm all ears. I put the extra closing div tags in the rectangle_bottom.tpl if that is not where they go where would they go?

Code:

<div class="Headerbackgd">

<div class="HeadLogo"> <a href="{$http_location}/"><img src="{$ImagesDir}/logo.jpg" width="436" height="98" alt="{$smarty.capture.title|replace:"\n":""}"/></a></div>

    <div class="HeadRightBox">{if $usertype eq "C"}

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

{/if}

</div>

<div class="HeadLine">{if $usertype eq "C"}

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

{/if}

</div>

Re: Convert to CSS - one piece at a time

You need to close the <div> tag right in that file unless you want the headerbackgd class to be behind the whole site :) Also, if you are using float: you need to make sure to clear them.

Re: Convert to CSS - one piece at a time

I tried that code for the head.tpl

Got the first div no problem with just my logo sat in there.

Problem I have is my customer/search.tpl and my customer/top_menu.tpl currently sit in the same line.

That is horizontally the search is on the left and the menu in the middle.

Can only get it to work in a div if one sits above the other.

Any ideas on that one please?

Re: Convert to CSS - one piece at a time

You need to use the css property "float" to get things to sit next to each other horizontally, or they will always stack.

Re: Convert to CSS - one piece at a time

Thanks for that, looked up the float css stuff and got it to work, though I have the HeadRight on the left and the search box on the right.

One thing though, the div with the search box on the right is not as good as it could be, it has a 1 px gap at the bottom and a 2 px gap to the right, I have played with the padding and margins/borders, but cannot find why it is formatting like that.

I put another Div in to push the rest of the page back down as it all squashed together when I put the new divs in ! :-)

Here is what I have, note a few probably not needed extras in the css !

Code:

 

.HeadLine {

float:left;

width:44%;

padding: 3px;

margin:0;

}

.HeadRightBox

{

float:left;

width:55%;

padding: 1px;

margin:0;

BACKGROUND-COLOR: #ADDFEF;

border-left-width: 0px

MARGIN-RIGHT: 0 px;

BORDER: 0PX;

}

.HeadGapDiv

{

BACKGROUND-COLOR: #E7F3FF;

}

Here is the divs bit:

Code:

 

<div class="Headerbackgd">

<div class="HeadLogo"> <a href="{$http_location}/"><img class="logo" src="{$ImagesDir}/logo.jpg" width="800" height="120" alt="{$smarty.capture.title|replace:"\n":""}"/></a></div>

<div class="HeadRightBox">{if $usertype eq "C"}

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

{/if}

</div>

<div class="HeadLine">{if $usertype eq "C"}

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

{/if}

</div></div>

<div class="HeadGapDiv"><p></p></div>

Really noticing the shop starting to load much quicker now, thanks for all you lots help so far, much appreciated :-)

Re: Convert to CSS - one piece at a time

ok ignore above code, deosn't work in firefox apparently.

bit stuck now, so put old code back in.

Not easy this css stuff

Re: Convert to CSS - one piece at a time

I have mutliple columns layout for the categories and subs on a site with tables and I would like to convert it to css to clean up some of code. I have not been able to figure it out. How do you do it with all css?

Re: Convert to CSS - one piece at a time

That's the problem, first you have to know css inside out, so options are to buy a template and then modify or really get to know what you're doing.

Problem I have found is that tutorials on the internet are good but they do not account for what we are trying to do and doing it a bit at a time means you have divs conflicting with tables.

The whole object being to get rid of tables but the code is sat in so many sources it's a headache.

Think I am going to buy a template regardless of updating issues it's the easy quick fix.

Re: Convert to CSS - one piece at a time

The only css template that I'm aware of is http://www.cart-lab.com/X-Cart-version-41x-CSS-Template-p-113.html for x cart. Are there any others?