Rounded corner background color of Block header

Rounded corner background color of Block header

by Frankie Kam -
Number of replies: 3
Picture of Plugin developers

Hi

Can anyone give me an idea how to remove (make invisible) the tips of the rounded corners? I've used a large image file as a watermark on my coursepage. The result is that the white background colour of the tips of the rounded corners of the blocks show up.

Regards
Frankie Kam

Average of ratings: -
In reply to Frankie Kam

Re: Rounded corner background color of Block header

by David Scotson -
.block { background: none;}

That should get rid of the colors in the corners. If the white color background in the rest of the block disappears at the same time you can bring it back with:

.block .content { background-color: #fff;}

You could also make the top of the .block have rounded corners to match the .block .header, but sometimes that can give weird results so it's probably easier to remove the background color entirely.
In reply to Frankie Kam

Re: Rounded corner background color of Block header

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Frankie,

The way I would fix this normally is as follows...

.block,
.block .header {
border-radius: 10px; /** or whatever value you are using **/
}

The same goes for any element that is layered. You have to include them all or do as David suggests, but then you end up having to adjust other things.

Cheers

Mary

In reply to Mary Evans

Re: Rounded corner background color of Block header

by Frankie Kam -
Picture of Plugin developers

Hi Mary

Thanks for that elegant solution. It worked. For now, I don't see any adverse or minor side effects. So, so far so good...heh.

David, thanks for being the first to come to my aid. I think I didn't apply your code correctly, so it didn't work, but thanks anyway since I did learn more about CSS. smile

Frankie Kam