Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

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

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #81  
Old 08-20-2008, 02:31 PM
  beetlejuice's Avatar 
beetlejuice beetlejuice is offline
 

eXpert
  
Join Date: Apr 2007
Posts: 251
 

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

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

Quote:
.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
__________________
XCart 4.5.4, 4.6.1, 4.64 stores
Many, many mods from Altered Cart
XCart Mods Reboot template
The XCart Store Templates and Mods
WCM CDSEO Pro
BCSE Rewards Points and Gallery Mods
and a few others
Reply With Quote
  #82  
Old 08-24-2008, 08:46 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
Code:
/*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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #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
  #84  
Old 09-10-2008, 09:04 AM
  Cyber Matrix's Avatar 
Cyber Matrix Cyber Matrix is offline
 

eXpert
  
Join Date: Dec 2006
Posts: 199
 

Default 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.
__________________
Cyber Matrix
-------------------
X-Cart 4.1.9
Reply With Quote
  #85  
Old 10-17-2008, 09:21 AM
 
fropirate fropirate is offline
 

Member
  
Join Date: May 2008
Posts: 24
 

Default 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
__________________
X-Cart Gold 4.1.10
www.oldworlddistributors.com - Live Store
www.coppercakestands.com - Live Store
--
My Website - www.frodesigns.com
Reply With Quote
  #86  
Old 10-18-2008, 07:35 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

Default 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.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #87  
Old 10-20-2008, 04:46 AM
 
fropirate fropirate is offline
 

Member
  
Join Date: May 2008
Posts: 24
 

Default 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:

Code:
<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>
__________________
X-Cart Gold 4.1.10
www.oldworlddistributors.com - Live Store
www.coppercakestands.com - Live Store
--
My Website - www.frodesigns.com
Reply With Quote
  #88  
Old 11-11-2008, 11:42 AM
  limey66's Avatar 
limey66 limey66 is offline
 

Senior Member
  
Join Date: Feb 2006
Location: N.Ontario, Canada
Posts: 190
 

Question 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?
__________________
Thanks Michelle.
www.herb-care.com

Version # 4.6.3
Reply With Quote
  #89  
Old 11-12-2008, 04:05 AM
  JWait's Avatar 
JWait JWait is offline
 

X-Man
  
Join Date: Nov 2005
Location: California
Posts: 2,440
 

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

It should work, it isn't version specific.
__________________
Two Separate X-Cart Stores
Version 4.4.4 Gold - X-AOM - Vivid Dreams Aquamarine (modified) - Linux
Mods - Newest Products - View All -, and a few others. Numerous upgrades from 4.0.x series.
Integrated with Stone Edge Order Manager + POS

Version 4.1.12 Gold (fresh install) - X-AOM - Linux
Mods - XCSEO free
Reply With Quote
  #90  
Old 11-12-2008, 05:34 AM
  limey66's Avatar 
limey66 limey66 is offline
 

Senior Member
  
Join Date: Feb 2006
Location: N.Ontario, Canada
Posts: 190
 

Default 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...
__________________
Thanks Michelle.
www.herb-care.com

Version # 4.6.3
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 04:52 PM.

   

 
X-Cart forums © 2001-2020