X-Cart forums - Pure CSS Rounded Boxes! (no images, no tables)

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

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Pure CSS Rounded Boxes! (no images, no tables) (https://forum.x-cart.com/showthread.php?t=33828)

Re: Pure CSS Rounded Boxes! (no images, no tables)

Quote:

Originally Posted by ramdial

try changing ** PADDING-RIGHT: 22px; *** in skin1.css. this is for wank3r

.VertMenuRightColumn {
VERTICAL-ALIGN: top;
PADDING-LEFT: 20px;
PADDING-RIGHT: 22p

This did help somewhat but now they are in towards the centre too far on some of the pages - particularly seems to be the help pages. I really want to keep this layout but it's needing a few tweeks.... www.autowirez.co.uk

Re: Pure CSS Rounded Boxes! (no images, no tables)

Thanks typologist - Your Pure CSS Rounded Boxes worked Great!

I used your code to modify the top tab navigation. I'm NOT a programmer so I surprised myself when it worked. I've included the code below in case anyone wants to use it.

You can see what it looks like here. The store isn't open so please don't try to buy anything yet.
http://www.golingerie.com/home.php?shopkey=1234

The CSS mods for the LINKS don't have any effect. Does anyone know why? I'm sure it's something simple that I'm missing.

I replaced everything in /skin1/customer/tab.tpl with this

NOTE: I'm not sure why but when I save this post a "space" is being insert in the word "title" so if you cut-n-paste you'll need to remove the space.

Quote:

<div class="xrounded">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a"></h1>
<div class="topTabNav">{$reading_direction_tag}{$tab_ti tle}</div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

I added this to /skin1/skin1.css BUT the LINK parts don't seem to have any effect

Quote:

.topTabNav {
FONT-SIZE: 14px;
FONT-WEIGHT: bold;
LINE-HEIGHT: 125%;
}
A.topTabNav:link {
COLOR: #000;
TEXT-DECORATION: none;
}
A.topTabNav:visited {
COLOR: #000;
TEXT-DECORATION: none;
}
A.topTabNav:hover {
COLOR: #FF0000;
TEXT-DECORATION: underline;
}
A.topTabNav:active {
COLOR: #081589;
TEXT-DECORATION: none;
}

Re: Pure CSS Rounded Boxes! (no images, no tables)

Did not work on my website.

Re: Pure CSS Rounded Boxes! (no images, no tables)

Works great now. I change here and there from other MODs that i had installed.

Thanks for the post!

Re: Pure CSS Rounded Boxes! (no images, no tables)

By the way...

I use on my product page the TABLE Holder. Contract the tables to be shorter. However this here does not seens to work around that. See here: http://www.webosusa.com/bra/product.php?productid=16148&cat=0&page=1

Can you tell me what can i change?

Almost forgot..... and the tumbnails on feature produts does not show totaly around on TOP of each. Can i change this...? how?

Re: Pure CSS Rounded Boxes! (no images, no tables)

Wonderful job typologist!

The only issue I'm having is with pagination. I have a 3 column site and when I have more products than 1 page allows the top paginagion works fine but the bottom pagination code is being displayed in the 3rd column instead of the middle column.

Is this happening to anyone else? Has anyone ssolved this yet?

Thanks!

Paul

Re: Pure CSS Rounded Boxes! (no images, no tables)

Thanks - worked first time out the trap for us.

Re: Pure CSS Rounded Boxes! (no images, no tables)

Like Paul, I too have the same pagination problem - Check out my site, and go to any of the category listings.

Re: Pure CSS Rounded Boxes! (no images, no tables)

Quote:

Originally Posted by Vacman

Like Paul, I too have the same pagination problem - Check out my site, and go to any of the category listings.

Hi Carl !

I fixed it on my site by doing the following:

In customer/main/subcategories.tpl find this code at the bottom and you'll see where I commented out the last line which is the second navigation.tpl that was showing in the 3rd column.

Quote:

{ include file="customer/main/navigation.tpl" }
{/if}
<hr size="1" width="100%" />
{include file="customer/main/products.tpl" products=$products}
{/if}
{if $products eq "" and $tmp eq "0"}
{$lng.txt_no_products_in_cat}
{/if}
{/capture}
{include file="dialog.tpl" title=$current_category.category content=$smarty.capture.dialog extra='width="100%"'}
{if $products eq ""}
{if $f_products ne ""}
<p />
{include file="customer/main/featured.tpl"}
{/if}
{/if}
{* include file="customer/main/navigation.tpl" *}

Next, use the following as the new dialog.tpl file. You can see that I added the include file navigation.tpl back but now it's inside the new dialog.tpl

Quote:

{* $Id: dialog.tpl,v 1.25 2005/12/20 08:50:49 max Exp $ *}
{if $printable ne ''}
{include file="dialog_printable.tpl"}
{else}
<div class="xrounded">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">{$title}</h1>
<div>{$content}
 </p></div>
<div>
{ include file="customer/main/navigation.tpl" }
</div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
{/if}

Let me know if for some reason it does not work for you.

Hope to see you soon!

Paul

Re: Pure CSS Rounded Boxes! (no images, no tables)

That fixed it! Thanks Paul!

And yes, we will be seeing you at the Pageant of Our Lord show this coming Wednesday night I believe.