X-Cart: shopping cart software

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)

Chill-Tek 12-27-2007 04:27 PM

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

PengHead007 12-30-2007 09:10 AM

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;
}


sales@webosusa.com 01-10-2008 10:05 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Did not work on my website.

sales@webosusa.com 01-15-2008 11:28 PM

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!

sales@webosusa.com 01-15-2008 11:30 PM

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?

elmirage001 03-09-2008 08:25 PM

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

Freakmode 03-10-2008 11:49 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Thanks - worked first time out the trap for us.

Vacman 03-12-2008 06:52 PM

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.

elmirage001 03-13-2008 08:16 AM

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}
&nbsp;</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

Vacman 03-13-2008 08:38 AM

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.

stevep 04-24-2008 09:58 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
would advise anyone not to use this code as it broke the cart system on my site.

Vacman 04-24-2008 10:06 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
I would advise anyone to go ahead and use this code as installed CORRECTLY as the instructions indicate it will NOT break your cart system on your site.

I installed it on our 4.0.16 system as well as our 4.1.8 system. It works just fine.... BTW both of my system are HEAVILY modified.

imexhouse 04-24-2008 10:07 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
That's rather a bold statement, stevep, given how many people use it successfully, including me.

cyberdriveway 04-24-2008 10:10 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Yep... works for me too!

stevep 04-24-2008 10:13 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
well i have just spend 6 days trying to see why my customer are not able to add products to the cart, the x-cart team nailed it down to this mod.

imexhouse 04-24-2008 10:22 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
there must be more to it, perhaps implementaion of the mod on your customers' x-cart, because when installed properly, it looks and works great.

Vacman 04-24-2008 10:43 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Besides, were talking CSS here - not php or hard links...

If it "broke" your cart, I would take a hard look at what you changed from the installation instructions.

bigmaggot 04-29-2008 06:19 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
if this is based on philj rounded corners it broke mine too.

stevep 04-29-2008 07:39 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
cheers bigmaggot thought just me, have you found any other mod that may work.

bigmaggot 04-29-2008 07:51 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
haven't investigated it any further but would like to get something sorted, some bizarre reason it was intermittent.

stevep 04-29-2008 07:57 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
yes same here got the x-cart guys to look into it for me and that was the problem took off works fine know.

PhilJ 04-29-2008 09:56 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
This mod has nothing to do with me, read the first post.

If it doesn't work, then it means you've got incorrectly nested divs.

embroodles 05-03-2008 11:52 AM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
I love this thank you ,im new and this made a drastic look change to the site which was amazing.My only question is the side boxes on the right seem to be a bit off the page ,what do I need to change to get them back on.
http:www.embroodles.com

thanks
bill

annoyed 05-04-2008 03:00 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Bill,
It appears you have several problems which may have all eminated from the rounded box code.
The featured products area shows blank space at both the top and bottom of the white area alloted for these products as do the boxes inside this showing each product.
Check your rounded box code against the original for any extra <p>, </p> or even &nbsp tags. One of the easiest ways to crash test this is to comment out one tag at a time until you find the one causing the problem.
I remember seeing this error a while ago when I used this code but can't remember which line it was I changed to fix it. However because it's only in your featured products section there is little need for you to crash test the menu files that make up the left and right side boxes.
The extentsion beyond the right of screen is only an issue in IE, Firefox shows the rounded corners of the right hand boxes so without getting too deep into it I would suggest looking at your CSS first and seeing if your borders are too wide.

embroodles 05-04-2008 06:35 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Ok I fixed most of it but if you look back at my products page in the center you see the inside corners of the tabs are missing ,any ideas and where to fix this ,im sure its something I did.
Bill

embroodles.com

