rounded boxes for menu.tpl
 

Hi, Does anyone out there know how to modify skin1.css and menu.tpl to look like the rectangle boxes on www.adobe.com

I figured the css used on adobe is .pod but there is a whole of code and I'm not sure which is relevant.

Also, how doI modify menu.tpl to use the .css file.

Thanks,
Jon

Re: rounded boxes for menu.tpl
 

Some nice mods for this in the Custom Mods forum.

Re: rounded boxes for menu.tpl
 

Hi Ryan, I have searched for rounded corners in custom mods but have come out short. The solution I'm looking for requires 8 image backgrounds. 1 for each corner and a bg image for each side. The look is simply different from anything else as there is a right drop shadow that requires images.

The css looks something like this. sorry I don't how how to put it into a code box like the rest.

.pod,
.promo-pod
{
margin-bottom: 1em;
}
.p2 h3 {
background: none;
border: none;
}
.w
{
margin-left: -6px;
}
.e
{
margin-right: -6px;
margin-left: 2px;
padding-bottom: 1px;
}
.n
{
margin-left: 6px;
margin-right: 6px;
padding-top: 6px;
}
.s
{
padding-bottom: 8px;
}
.p0 .pod-body
{
padding-left: 16px;
padding-right: 18px;
}
.p1 .pod-body,
.p2 .pod-body
{
padding-left: 8px;
padding-right: 10px;
}
#C1.p0 #C1-body .pod-body {
padding-right: 10px;
}
.p0 .pod-body>*:first-child
{
margin-left: -16px;
padding-left: 16px;
margin-right: -15px;
padding-right: 16px;
}
.p0 .pod-body .first-child
{
margin-left: -16px;
padding-left: 16px;
margin-right: -15px;
padding-right: 16px;
}
.p1 .pod-body>*:first-child,
.p2 .pod-body>*:first-child
{
margin-top: 0;
padding-top: 1px;
margin-left: -8px;
margin-right: -8px;
margin-bottom: 6px;
padding-top: 2px;
padding-right: 8px;
padding-bottom: 6px;
padding-left: 8px;
}
.p1 .pod-body .first-child,
.p2 .pod-body .first-child
{
margin-top: 0;
padding-top: 1px;
margin-left: -8px;
margin-right: -8px;
margin-bottom: 6px;
padding-top: 2px;
padding-right: 8px;
padding-bottom: 6px;
padding-left: 8px;
}
/* nested p1 */
#C1.p0 #C1-body .pod-body>*:first-child {
margin-right: -8px;
}
#C1.p0 #C1-body .pod-body .first-child {
margin-right: -8px;
}
.nw,
.ne,
.se,
.sw
{
background-repeat: no-repeat;
}
.nw,
.w,
.n
{
background-position: 0 0;
}
.ne,
.e
{
background-position: right 0;
}
.se
{
background-position: right bottom;
}
.sw,
.s
{
background-position: 0 bottom;
}
.w,
.e
{
background-repeat: repeat-y;
}
.n,
.s
{
background-repeat: repeat-x;
}
.nw.p0 /* AKA .p0.nw -- IE needs nw unspecified */
{
background-image: url("/images/nw.gif");
}
.p0 .ne
{
background-image: url("/images/ne.gif");
}
.p0 .se
{
background-image: url("/images/se.gif")
}
.p0 .sw
{
background-image: url("/images/sw.gif");
}
.p0 .w
{
background-image: url("/images/w.gif");
}
.p0 .e
{
background-color: #FFF;
background-image: url("/images/e.gif");
}
.p0 .n
{
background-color: #FFF;
background-image: url("/images/n.gif");
}
.p0 .s
{
background-color: #FFF;
background-image: url("/images/s.gif");
}
.p0 .pod-body>*:first-child
{
background-color: #FFF;
}
.p0 .first-child
{
background-color: #FFF;
}
#gecko.pod-p0 ol#depthpath
{
margin-top: 0;
margin-left: 2px;
padding-left: 0;
margin-right: 0;
padding-right: 0;
padding-top: 1px;
}

/* kind of hilarious Mac IE bug, somehow elements without the pod-top class are picking these styles up. FUBAR. */
.p0-top .n
{
background-image: url("/images/n.gif");
}
.nw.p0-top /*AKA .p0-top.nw*/
{
background-image: url("/images/nw.gif");
}
.p0-top .ne
{
background-image: url("/images/ne.gif");
}
/* \*/
.p0-top .pod-body>*:first-child
{
background-color: #DDD;
}
.p0-top .first-child
{
background-color: #DDD;
}
/* */
.nw.p1,
.nw.p2 /* AKA .p2.nw -- IE needs nw unspecified */
{
background-image: url("/images/nw.gif");
}
.p1 .ne,
.p2 .ne
{
background-image: url("/images/ne.gif");
}
.p1 .se,
.p2 .se
{
background-image: url("/images/se.gif")
}
.p1 .sw,
.p2 .sw
{
background-image: url("/images/sw.gif");
}
.p1 .w,
.p2 .w
{
background-image: url("/images/w.gif");
}
.p1 .e,
.p2 .e
{
background-color: #F3F3F3;
background-image: url("/images/e.gif");
}
.p1 .n,
.p2 .n
{
background-color: #F3F3F3;
background-image: url("/images/n.gif");
}
.p1 .s,
.p2 .s
{
background-color: #F3F3F3;
background-image: url("/images/s.gif");
}
.p1 .pod-body>*:first-child
{
background-color: #F3F3F3;
}
.p1 .first-child {
background-color: #F3F3F3;
}

/* kind of hilarious Mac IE bug, somehow elements without the pod-top class are picking these styles up. FUBAR. */
.p1-top .n
{
background-image: url("/images/n.gif");
}
.nw.p1-top /*AKA .p0-top.nw*/
{
background-image: url("/images/nw.gif");
}
.p1-top .ne
{
background-image: url("/images/ne.gif");
}
.p1-top .pod-body>*:first-child
{
background-color: #777;
color: #fff;
}
.p1-top .first-child {
color: #fff;
}
.p1-top .first-child,
.p1-top .n
{
background-color: #777;
}

/* kind of hilarious Mac IE bug, somehow elements without the pod-top class are picking these styles up. FUBAR. */
.p2-top .n
{
background-color: #DEDEDE;
background-image: url("/images/n.gif");
}
.nw.p2-top /*AKA .nw*/
{
background-image: url("/images/nw.gif");
}
.p2-top .ne
{
background-image: url("/images/ne.gif");
}
.p2-top .pod-body>*:first-child
{
background-color: #DEDEDE;
}
.p2-top .first-child
{
background-color: #DEDEDE;
}

.top-acc .pod-body>*:first-child
{
border-bottom: 2px solid #C00;
}
.top-acc .first-child
{
border-bottom: 2px solid #C00;
}
/* untransformed state */
.dyn-pod,
.dyn-pod .n,
.dyn-pod .ne
{
background-image: none;
}
.p2 ul li a
{
display: block;
}
.p2 div.hr {
padding: 0 8px;
font-size: 1px;
line-height: 1px;
height: 1px;
margin: 8px -8px;
}

If you could help me out with this I'd be willing to paypal you some. Please give me a quote.

Thanks,
Jon

Re: rounded boxes for menu.tpl
 

Hi Jon,

It seems to me that on www.xcartmods.co.uk, there was a little mod which does what you want.

Anyway, I certainly have it somewhere on my servers...

Cheers

Erick