View Single Post
  #83  
Old 08-25-2008, 06:43 AM
 
Rob_D Rob_D is offline
 

Advanced Member
  
Join Date: Mar 2008
Posts: 62
 

Default 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
__________________
4.1.11
Rob Dolliver

www.jessicasonline.com
Xcart Skin - Fashion Mosaic
X-Cart 4 Level Horizonal Flyout Menus
alteredCart One Page Checkout
alteredCart Buy Together
CDSEO
Reply With Quote