annoyed 05-04-2008 07:08 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
There is actually more than just the inside corners missing.
IE shows several bits missing including the right hand side verticle border for the second and third product, whereas Firefox shows the box side correctly (still missing the inside corners as you said).
You need to keep looking at the code for the products because the rounded corner coding is working fine for all except these boxes which suggests it's one slight error in coding somewhere.
Without being able to test it right now I'd suggest firstly looking at the code
<h1 class="color_a"></h1> and maybe commenting it out to see if it changes anything because you aren't actually adding any h1 tag to the box in this instance.
Another possible change would be to add &nbsp: to the <h1> tag so that it atleast creates a space in there I have had success with both but I have always used edited versions of this code.
The right hand menu still goes off the screen in IE (but not in FF) maybe the two issues are connected (although possibly not) but it might be a good idea to work on one at a time and if the box error fixes the menu fine, if not attack that once the boxes are fixed.

embroodles 05-05-2008 03:29 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Annoyed I am very new to this ,when I went back ,I reinstalled the backup then re did all the code which fixed the problem but then I did the xrounded fix and thats when the space occured above the frame the blue top ,I changed it back and this is when I lose those inside corners and the rest of what you talked about .Where do I go to look for this problem .Sorry need a little more direction my scripting skills are slower then Corkey from life goes on.;
Bill

embroodles 05-06-2008 05:11 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Ok I tried it all again ,I restored all the origianls and started again from scratch ,when I change it backto xrounded center in DIAGTPL it looks better but still cant figure out why in the hell its doing it

annoyed 05-06-2008 05:17 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
My replying skills seem to be just as slow.

I've been playing around with this on my dev server and while I'm able to replicate your problems I'm not yet able to come up with a complete fix.

I've made several changes to the coding and even taken out the colour of the top section to make the whole box the same as the background but with a grey border and this works quite well, also means there isn't a blank bar or any colour at the top of the box doing nothing.

The problem I've run into and not yet found a way around is that IE handles the change on the Featured Product list fine but when it comes to the product desciption page the box is not drawn correctly.

The missing lines and the lines extending past the right of screen are also to do with IE and this script but that will either go away when the coding is made to work or can be easily changed once it is working.

This is partly why I stopped using the rounded corner code on the products, in all the other sections it works perfectly.

embroodles 05-06-2008 05:25 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Ok maybe this is a question that may help , how or what would I remove or add just to take the frames of the images in the center box ,that seems to be the major noticable ugly , I am going to go back and recheck all my images.Is there a way to lock the images to a size when they appear in there or should I just make them smaller .

annoyed 05-06-2008 06:07 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
1 Attachment(s)
Sorry but I'm not 100% sure what you mean, however I have just reworked things and my dev site is now showing white boxes with grey lines and rounded corners around each product in the featured products list.
(See attached)
Having re-read the original coding in this thread and implemented it with a few minor modifications I've managed to get this to work.
Apart from changing the CSS to suit my needs the main change I made was in the location of the coding in the tpl shown in the first post because my tpl is completely different to that shown.

If this is what your looking to replicate let me know and I'll show you the steps I went through otherwise have another go and describing what you meant in your last post and I'll see what I can do

Also the error I spoke about in my last post was due to me playing around with the wrong files so ignore that bit.

Attachment 931

embroodles 05-06-2008 06:27 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Hey if that works that would be great to try ,sorry ,my communication is poor ,what I meant was just the frame around the pictures ,make them free standing but Ill try that .Im gonna PM you so when you get a second please go read.
thanks for your help.
bill

beastro 05-13-2008 06:14 AM

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

I am trying to get in touch with you since 2 weeks about purchasing your css template, but have not received any replies from you. Please drop me a message with information how to contact you.


Thank you

Berthold

beetlejuice 06-27-2008 02:42 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
1 Attachment(s)
Would anyone know why this is happening (see attachment) ?

I've spent hours trying to remove the thick white line above the title text and surrender. Only in Firefox 3. IE7 is fine.
I even copied the css from another site that I have used this mod on and is viewing correctly in FF3, and still I have this line showing. I copied the menu.tpl from the "good" site to this one and it still remains, Bah!

