468px banner in Metro theme header area

[stl99]

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

[Brad Dalton]

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

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

---

Tutorials for StudioPress Themes.

[stl99]

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

[stl99]

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


[sanjeev]

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

---

Check Why I Love Genesis Framework So Much

[triggers]

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

[Author]

Posts