468px banner in Metro theme header area

Community Forums Forums Design Tips and Tricks 468px banner in Metro theme header area

This topic is: not resolved

Tagged: , ,

This topic contains 5 replies, has 4 voices, and was last updated by  triggers 10 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #16709

    stl99
    Participant
    Post count: 28

    Hi there,

    I’m relatively new to StudioPress and using the new Metro theme now. I’m wondering how to add a 468px banner to the header without affecting the overall layout responsiveness of the theme.

    Right now adding a banner in the header widget area results in a shrunk version of this banner as the logo/header image area is quite big..

    Any help would be highly appreciated!

    Cheers,
    Thomas

    #16711

    braddalton
    Participant
    Post count: 9413

    What are the exact dimensions of the image (width and height)?

    Do you want it in the header or header right widget area?


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #16719

    stl99
    Participant
    Post count: 28

    Hi,

    The banner image has a regular 468 x 60 format and my logo has the format 280 x 70. The banner should be inserted in the header widget where in the Metro theme the search field is located as default.

    Cheers,

    Thomas

    #17351

    stl99
    Participant
    Post count: 28

    I happen to have the News theme files and used its css with some modifications on the Metro theme and it seems to work (the only thing I didn’t successfully do was to have the logo being centered when the banner is displayed below it).


    #title-area {
    float: left;
    overflow: hidden;
    padding: 18px 0 0 20px;
    width: 298px;
    }
    #header .widget-area {
    float: right;
    padding: 14px 0 0;
    width: 468px;
    }
    @media only screen and (max-width: 1024px) {
    #header .widget-area {
    padding: 0 0 10px 0;
    text-align: center;
    width: 100%;
    }
    #title-area {
    float: none;
    text-align: center;
    width: 100%;
    }
    .header-image #title {
    min-height: 70px;
    }
    }

    #18165

    sanjeev
    Participant
    Post count: 34

    Ok, I have changed it to show it correctly on my site http://makewebworld.com, still work in progress but that piece is working fine.

    Here are the changes which I have done in the style.css :

    1) Find header .widget-area and split that section as mentioned below:

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar,
    .subnav-left {
    width: 31.111111111%; /* 336px / 1080px */
    }

    #header .widget-area {
    width: 43.333333333%; /* 468px / 1080px */
    }

    2) Find title-area and split that as mentioned below:

    .content-sidebar #content,
    .sidebar-content #content {
    width: 65.555555555%; /* 708px / 1080px */
    }

    #title-area {
    width: 53.333333333%; /* 576px / 1080px */
    }

    Once it is running fine, you can check it at http://www.studiopress.com/responsive/ for responsiveness.

    Thanks,

    Sanjeev


    Meet me at: Make Web World

    #69574

    triggers
    Participant
    Post count: 35

    I have the Metro theme and I’ve been trying to change my header.
    What size should i be making the Illustrator file. I’ve tried sizes down to 40 pixels in the wdth but it doesn;t crop it right. It cuts off the height and sometimes to expand the to the full width of the header.

    I’n trying to replace the current logo with contentconnections at this link.

    http://blog.contenttriggers.com/wp-admin/themes.php?page=custom-header&step=1&_wpnonce-custom-header-upload=a53f0a47c9&file=1031

    Thanks

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

You must be logged in to reply to this topic.