I'm too young to go bald ripping my hair out.

typologist 06-27-2008 04:57 PM

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

Originally Posted by beetlejuice
Would anyone know why this is happening (see attachment) ?

I've spent hours trying to remove the thick white line above the title text and surrender. Only in Firefox 3. IE7 is fine.
I even copied the css from another site that I have used this mod on and is viewing correctly in FF3, and still I have this line showing. I copied the menu.tpl from the "good" site to this one and it still remains, Bah!

I'm too young to go bald ripping my hair out.


This is probably because the size of the font, or the margin/padding above the text in the headers. However, It would help to see your code ;)

beetlejuice 06-27-2008 05:02 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
G'day typo,

Here is the code

Quote:

/*Round corner sideboxes*/

.xrounded h1, .zrounded h1 {
margin:0;
font-size:1.3em;
padding:0 15px 3px 8px;
border-bottom:1px solid #FFFFFF;
}
.xrounded p, .zrounded p {
margin:0;
padding:5px 0;
font-size:10px;
line-height:125%;
}
.xrounded {
background: transparent;
width:100%; /*Adjust the width here*/
float:left;
margin:0 0 10px 0;
line-height:125%;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background: transparent;
border-left:1px solid #00aeef;
border-right:1px solid #00aeef;
}
.xb1 {
margin:0 5px;
background:#00aeef;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #00aeef;
border-width:0 1px;
height:auto;
background: transparent;
}

div.xboxcontent div{
padding: 0 4px 0 8Px;

}

* html .xboxcontent {
height:0px;
}



One thing I've noticed is that changing anything here:

.xrounded h1, .zrounded h1 {
margin:0;
font-size:1.3em;
padding:0 15px 3px 8px;
border-bottom:1px solid #FFFFFF;
}

does not alter the "view" in any way. In other words changing 1.3em to 1.5 or 1.1 does not alter the site at all, yet on the other site where I have this working it does as expected. If I change the padding nothing changes on the site.


Thanks for taking a look

annoyed 06-28-2008 05:52 PM

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

I've seen this error before on the rounded box code and I don't believe its got anything to do with the font.
Padding and margins are possible but if you haven't changed any sizes from the way x-cart does them in an original config then I'd suggest the problem isn't there either however it's worth checking them to make sure everything fits properly.
Since you have used code from another website then I'd suggest the problem might be similar to one mentioned above about extra or not needed <p> tags.
I've used this code on several occasions (both as is and edited) and in some cases I have found that there are tags with the coding listed in the first post that can cause errors on some sites.
Given that your site is showing an extra or a blank line I'd suggest your first thing to check would be tags like <p> or <br> or any other that produces white space. Just remove or comment out each line that you might suspect as the problem and if it doesn't work take out the comments and try the next line until you find the offending line.
If this doesn't work give us a web address so we can see the code as it is on your site.

beetlejuice 06-28-2008 06:12 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Found the sucker :-)

had an extra blank px two lines above the rounded corner css. Crazy why it only showed up in FF3 on the customer side. Admin and both in IE7 were perfect.

Thanks for the replies.

Stinkweasels 07-06-2008 12:35 PM

Re: Pure CSS Rounded Boxes! (no images, no tables)
 
Is there an adjustment to make the curves smoother? It looks a little dodgey in the dialog box on my site?

QVS 08-20-2008 07:20 AM

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

Originally Posted by beetlejuice
Found the sucker :-)

had an extra blank px two lines above the rounded corner css. Crazy why it only showed up in FF3 on the customer side. Admin and both in IE7 were perfect.

Thanks for the replies.


hi i am having the same problem as you were.
Is there any chance you could tell me the actual bit of code you edited to get this working as i cannot work out your post above. For instance i have gone into the skin.css and looked at the css and tried editing different snippets but still cannot get it to work.

thx.


All times are GMT -8. The time now is 12:33 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.