- This topic has 8 replies, 3 voices, and was last updated 11 years, 4 months ago by
.
-
Posts
-
I'm planning to change out the header on my site, which has the Outreach theme applied. Before I do it, though, I'd like to confirm that I'm doing it properly.
The site URL is http://www.thedianekrause.com.
I'd like to create a new header (1060 x 120 pixels) with a different background color, and a new logo/site title to the far left, and I still want the theme "extras" on the right side to appear.
To apply my new header, do I simply upload it as a new image in my WordPress dashboard, via Appearance>Header? Any coding manipulation required?
In those same settings, if I deselect "show header text with your image" will that make the default Outreach title text disappear?
As long as I don't have the logo too wide on my new header, I assume the "extras" I've activated on the right side will still appear on my new header. Is that correct?Diane,
I visited your site and am not sure if you did what you wanted. I'm about to mess with my outreach header and "may" have the answers to your questions. Do you still need a response?
No, I haven't made any changes to the header yet, so I would definitely be interested in anything you might have to offer! Thank you for checking with me.
Ok, this comes with a caveat that I'm not an expert. If one of the moderators sees that I'm giving bad advise I hope they will correct me.
I use Firebug in Firefox and with that I check to see what things names are but in this case it's not that hard.
The short of it is yes, use WordPress header to upload that 1060 x 120 and you are ready to rock. I use photoshop and create a new file (call it outreach-theme-header.psd) and it's 1060 x 120. I then gave it a transparent background and dragged my logo into that as a new layer. Saved for Web using a png format to retain the transparency. When I first did this I had the logo flush left to the new image and it was right against my monitor left. Instead of messing with the margins etc. I simply moved the logo layer to the right in my psd and got it where I wanted it. Deleted old versions from my media library and uploaded a new logo via WordPress Header interface.
Outreach uses a default image in the background called header.png That image has the dark hash pattern. I assume that by using WordPress there is a CSS statement over-riding the stylesheet settings to use header.png but I've not chased it down to validate that statement. In theory you could replace that image using FTP with a new image and you'd be done but I didn't mess with fate.
The menu items etc. to the right must have a z-value (think that's the name) that places them in front of the background image, that's why the wide header image doesn't smash everything to the right or make it wrap I suppose.
Of course when you use the WordPress header settings, don't forget to turn off show text or you'll have your wordpress site name layered over your new image - unless of course your desire is to have the image only be a pattern and you WANT the text.
Guess that's it. I just did all of this and it's working for me on my test site.
Good luck.
John
Thanks, John. Very helpful to have a first-hand account, and it sounds simple enough. My Photoshop skills are only one notch above nil, but I've got some competent help ready to walk me through it. I hope to give this a try within the next few days.
If you own photoshop you are 90% there. I find it very helpful to get all the image sizes for the theme (given in the theme how-to section) and create a psd file for every image. So I have these so far:
outreach-featured-image.png
outreach-logo.png
outreach-slider.png
outreach-sidebar.png
I note in the how-to section they list Featred as 1040px by 400px. That's the slider image. I'm using Featured Image here as the featured image that is attached to a page and will be inserted in the widgets Home1, Home2, Home3, Home4. I have a static home page and those will link to pages not posts so the 215px x 140px images will be uploaded to those 4 pages as the pages "featured images". Of course when you use the Genesis Featured Page widget in those Home1 etc. widget areas, you need to pick that image size. It defaults to 150 x 150 or something like that so you'll want the longer images like on the demo site.
So anyway, you create these master psd's in Photoshop. Open your master images in photoshop and drag them onto the psd image. A new layer will be created on top. Zoom out if you need to size the images to best fit the area. Do Save For Web, pick your file format form the top and you are done. They are already sized to fit. In one PSD I'll have multiple layers (e.g. all the slider photo's). I put one on top of the other as a new layer and hide the lower layers (click on the eyeball beside the layer). That's that. You crank out new images sized to fit. Then for the life of your site, you can easily make images to fit your theme without having any re-sizing drama. (also... turnoff WordPress autosizing it will drive you batty.)
Good luck.
John
A side note or word or confusion on my part. I was getting a color behind my header that I don't know where it's coming from . Thought it was from the #header section of my stylesheet but changing that doesn't change the color. The reason I mention this is that in playing around and trying to return things to original state, I got a section of my header that didn't want to return to the dark grid. This may have something to do with responsive sizing. I'll keep playing around with it but just wanted to let you know that I'm not comfortable that I'm 100% there either.
Found it... duh.
I was looking in my style.css for a color that isn't there. Since I used a transparent layer on my logo (the frame is the size WordPress says to use for the header but the logo is naturally smaller - thus a transparent area) the background was coming from WordPress in the Background settings window. Not in the css. Live and learn.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.