Theme-Mantra: Styling the header with CSS

  • Resolved michaeltaube

    (@michaeltaube)


    11 years ago

    Hey,

    I am trying to give the header of the site a round corner on the left and right side.

    I tried different selectors but none of them worked e.g.

    header {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
    #masthead {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

    Can someone help me to find the selector I need and explain me how to find it. I checked the page with firebug but there are a lot of selectors for the header.

    By the way, I am using Mantra with the jetpack plugin.

    The blog I need help with is slowcooker-crockpot-vergleich.de.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Where are you adding the CSS?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    This works btw:

    #header {
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
}

    Thread Starter michaeltaube

    (@michaeltaube)

    11 years ago

    thank you! I am adding the CSS because I want that the page looks like I want and I don’t want to edit the image. Thank you for your code. THat helped me a lot. Can you explain me why you entered 

    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px
    overflow: hidden;

    This would help me to understand CSS better.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    I stole the majority of the code from: http://border-radius.com

    Then I realise that your image was protruding beyond your header container, you can see this in Firebug, and thought you need to put an overflow of hidden to stop that from happening.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Theme-Mantra: Styling the header with CSS’ is closed to new replies.