How on earth does this work?

[1DMF]

Hi,

I'm trying to alter a wordpress template menu BG colour.

The menu has curved ends, but I do not understand the image used nor the CSS that goes with it.

How does this work?

.sidebar_bottom {
    background: url("../images/skin-default.png") no-repeat scroll left -122px transparent;
    display: block;
    height: 26px;
}


.sidebar_top {
    background: url("../images/skin-default.png") no-repeat scroll left 0 transparent;
    display: block;
    height: 26px;
    margin: 8px 0 0;
}

which produces...

You will notice the top and bottom have curved edges.

Yet the imaged used 'skin-default.png' looks like this...

I don't understand how this works or how I alter the image/css to enable a different coloured menu background and keep the curved edges?

Your help is appreciated.

1DMF

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[darryncooke]

are you sure there is no other CSS at play here?

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

 

[spamjim]

skin-default.png is likely a CSS sprite, and as Darryn hints, there is likely more CSS to describe the sidebar background.

Firebug or your browser's developer tools are very useful in evaluating CMS-assembled pages.

 

[1DMF]

There is no other CSS that creates the bottom and top curves.

If I change it to

.sidebar_bottom, .sidebar_top {background:none;}

they go away!

NB. I used Firebug to find the CSS in the firstpalce ;-)

What's a CSS sprite? a PNG is a PNG isn't it?

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Free Dance Music Downloads

 

[spamjim]

CSS sprites are best defined via Google.

You have a CSS sprite there because the sidebar top and bottom are using the same image file but showing different parts of it through CSS. The top class shows 26 pixels of height from the top of the image. The bottom class shows 26 pixels of height after shifting our focus down 122 pixels.

If you cannot find a filler image that sits between the top and bottom div, then the background is likely rendered as a hex color: 343434. Search your CSS for "343434".