Grid focus: Can I add a header image?

solidgoldcreativity · Member · May 16, 2011 at 12:17 pm
Copy link

Add topic to favorites
Hello,

I’m trying out the Grid focus theme, and I would like to add a header image. Is this possible?

Thank you in advance.

Solid gold creativity
(http://www.solidgoldcreativity.com)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 16, 2011 at 8:04 pm
Copy link
Yes, you will need to add a background declaration to #masthead and size that element as required for your header image. The theme is 970px wide, so your image should be that width, but the height can be whatever you desire. You then declared that height in #masthead.
solidgoldcreativity · Member · May 17, 2011 at 12:04 am
Copy link
Hello @TSP,

OK, I tried something but I’m not sure what I’ve got. Can you take a look? Also, how do I declare the image itself?

Thank you.

SGC x
thesacredpath · Member · May 17, 2011 at 12:15 am
Copy link
You need to upload the image to the media library, get the URL of that image and then put it into the background declaration between the double quote marks like this
```
#masthead {
background: url("URL of header image") no-repeat scroll 0 0 #FFFFFF;
height: 250px;
width: 970px;
}
```
You will likely also want to get rid of the little blue square at right.

`#blogLead img {
display:none;
}
thesacredpath · Member · May 17, 2011 at 12:22 am
Copy link
forgot a backtick
```
#blogLead img {
display:none;
}
```
solidgoldcreativity · Member · May 17, 2011 at 1:05 am
Copy link
Hi @TSP,

OK, I added … well, something. Hasn’t worked well. Can you take a look?

Ta, SGC
thesacredpath · Member · May 17, 2011 at 1:42 am
Copy link
Your image is only 70px tall which means you have to change the placeholder height value I put in (250px) to 70px as below. Replace what you have with this.
```
#masthead {
background: url("http://solidgoldcreativity.files.wordpress.com/2011/05/cropped-bridgetr01.jpg") no-repeat scroll center 0 #FFFFFF;
height: 70px;
width: 970px;
}
```
I centered the image with the center attribute for horizontal placement also since your image is 10px narrower than the width of #masthead and the theme wrapper.
thesacredpath · Member · May 17, 2011 at 1:48 am
Copy link
You will want to change the color of the site title as well. I just put in this color as a placeholder. You will have to choose your own color. The hover color for the site title is 3C6092.
```
#masthead h1 a {
color: #CC0000;
}
```
solidgoldcreativity · Member · May 17, 2011 at 2:05 am
Copy link
Hi TSP,

Haha, you’re always a step ahead :) I changed the colour of the site title, though it’s getting cut off by something.

The header image is one of my favourite art works, but I’m not doing it justice here. The image is too narrow and blurry. I never know how to resize an original image without getting the blurriness because I don’t have Photoshop or similar. Should I search for a larger image on google and then reload it?

Thank you for sticking with me.

SGC x
thesacredpath · Member · May 17, 2011 at 2:17 am
Copy link
I’m not seeing the site title being cut off. I see it in a gold color.

Do you have a wide version of your header image, something over the 400px width of the one you are using?

If not, I would definitely get a different image. The thing is, that original checkerboard image should have been saved as a PNG rather than a JPG. JPG is for photographic images and with graphic images such as this, it really kills them. Once saved as a JPG though, the damage is done and cannot be recovered, and enlarging the image magnifies the damage exponentially.
solidgoldcreativity · Member · May 17, 2011 at 2:48 am
Copy link
All the images on the web of this painting are .jpg files. The one I loaded is 600 x 499 and it’s gone all bonky now. Help!!!

Sgc
thesacredpath · Member · May 17, 2011 at 3:35 am
Copy link
Upload this one and replace the URL in the background declaration and then change the height value to 158px.

This is the best I can get it.
solidgoldcreativity · Member · May 17, 2011 at 7:42 am
Copy link
Great! It looks a whole lot better now. I’ll sit with it for today and see how I feel about it tomorrow. I’m still seeing the text of the blog title being cut off by the space before and below. Can you see that?
thesacredpath · Member · May 17, 2011 at 11:08 am
Copy link
No I can’t. I’ve viewed it in Safari, Firefox 4 and Opera.

Can you take a screen shot of it?

What browser and browser version are you using?
solidgoldcreativity · Member · May 18, 2011 at 2:45 am
Copy link
Hi TSP,

At work, where I am now, we use IE 7. At home, I use Firefox. I haven’t had a chance to check it in Firefox yet.

Here’s a screen shot of how it looks using IE 7:

Cheers,
SGC
thesacredpath · Member · May 18, 2011 at 3:15 am
Copy link
Since I don’t have IE, I am shooting a little in the dark, but give this a try and see what happens in IE.
```
#masthead h1 {
line-height: 2em;
margin: 0 0 0 7px;
}

#masthead h1 a {
width: auto;
}
```
yusufharfi · Member · May 18, 2011 at 3:45 am
Copy link
I have tried to add header image on my blog, how ?
solidgoldcreativity · Member · May 18, 2011 at 3:48 am
Copy link
Wow, you’re always there! Amazing.

Thanks. This works.

One final question: is there any way to substitute the “By subject” and “Subscribe” menu options across the top nav bar with alternative ones that go to blog pages such as “About me”?

Cheers,
SGC
thesacredpath · Member · May 18, 2011 at 3:52 am
Copy link
Grid Focus does not support custom menus at the top nav location. You would have to use a custom menu widget in the sidebar. The top navigation in grid focus is set and defined in the underlying theme PHP script files.
solidgoldcreativity · Member · May 18, 2011 at 4:38 am
Copy link
OK. Got it. I’ll leave it the way it is.

Thanks for being so wonderfully generous, TSP. May you have a satisfying day!

SGC xx

No items found.