Community Forums › Forums › Archived Forums › General Discussion › Custom Headers
Tagged: Agentpress Pro, bespoke logo, big logo, corporate image, Custom header, going green, theme
- This topic has 6 replies, 3 voices, and was last updated 10 years, 7 months ago by
Cottagewebs.
-
AuthorPosts
-
July 7, 2014 at 6:26 am #113198
Cottagewebs
MemberHi - my name is Helen and I'm a web designer who is fairly new to WordPress.
Has anyone used the theme, Going Green?I'm thinking about purchasing this for a commercial landscaping company but they have a large logo which is an essential part of their corporate image - it's about 900 pixels long and I need to know if it is possible to use this in the header (i.e. not a tiny little logo of around 300 pixels) but a full size one.
http://www.landscapes-shakespeares.co.uk
It doesn't matter if it shrinks down to fit on a mobile device, just as long as we can have it. I include the current HTML site.July 7, 2014 at 8:04 am #113205Brad Dalton
ParticipantYou can add any image to the header using a variety of methods.
The height and width values for the WordPress custom header function can be changed in your child themes functions.php file.
And the values for width and height can be changed in the style.css file.
Generally the full width header will be between 960 and 1140 px so you might want to add it to a transparent background which spans full width.
July 7, 2014 at 9:09 am #113216Cottagewebs
MemberHi braddalton, thanks for your message.
I've had a look at another theme I've bought and altered this line://* Add support for custom header
add_theme_support( 'custom-header', array(
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 80,
'width' => 320,to
//* Add support for custom header
add_theme_support( 'custom-header', array(
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 335,
'width' => 1000,I now see that in those values reflected in the appearance > header
So I've uploaded a header that size.
However, on the page itself, the area is still confined to the original 320 x 80 proportions so most of the image is cropped out.I am sorry to say I'm stuck with the .css file and don't understand where to change it. Like I say, I'm new to all this but really like this theme and if I can adapt it to accommodate the logo I'd be delighted to purchase it.
July 7, 2014 at 1:21 pm #113246dev
ParticipantThe site you gave us the link to is not a WP site, unless I'm looking at the wrong site?
July 8, 2014 at 2:22 am #113339Cottagewebs
MemberDear Dev,
Sorry to confuse you, but no it's not a wordpress site YET but this is the one I want the header from, for when we build a new one (and hopefully with the Going Green theme.)
I am also working on another Studio press template and hoping to resolve the same issue, and using this as a 'testing ground' before I commit to another template.This uses the AgentPress Pro theme (which also had 'custom header' as a feature)
My header is 1000 x 335
But only a tiny fraction of that image is showing (I notice both these templates were developed by the same web professional so what works on this, must surely apply to the other one too)Our testing site using AgentPress Pro is http://www.walbertondental.co.uk/
I'm going to try uploading the image as a PNG file as suggested in the last post.July 8, 2014 at 7:34 am #113373Brad Dalton
ParticipantThe changes you made to the PHP effect the Custom Header size under the Appearance Menu.
The second step is to change the sizes for the width and height in your child themes style.css file under the Site Header section so they match what you changed in the PHP.
The PHP only effects the cropping of the image when you upload it however you will also need to modify the CSS values.
/*
Site Header
---------------------------------------------------------------------------------------------------- *//* Title Area
--------------------------------------------- */.title-area {
float: left;
padding: 0;
width: 1000px;
}And any height values will also need to change.
July 8, 2014 at 8:19 am #113393Cottagewebs
MemberThat's really great - thank you. Changing css is a bit scary, because I'm really not sure what I'm doing, but I looked at this file again and changed the values, as advised. I found another reference to the header-image and also changed that:
}
.header-image .title-area {
width: 1000px;
padding: 0;Finally I also the section for the height and changed that too:
}
.header-image .site-title > a {
float: left;
min-height: 335px;
width: 100%;BRILLIANT it's all showing now and I feel I am making progress. The only thing which spoils it now is block of brown space to the right, but I guess that's another issue. For now, we should continue with the tutorial which goes with this theme and get some more content on the site, before we go any further.
Thanks for all your assistance which has been very helpful.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.