[Anonymous]

Anonymous

#4216

Hey Guys,

When I use widgets in a right column, they have always rounded corners. In the footer widget-area, widgets have squared corners. Since the new version 1.6, the theme consits of many rectangels, the round corners don’t look well in combination with the these changes. Is there an option (e.g. via Custom CSS, or it would be great if you could implement this feature within theme-options page in the next release) to make the widgets in the left or right sidebars look like the widgets in the footer? I think this would look much better than the actual style.

I use Graphene 1.7 beta.

Thanks.

[Kenneth John Odle]

Kenneth John Odle

#27613

Just off the top of my head, try this:

.sidebar h3 {border-radius:none;}

But using Firebug will help you to pinpoint the exact element you need to change.

[Anonymous]

Anonymous

#27614

Thank you Kenneth,

It looks great. Your code didn’t work this way, I had to replace “none” into “0px”. But thank you for your tip.

[Anonymous]

Anonymous

#27615

I don’t mean to jump in and “hijack” the thread. But I’ve noticed sometimes you must use “none” and sometimes you must use “0px” when trying to eliminate a certain property.

I wonder if there is a rule to when one must be used over the other??

[Kenneth John Odle]

Kenneth John Odle

#27616

I have wondered about this, too. I guess it’s time to do some experimenting.

[Syahir Hakim]

Syahir Hakim

#27617

For properties that need numerical values, you use 0. For properties whose features are defined by other than numerical values, you use none.

Examples:

border-radius: 0

By definition, radius must be some numerical value. Even though border radius of 0 effectively means no radius, you must have some numerical value to define a radius other than 0.

border: none

Even though you would think that border needs numerical value to define the width of the border, in this case border is actually a shorthand of multiple border properties. Specifically, you can specify the following properties of the border inside just that single line of border: values property:

border: <border-width> <border-style> <border-colour>

As you can probably guess, border-width takes numerical value, e.g. 0.

border-style takes the type of style to use, e.g. solid for solid line, or simply none, means no style, which effectively means no border.

border-colour takes a colour value to be applied to the border.

So when you write border: none, it’s the same as writing border-style: none. When writing border: 0, it’s the same as writing border-width: 0. So in this case, because of the shorthand property border, both 0 and none will work.

Other examples:

margin: 0

padding: 0

list-style: none

background: none

text-decoration: none

Note that it’s not necessary to write 0px. Just 0 will do.

[Anonymous]

Anonymous

#27618

Syahir, you are a vast encyclopedia of information.

Thank you for the detailed, thorough, easily understandable explanation!