Community Forums › Forums › Archived Forums › Design Tips and Tricks › 468px banner in Metro theme header area
- This topic has 5 replies, 4 voices, and was last updated 10 years, 5 months ago by triggers.
-
AuthorPosts
-
January 31, 2013 at 4:13 am #16709stl99Member
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,
ThomasJanuary 31, 2013 at 4:40 am #16711Brad DaltonParticipantWhat are the exact dimensions of the image (width and height)?
Do you want it in the header or header right widget area?
January 31, 2013 at 5:32 am #16719stl99MemberHi,
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
February 2, 2013 at 9:04 am #17351stl99MemberI 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;
}
}
February 5, 2013 at 4:22 am #18165sanjeevParticipantOk, 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
October 28, 2013 at 9:42 pm #69574triggersMemberI 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=1031Thanks
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.