16-9 change header image from circle to square

Community Forums Forums General Discussion 16-9 change header image from circle to square

This topic is: resolved

This topic contains 3 replies, has 3 voices, and was last updated by  RockyMtnTinyHouses 1 year ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #62138

    RockyMtnTinyHouses
    Participant
    Post count: 3

    I am trying to customize the header so my logo reads as a square, not as a circle. It would also be nice if I could make it larger to fill the allotted space on the sidebar. thanks!

    http://rockymountaintinyhouses.com/
    #62140

    wpspeak
    Participant
    Post count: 116

    Hi,

    This should be very easy to do.
    Open your style.css and look for this code:


    .site-header .avatar,
    .site-header .site-avatar img {
    border-radius: 50% 50% 50% 50%;
    display: block;
    float: none;
    height: 120px;
    margin: 0 auto 2.4rem;
    width: 120px;
    }

    You need to remove the border-radius property. For size, you can change the height and width. The default is 112px for both height and width.

    Hope that helps


    #62144

    DWooly824
    Participant
    Post count: 16

    Right now, there’s a border-radius creating the circle effect, and the height and width is 112px.

    Try something like:

    .site-header .avatar, .site-header .site-avatar img {border-radius:0; height:200px; width: 200px; }

    Hope that helps,
    Danica

    #62149

    RockyMtnTinyHouses
    Participant
    Post count: 3

    WPspeak, that did the trick! Thanks so much!

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

You must be logged in to reply to this topic.