Adding image in widget header area

Community Forums Forums Design Tips and Tricks Adding image in widget header area

This topic is: not resolved

This topic contains 6 replies, has 3 voices, and was last updated by  Tony @ AlphaBlossom 1 year, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #19953

    Zach
    Participant
    Post count: 6

    Trying to add an image in the header widget area (size 728×90) I found where it says “31.11111%” It seems to be 336 currently.  Tried making that 728px… No luck :(

    Sorry for the amateur question :)

    Thanks!

    #20035

    braddalton
    Participant
    Post count: 7458

    Could you please link to your site thanks.


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #20100

    Zach
    Participant
    Post count: 6
    #20211

    Zach
    Participant
    Post count: 6

    Any thoughts?

    #20232

    Tony @ AlphaBlossom
    Participant
    Post count: 351

    I would remove #header .widget-area from that grouping, and add it on it’s own:


    #header .widget-area {
    width: 728px;
    }

    You can change the width, add any padding, margin etc also. If your site is responsive, you can use % but you’ll have to figure something out as things get smaller.

    Also, you have to adjust #title-area (around line 471). I would do the same, remove it and add it to it’s own line and adjust the width so that they’ll both fit.

    That should do it!


    Tony Eppright | http://www.AlphaBlossom.com | @_alphablossom

    #20390

    Zach
    Participant
    Post count: 6

    Thanks!  That worked for the most part… But you’re right, as things get smaller on a desktop it begins to look a little funky (until the banner wraps below)  I’ve tried both PX and %, the % seems to work a little better.

    Thanks again,

    Z

     

    #20418

    Tony @ AlphaBlossom
    Participant
    Post count: 351

    Glad it helped. You can use media queries to control the css at various sizes, which will allow you to make sure it looks good on any device.


    Tony Eppright | http://www.AlphaBlossom.com | @_alphablossom

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

You must be logged in to reply to this topic.