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

Hi QVS,

Don't know if this will help, but here is a snippet of what I was on about.
This piece of code is just at the end of my stores normal CSS and start of the rounded corner CSS. The area I had is highlighted and to the best of my knowledge.


Remember this was a couple of months ago and is to the best the old grey matter can recall.

Hope it gives you a little lead.

Beetlejuice

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

Here is the part of one of my skin1.css that makes the rounnded boxes with some added notes that may help someone. Please note that I chose not to put boxes around the individual products on the products page. You can also replicate the classes, renaming them from "x.." and "z..." to say "w..." and "y..." and by changing the properties (colors) you can have different colored boxes just by calling them in dialog.tpl and menu.tpl.

I hope this help someone.

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

I have the fashion mosaic skin, and had to do some tweaking to get this to work. I am slowly working my way through this stuff, but have a long way to go. I don't know what I would do without all the information in this forum. A big thank you to all of you that take your time to help us newbie's.

I am having some trouble in internet explorer. The edge of the right hand boxes are off the page a little. I have a feeling it may have to do with the two buttons in the "authentication box", but am far from sure.

I also can't seem to get the "information" box title to have white lettering. I fixed that in firefox (thanks to you folks in this thread).

There is a dark line on the top of the boxes, but my wife has given me a pass on that one. X-)

If anyone could point me in the approximate direction to fix the width issue in IE, I would really appreciate it.

www.jessicasonline.ca


My skin1_c.css file for this mod:

/*Round corner sideboxes*/

.xrounded h1, .zrounded h1 {
margin:0;
font-size:1.2em;
padding:0 8px 3px 8px;
border-bottom:1px solid #d0d0d0;
}
.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 15px 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:#fff;
BACKGROUND-IMAGE: URL(images/custom/vert_menu_border.gif);
border-left:1px solid #9A0D00;
border-right:1px solid #9A0D00;
}
.xb1 {
margin:0 5px;
background:#9A0D00;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #9A0D00;
border-width:0 1px;
height:auto;
background:#fff;
}

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

}

* html .xboxcontent {
height:1px;
}

.color_a {

BACKGROUND-IMAGE: URL(images/custom/menu_titlebg.gif);
BACKGROUND-POSITION: bottom left;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #DC1300;


/*background: #FF4421; Change the top part color here*/
color:#ffffff;
}

.color_a a{
color:#fff;
}

I also have a skin1.css file that seems to have an effect as well. I have to mod both of them:

/*Round corner sideboxes*/

.xrounded h1, .zrounded h1 {
margin:0;
font-size:1.2em;
padding:0 8px 3px 8px;
border-bottom:1px solid #d0d0d0;
}
.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 15px 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:#fff;
border-left:1px solid #d0d0d0;
border-right:1px solid #d0d0d0;
}
.xb1 {
margin:0 5px;
background:#d0d0d0;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #d0d0d0;
border-width:0 1px;
height:auto;
background:#fff;
}

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

}

* html .xboxcontent {
height:1px;
}

.color_a {
background: #FF4421; /* Change the top part color here*/
color:#ffffff;
}


Thanks!
Rob

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

I'm getting a lot of warning with Tidy for this mod when checking. The warning is trimming empty <b> and the recommended solution is remove the tag or type some text in it.

Is this something to be concern about? If so how do you fix it? I have tried several things and not able to resolve it.

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

I'm having a problem with the side borders being cut off with the rounded boxes. The weird thing is that this only happens with the recommended products box.

Here's a snapshot:
http://www.oldworlddistributors.com/images/boxproblem.jpg

Any advice would be awesome, thanks!

Update:
New shot from Internet Explorer (previous was firefox). The sides are cut off also.
http://www.oldworlddistributors.com/images/boxproblem2.jpg

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

Fropirate - Gaps are usually caused by an errant <p> or <br />

