Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 18, 2014 at 2:14 pm #239341
    Padlee

    Hi! I’ve been searching after how to make the header corners rounded, and i ended up finding this code:

    .nonfixed_header .header_bg, #header_meta, #header {
    -webkit-border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    }

    which, in part works, because it makes the top-header corners rounded, but it won’t look rounded, because behind there’s a white colored stuff that makes it look rectangular.
    Beside this, i’d also like to know how to unlock the boxed mode, i mean move the whole site up or down, so it won’t load sticked to the head and bottom. I mean something like this page has:
    http://www.o1.com/#tab-id-2

    And finally, i’d also like to know, how can i drop shadow in a way, that it will go with the rounded corner, and not straight down to nowhere. I have the shadow turned on, so you can see what i mean.
    The web i’m talking about is http://alianzacomercial.webege.com/

    Thanks in advance for your response, tell me if something’s not clear enough, so i re-explain it in another way.

    March 18, 2014 at 3:13 pm #239374
    Yigit

    Hey soundinnovators!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    .boxed#top { margin-top: 20px; margin-bottom: 20px; }
.header_color .header_bg { background-color: transparent; }
#header_main { background: white; }

    Best regards,
    Yigit

    March 18, 2014 at 3:26 pm #239386
    Padlee

    Hey, thank you very much! it did almost everything I need, still there’s one thing left, I understand this webpage ( http://www.dpskiphire.com/ ) has a big image, that’s why the shadow goes along with the edges, but is it possible to make it like this with CSS? i mean so the shadow doesn’t go all rectangular, but making it rounded too? I don’t mean the box at the bottom with the “brute edge”, but the upper part where the okay-showing house is. Also, let me know please if I may ask another question, or this topic is strictly for what I began with, and I should open a new thread for it. Thanks in advance!

    March 20, 2014 at 10:29 am #240609
    Dude

    Hi!

    Yes, just make sure that the shadow box also uses rounded corners:

    
.boxed#top {
border-radius: 9px;
}

    Best regards,
    Peter

    March 21, 2014 at 2:08 pm #241166
    Padlee

    Thanks a lot, that solved it!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Rounded header corners not working properly’ is closed to new replies.