468px banner in Metro theme header area

[stl99Participant Post count: 17]

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

[braddaltonParticipant Post count: 2553]

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

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

---

WordPress Developer & Consultant
Brad Dalton @ WP Sites – Click Here to Get Genesis Child Theme Tips Delivered.

[stl99Participant Post count: 17]

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

[stl99Participant Post count: 17]

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;
}
}


[sanjeevParticipant Post count: 22]

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

[Author]

Posts