[personal profile] jordannamorgan posting in [community profile] style_system
This is probably a question I should have asked a long time ago, but it's come up again in my updating of some old layouts, so. :Þ

A couple of different layouts I use (including my own journal and [community profile] prose_alchemist) not only give rounded corners to entries and modules, they insist on rounding off the corners--or sometimes half the corners--of my header images as well.

Is there a way I can get rid of all the rounded corners, and just have nice, straight, angular ones? I'd like to do that with the header images and entries/modules, although I'd settle for just not having the corners of my headers forcibly rounded off. (If I wanted them rounded, I would have made them that way, DW...)

EDIT: issue solved! CSS to do the trick is here in the comments. Thanks for the helps!

Date: 2015-08-31 12:00 pm (UTC)
branchandroot: oak against sky (Default)
From: [personal profile] branchandroot
Background images take the shape of whatever their container is, like looking through a cut-out at a picture underneath it, so if the #header container is rounded, a background image will be also. That's the "why it's happening" part. The "if you want sharp corners" part is therefore "tell the container not to have rounded corners".

The property you want to change is "border-radius". Try adding this to your custom css:

#header ( border-radius: none; }

You can also specify that for #entry, #footer, etc.

Date: 2015-09-01 01:53 am (UTC)
branchandroot: oak against sky (Default)
From: [personal profile] branchandroot
I'm not seeing the rule appearing in your styles (looking at the output code of your personal journal at the moment). Ah! If you copied and pasted it directly, that parenthese should be a curly brace. { instead of (. Typos, the bane of existence.

Date: 2015-09-01 12:12 pm (UTC)
branchandroot: oak against sky (Default)
From: [personal profile] branchandroot
Okay, poked at it a bit more this morning. The command is getting on there, but for some reason it's being over-written by the previous style. *frowns at it* Which really shouldn't be happening, and I wonder if this is actually a CSS3 bug, but in the meantime there's a fix! You just need to add !important, like so:

#header,
#entry,
#module,
#footer { border-radius: none !important; }

Date: 2015-09-02 01:10 am (UTC)
branchandroot: oak against sky (Default)
From: [personal profile] branchandroot
O_O I am completely boggled. That border-radius command is definitely in the official style css, which falls before the custom css, even if the first one had an !important (which it doesn't) there should be no way for it to override this. You might need to submit this as an actual bug via the Help desk.

Date: 2015-09-03 01:00 pm (UTC)
branchandroot: oak against sky (Default)
From: [personal profile] branchandroot
*facepalm* That'll teach me to double-check the 'nothing' parameter. Glad you got it all worked out!

Date: 2015-09-02 09:17 am (UTC)
vorador: (Default)
From: [personal profile] vorador
try adding this at the bottom of your custom css:

* {border-radius:0!important;}

Date: 2015-09-02 02:08 pm (UTC)
baggyeyes: Bugs Bunny and the Bull (Default)
From: [personal profile] baggyeyes
Have you looked at themes without rounded corners that you could use instead?

However, I tried [personal profile] vorador's suggestion of * {border-radius:0!important} in inspect element, and it worked. Put it at the top of your CSS overrides.
Edited Date: 2015-09-02 02:51 pm (UTC)

Profile

Dreamwidth style system discussion

July 2025

S M T W T F S
  123 45
6789101112
13141516171819
20212223242526
2728293031  

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 11th, 2025 04:23 am
Powered by Dreamwidth Studios