Rob_D - you should only be using one skin1 stylesheet. Is skin1.css hard-coded somewhere instead of using {$SkinDir}/{#CSSFile#} ? Also check you skin_c.css for missing semi-colons and closing brackets. Everything after that will be ignored, its amazing how important those things are. :)

My best guess about things moving off the screen is that usually there is something (a spacer.gif ?) between the "central area" and the "menu area".

Cyber Matrix - The reason Tidy is showing empty tags is that in reality they are... looking at the code...
"<b class="xtop"><b class="xb1"></b>class="xb2 color_a">"
both "<b>" tags are empty, but it is the class that is called that is important, and that is what makes it work. I would ignore Tidy on this one.

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

EDIT: I solved this problem by ADDING a <br / > after the </ul > in recommends.tpl. Now there is a little extra space at the bottom of the box, but at least it is closed up right.

--

I was able to resolve the cut-off sides issue by changing the xrounded width to 98% instead of 100%, but I can't seem to find anything that's causing that line break. Here's an html snippet from the recommended products section on one of my product pages:

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

Hello,
I would love to implement this on my site...rounded looks so much better than square...will it work on 4.017?

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

It should work, it isn't version specific.

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

Hi...
I tried it in the admin section as a test ...just doing the side boxes and they vanished...just the text remained.( at least I've learned to back up the code to notebook before changing anything so I can easily revert back:-)..do I have to do the front end and back end before it will work properly ...not sure I want t do it if its going to be glitchy or time consuming...I just don't have the time to play around to much...I wish X-cart would implement this from the start its such an obvious improvement. Input appreciated...

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

Since the main modifications are done to dialog.tpl (the center section), and menu.tpl (the columns), and these templates are used on both the admin and the customer side, you can not do it half way. The reason the boxes "disappeared" is that the class that controls them is no longer being called in the stylesheet, being replaced by the new (rounded) classes. If the new classes are not in the stylesheet then there is nothing to display. Do you understand this? If not, let me know and I can try to explain further.

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

typologist... great mod. didn't display correctly with first install (wasn't showing box borders in ff, but after a couple tweaks all is good). i still need to find the area in the code to get the right side boxes to not be cutoff in i.e. (i'm sure this is a simple fix, just haven't attacked it yet).

however, i no longer have boxes, rounded or otherwise, on the admin side. they were there before correct? i've done so much today i can't remember if there were any to begin with. this isn't a huge issue, just something i noticed.

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

Did you add the xrounded classes to the skin1_admin.css stylesheet? Since dialog.tpl and menu.tpl are modified to remove the default classes then they will not use any classes unless they are added to the correct stylesheet.

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

I had the same problem, and I had a friend help me fix it. I think this is the code he changed:

From this:

.xrounded {
background: transparent;
width:100%; /*Adjust the width here*/
float:left;
margin:0 0 15px 0;
line-height:125%;

To this:

.xrounded {
background: transparent;
width:100%; /*Adjust the width here*/
float:inherit;
margin:0 0 15px 0;
line-height:125%;

Try that, and if it does not work, I will see if I can see another change he made.

Rob

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

Jwait... not sure if your comment was directed at me, but I did exactly, step by step, what typologist stated to do in post #1.

the 'tweaks' i mentioned i had to do after following the steps was to simply change in dialog.tpl <div class="xrounded"> to <div class="xroundedcenter">. then save. then change it back to <div class="xrounded">. whatever this did worked. middle headers went from having a split top on every page to a nice clean rounded box as what was intended by typologist.

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

worked like a charm rob... thanks!!!

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

Yes, in order for you to get boxes in the admin side you need to add the xrounded classes to the skin1_admin,css (this is mentioned in the original instructions).

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

ah yes... skin1_admin.css

i did that as well. followed the instructions exactly as described.

(attempted to post code but too many characters)


edit:
not sure what happened between then and now... but when i logged in to grab the code to paste here, the boxes magically appeared. weird.

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

LOL. Well, whenever you make a change to a template, it is usually a good idea to clear the templates cache. Look in admin - summary - tools.

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

so i've gone ahead and changed the box header background color to something more along the lines of our logo... and found the area in the ronded css code to change the box header font color to white... but i can't seem to get the Help box font color to change. am i missing something?

http://img55.imageshack.us/img55/6463/cssroundhelpboxfontcolonh1.jpg

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

"Help" is a different color because it a link. You need to add this to your stylesheet (skin1.css)

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

thanks again!

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

Hey JWait! I see you have done a great job supporting this. I have been off for a couple of months and now I see many posts here.

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

It is a great mod and should work with 4.2 without any problems.

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

Wonderful mod. I have read through this thread a couple times now and am still having the problem with the rounded boxes NOT showing in Firefox but it looks great in IE. I'm very weak with CSS, but have tried to hack a little with firebug, but no good results. I'm guessing it's something global, since I get the same look in the admin side with Firefox also. Any suggestions?

Adam

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

That is strange, usually it is IE that gives the problems.

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

You don't have Firefox set to view as IE do you?
(just curious)

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

Happy New Year!

I was adding this mod to multiple sites and it worked beautiful on 3 out of the four.
However the four was a HUGE mess.
The only thing different is it has more products and categories and that the "On Sale" Mod is running. Otherwise it is running pretty much the same. (I think)

On the "partial test site" (which is not a mirror, unfortunately) the files ran fine.
However, when I placed them on the real site things went a little screwy.
The left menus stretched across the screen and the middle menu and the right menus went down to the bottom. This will not work.

I'm not sure what I did wrong, but something is set wrong.
Any theories?
Any help would be greatly appreciated!!!!
I love this mod otherwise!
Thanks!

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

Is there any other differences in the stylesheets (skin1.css) between the two sites than just the rounded corners? Since basically all we are doing here is changing the "menu" and "dialog" containers it should not affect the tables.

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

Mine is up and running fine now. Thanks for the replies. It seems that there was a difference in how Firefox and IE cached to the pages, but all is great.

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

As far as I know there is nothing different, that's what makes this so frustrating!
They both got installed by default with the three column setup. (Real store and test store)
The other two sites (different live product sites) had to been modified from two to three columns.
That worked fine, after a little testing.
I am also running a new "menu" on the other sites (just type for now, wanted and image, but that's not working either), but this was suppose to get applied to this one as well.
It worked on the two other live stores? and the test store, with the same CSS from the live one with no problems.
I'm VERY new at this and have made few changes!
This was me branching out to try and make the site(s) better.
I'm only able to change the basics colours and such, so far.
However, as I said there is the "on sale" mod that appears in one menu that is not applied to the other sites?
I did try to patch the site(s) and the patches did not work out well, so that could have caused an issue? However I removed or restored it till it was working and haven't touched it since. The patches might be different between the sites.
That is the biggest difference I can think of.
I took the CSS from the original site and moved it to the test site to create the "teststore" version of it. So the only thing that wouldn't be on the "teststore" version would be the on sale mod and all the products and categories.
To me that shouldn't cause the effect I'm getting, as you said we are just changing the appearance.
But, what do I know?
I am looking at moving into the newest version of x-cart in next upgrade, but the CSS is completed different again, so that might be some time.
I would love to apply this mod in the mean time.
Hope that helps!

Thanks!

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

It has something to do with the menu.tpl file, as the dialog.tpl file does work on the live site.
However this is the same (and I do mean same) file that was used on the other sites.
But, the "on Sale" mod does appear to be moved around, outside of the regular menu.
Does this mean I can't have "On Sale" running in conjunction with the round corners?
That doesn't seem right.
Thanks!

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

Also, I was attempting to play around with my new "teststore" where v4.2.0 is installed.
And it doesn't work at all? (This is a fresh install with only colours/images altered)
I guess that is the price we pay for setting up the new install.
However, I can't move things over until I figure out how to at least colour it properly.
So, until then I wait for advice on the v4.1.10 problem.
Thanks! (again)

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

iWD,
What happens if you replace menu.tpl and dialog.tpl with the originals, do the left menus still stretched across the screen and the middle menu and the right menus went down to the bottom?

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

No when you replace the original files the windows all go back to normal.
Then there are no changes to anything, and I am back to square one.
Which is where the site currently resides.

Any thoughts?

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

OK, are we talking about a 4.1.x site or a 4.2.x site? The stylesheets are vastly different.

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

We are currently talking about a 4.1 Site.
However, I will likely be switching to 4.2 in the future, depending on if I can get the design to work for me.
The current issue is with the 4.1 site.
It is messing up the formating, but yet I don't know why?
However, if I am going to likely have to start from scratch from a new install to fix it, I would rather know how to do it for the new 4.2 site, as it will likely cause less of a headache.
If that makes sense.
If it would be easier to just do it to the 4.2 site, I can try that (but some adjustments have to be made as the current rounded corner mod doesn't do it).
But, I am running the 4.1 site currently and this is the error that is occurring when I try to set up the rounded boxes but the "teststore" (4.1) I'm on works fine.

Thanks!

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

The 4.1.x site would probably be easier to work with. Also, it is possible any mods you have will not work with 4.2.

Anyway, what happens when you do one step at a time?

Make the changes in the skin1.css stylesheet (and skin1_admin.css).
Then change the dialog.tpl and test it, both as a customer and admin, using as many web browsers as you have (be sure to clear the templates cache before checking).

When you are satisfied it works change to the new menu.tpl and test it again (be sure to clear the templates cache before checking).

Finally, check your "on Sale" mod and see if it works properly. If it does not have rounded corners check that it is using either menu.tpl or dialog.tpl depending on where it is located.

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

One Step at a time:
Step One:
CSS files are fine (I have left them running, as they are uneventful without the other files running, or so it appears.)

Step two:
[I'm not sure how to "clear the template cache"]
However, when adding the dialog.tpl here are the results:
MAC - Safari:
The extra dialogue menu I added is where it was (narrow however) and the cart and authentication menus are moved to it's right. These are all on the third column, right side.
Now, however it appears that I have four columns, though one is beyond the top bar.
When I was originally testing the "teststore" it was set to be "100%" width of the window and It had worked at the time (I do believe) however since then it has been set to a defined width for the next site I am working on currently. Would this have an effect?
MAC - FireFox: Appears Correctly
Windows - iE: Appears Correctly
Windows - Firefox: Appears Correctly

The "On Sale" mod is in the "products" menu [1st column on left] on the right side of the menu.
It is not it's own menu, and therefore is following the properties set out by the "product menu" one would think? Unless this is not how this mod is suppose to be set up, and therefore I must have set something wrong?

Admin appears fine across the board.

Step 3:
[I'm not sure how to "clear the template cache"]

In all listed browsers:
The menus stretch across and have realigned their listings, all the same however.

so looks they like this:

Bestsellers ------------------------------------------------>
Manufacturers --------------------------------------------->
Special -------------------------------------------------->
Help ---------------------------------------------------->
Products ------------> Sales & Sepecials (On Sale Mod is now trying to make it's own menu?)
Main----- My New dialogue Menu (text only)
---------Cart ( the section looks right)
---------Authentication
featured products (again as it should be)

Admin Section is in a similar state

How it's suppose to look:

Products MAIN New Menu
Bestsellers ^ same ^ CART
Manufacturers ^ same ^ Authentication
Special Featured Products
Help ^ same ^

So I'm not sure what I have done wrong, but it appears the safari doesn't like the dialog.tpl file either.
All do not like the menu.tpl file and I think it must have something to do with the On Sale mod.
Any thoughts?

If this can't be fixed, then I might just try upgrading it to the 4.2 for a new look.
If I can figure that one out.
But, if the On Sale Mod doesn't work, then I might have to look into another option.

Thanks!

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

Table Structure Should look like this:
Products ---------- MAIN -------------New Menu
Bestsellers-------- ^ same ^ ----------- CART
Manufacturers -----^ same ^ ------------Authentication
Special ------- Featured Products
Help-------------^ same ^

[Sorry still new to the forum and apparently plan spaces don't work]
Hopefully the other "illustration" is helpful.
If you would like/need screen shots I can get them, but don't like this running on my live site for too long, and as I said the "teststore" doesn't have the "on sale" mod and this might be where the problem resides.