Community Forums › Forums › Archived Forums › Design Tips and Tricks › Enterprise Pro header issues
- This topic has 5 replies, 3 voices, and was last updated 10 years, 1 month ago by DianeC.
-
AuthorPosts
-
March 2, 2014 at 3:53 pm #93093GinnyMember
Hi,
I am trying to put together a site using Enterprise Pro. I am having some issues with the header area. I have two main issues.
1. I want to put a header onto the site rather than use the tiny (for my purposes) 320x80 logo area I want to use the width of the site and i have changed the setting of 320px to 100% but now I am stuck on a couple of things. Where exactly do I put the header image and what size should it be/.
2. Since I changed the setting above the header right widget now is really far down, I want it back up at the top where it was originally. How do I achieve this?
Thanks you
http://www.jennybraithwaite.com/March 2, 2014 at 4:38 pm #93097emasaiParticipantYou are mixing up the two terms, header image is the large one that sits in the background of the header, either full width of the browser or within the header wrap. Logo is the little image that goes in the title area (Jenny Braithwaite) is the logo with the site description below.
Your header widget is too far down because you set the title area to 100% width.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 2, 2014 at 5:46 pm #93106GinnyMemberOkay so if I want a background image in the header area, what size should this be and where?
Will that over ride the logo?
Thanks
March 2, 2014 at 6:18 pm #93108emasaiParticipantIt depends whether you want a header image that fills the whole browser window or one that just fits in the space assigned to the header. Please read my post again it answers your question. There are two different css tags for header and header .wrap.
Do you have a web inspector? If you do, you can see exactly which tag does what. The logo is another animal which sits inside the header .wrap which sits inside the header. Like layers, the last one you add is always on top.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMarch 3, 2014 at 4:58 pm #93274DianeCMemberGinny, first put your title-area CSS back to how is was eg: 320?—80 & save.
Next: Prepare your image to the size you want - Your .wrap on this theme is ... 1140px wide, so make your image that wide.
Next: go to Admin Menu => Appearance => Header and follow the instructions to upload the header image and align as required -EDIT - MY apologies Ginny - I was looking at the wrong test theme at my end (its late here) - so ignore....
(Also: remember to keep or remove the TEXT (will depend on whether you want the site title/description text to show or not.)Doesn't have this option..I'll check the correct test theme and get back to you 🙂 apologies again
Hope that helpsMarch 3, 2014 at 6:08 pm #93288DianeCMemberHi again Ginny, maybe one of the mods can clarify further/correct.
Anyway, I've had a look at the theme header which has the option for TEXT or LOGO (added via appearance => header) and whilst you can add a wide image in CSS file for .site-header x eg: 1140 or wider - it depends what outcome you are wanting to achieve.
for example, to add say a decorative background image to the full header area, add a background to the .site-header in CSS:
.site-header {
background: url(http://pathtoryoururl.com/wp-content/uploads/2014/03/1140x150.jpg) no-repeat scroll center top rgba(0, 0, 0, 0);
min-height: 150px;
}
that will leave you with the TEXT site title & description - you can set that area wider too in functions file (but not 100%) so that the header right widget gets moved over to the right - You may also have to amend the CSS for it and probably reduce the CSS for the .site-header .widget-area (header right) as it's currently at 720pxIf you want a logo instead of the Text site title - you upload the logo image via the appearance => header - sized to the maximum space available (eg: 1140px is shared between your site title/logo area and the .site-header .widget-area (header right widget area).
Size a logo image to match any changes you make re: above - re the 320x80 dimensions in functions file and/or CSS.
You could remove the logo area but I'd not recommend it as it's meant to scale nicely for all devices. For example: if you added a logo to a wide header background image it would not look great as it scales down.
OK, I think I've done this whilst awake now - am hopeful something above makes sense/is clear enough to be of some help.
ZZzzzz -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.