X-Cart forums

[beetlejuice]

Originally Posted by QVS

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.

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.

.ColumnTitles {
padding-left: 5px;
text-align: center;
width: 33%;
}
.Notes {
COLOR: #081589;
TEXT-DECORATION: none;
}

px;


/*Round corner sideboxes*/

.xrounded h1, .zrounded h1 {
margin:0;
font-size:1.4em;
padding:0 8px 3px 8px;
border-bottom:1px solid #037eba;
}
.xrounded p, .zrounded p {
margin:0;
padding:5px 0;
font-size:10px;
line-height:125%;
}

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

[JWait]

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.

/*Round Dialog boxes*/

.xrounded h1, .zrounded h1 {
margin:0; 
font-size:1.2em; 
padding:0 8px 3px 8px; /* CSS short hand rule first value is top then right, bottom and left */
border-bottom:1px solid #68C1FF; /*  This is the color of the bottom border */
}
.xrounded p, .zrounded p {
margin:0; 
padding:5px 0; 
font-size:10px;
line-height:125%;
}
.xrounded {
background: transparent;  /*  This is the background color of the top area */
width:100%;   /*Adjust the width here*/
float:left; 
margin:0 0 15px 0;
line-height:125%;
}
.xtop, .xbottom {
display:block; 
background:transparent;  /*  This is the background color of the top and bottom area */
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 #68C1FF;  /*  This is the color of the left side lines of the border */
border-right:1px solid #68C1FF; /*  This is the color of the right side lines of the border */
}
.xb1 {
margin:0 5px; 
background:#68C1FF;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #68C1FF; 
border-width:0 1px; 
height:auto;
background:#ffffff;
}

div.xboxcontent div{
padding: 0 4px 0 8px; /* CSS short hand rule first value is top then right, bottom and left */

}

* html .xboxcontent {
height:2px;
}

.color_a {
background-image: url(images/menu_bg.gif); /*  This is where you set an image for the top title area */
color:#ffffff;  /*  This is where you set the color for the top title area text */
}
.color_a A:link{
	COLOR: #fff; TEXT-DECORATION: none; /*  This is where you set the color for a link in the top title*/
}
.color_a A:visited {
	COLOR: #fff; TEXT-DECORATION: none; /*  This is where you set the color for a link in the top title*/
}

.color_a A:hover {
	COLOR: #0000cc; TEXT-DECORATION: underline; /*  This is where you set the color for a link in the top title*/
}

.color_a A:active  {
	COLOR: #fff; TEXT-DECORATION: none; /*  This is where you set the color for a link in the top title*/
}

I hope this help someone.

[Rob_D]

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

[Cyber Matrix]

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.

[fropirate]

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

[JWait]

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.

[fropirate]

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:

<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>
<h1 class="color_a">Recommended Products</h1>
<div class="xboxcontent">
<div>Customers who bought this product also bought the following products:
<ul class="RPItems">
    <li><a href="product.php?productid=563" class="ItemsList">Copper Elbows B - 2" x 3" And 3" x 4"</a></li>    
    <li><a href="product.php?productid=9" class="ItemsList">Historic and Obsolete Roofing Tile</a></li>    
    <li><a href="product.php?productid=748" class="ItemsList">Etched Glass</a></li>    
    <li><a href="product.php?productid=99" class="ItemsList">Waterbury Jr.</a></li>    
    <li><a href="product.php?productid=833" class="ItemsList">Starter</a></li>    
    <li><a href="product.php?productid=326" class="ItemsList">Super Duty 6" Adjustable Angle Roofing Bracket</a></li>    
    <li><a href="product.php?productid=568" class="ItemsList">Copper Elbows B - 2" x 3" And 3" x 4"</a></li>    
    <li><a href="product.php?productid=27" class="ItemsList">Ornamental Designs From Architectural Sheet Metal</a></li>    
    <li><a href="product.php?productid=762" class="ItemsList">Compound Molding</a></li>    
    <li><a href="product.php?productid=189" class="ItemsList">Casted Fleur-De-Lis Ornament</a></li>
</ul>
</div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

[limey66]

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

[JWait]

It should work, it isn't version specific.

[limey66]

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...