Joomla Templates Club 406,261 posts

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#145319

Hi there-

Testing new layout for our site, test site is at http://yourhoop.com/testnew

**EDIT 11/05 see working version at http://yourhoop.com See post below for fix for center columns***

We’re using a background image rather than bg color on the site.

We have noticed a problem of overlapping of images which destroys the rounded corners in div.module, module_menu, (module_blank which we added same rounded corner images to) , ja-container-wrap, ja-containerwrap-f fl and fl, ja-product-wrap and ja-content-wrap. We made sure all images were transparent. Colored corners still appeared due to images overlapping in CSS.

We put all images from orignal template back but left our images in module_blank, ja-productwrap and ja-botsl so you could better see what is happening.

As you will see, in the module locations and is easy to see in module_blank location with the Asus and Paypal banners, the rounded corner works in the bottom right location but the bottom right image extends past the rounded corners for the bottom left, top right and top left giving the appearace of squared corners.

Same issue occurs in the center column locations. You can see example in ja-productwrap at the top of page as well as at bottom, the Spotlight Location, ja-botsl. In this case, the center image starts at the top of that region and repeats all the way to the bottom, causing the colored corners to extend past the rounded image (you’ll see the gray vertical lines extending past the rounded corners).

Help???

[Css Magician Friend Css MagicianJoin date: October 2014Posts: 741Downloads:43Uploads:53 Thanks: 114 Thanked: 366 times in 263 posts]

#322508

Dear jesflow,

Same issue occurs in the center column locations You should style as follow :


#ja-productwrap {
background: url(../images/content-top.png) no-repeat center top;
display:block;
margin:0 0 10px;
padding:0;
width:100%;
}

#ja-product-bot {
background:url(../images/content-bot.png) no-repeat center bottom;
padding-bottom:20px;
padding-top:20px;
}

#ja-product-top {
background:url(../images/content-center.png) repeat-y left top;
padding:0 15px;
}


1 user says Thank You to Css Magician for this useful post

1. jesflow

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#322597

Aaaaah….that’s getting me there. Think I can tweak from here. Thanks!

[jesflow Friend jesflowJoin date: April 2009Posts: 24Downloads:0Uploads:2 Thanks: 6 Thanked: 11 times in 6 posts]

#322697

OK, that got me on a good start. A little tweaking and it’s working. htttp://www.yourhoop.com

Side columns are still overlapping so have just a rounded bottom right corner which actually looks cool. If anyone gets a fix for side columns, let’s post for other Zeolite users that may want to use a image background for their site!

The fix:
/* Products show */
#ja-productwrap {
background: url(../images/content-top.png) no-repeat center top;
display:block;
margin:0 0 10px;
padding:0;
width:100%;
}

#ja-product-top {
background:url(../images/content-center.png) repeat-y left top;
padding:0 15px;
}

#ja-product-bot {
background:url(../images/content-bot.png) no-repeat center bottom;
padding-bottom:20px;
padding-top:20px;
}

/* PRIMARY COLUMN
——————————————————— */
#ja-contentwrapper {
float: right;
clear: both;
display: block;
width: 70%;
}

#ja-contentwrap {
background: url(../images/content-top.png) no-repeat center top;
display:block;
margin:0 0 10px;
padding:0;
width:100%;
}

#ja-current-content {
background:url(../images/content-center.png) repeat-y left top;
margin-left:1px;
padding:10px 15px;
}

#ja-content {
background:url(../images/content-bot.png) no-repeat center bottom;
padding-bottom:34px;
padding-top:20px;
}

And for the Bottom Spotlight…

/* Bottom spotlight */
#ja-botsl {
background: url(../images/content-top1.png) no-repeat center top;
display:block;
margin:0 0 10px;
padding:0;
width:100%;
}

#ja-botsl-top {
background:url(../images/content-center1.png) repeat-y left top;
padding:0 15px;
padding-top:10px;
}

#ja-botsl-bot {
background:url(../images/content-bot1.png) no-repeat center bottom;
padding-bottom:20px;
padding-top:20px;
}

1 user says Thank You to jesflow for this useful post

1. Css Magician

[Author]

Posts