Blog Redesign
You may have noticed I’ve done a bunch of design stuff over the last few days.
But I wanted to change the header image, so finally got to it today. I think I have about 6 now, and they load up randomly. I’ll be adding more pictures-worth-a-thousand-words over time (do reloads or click different internal links to see what’s there now). Suggestions or submissions welcome…but I only work with images that are a minimum of 940px wide.
I’ve done it all myself, but one thing I’ve not been able to figure out is that I want to put the title and tagline above the header image, and in a single line. Same background color code as the menu (with white text), so that it sort of creates a boundary area above and below. Seems to me that all I need to do is apply padding of 30px or so to the header image, set background color, and go from there; but nothing I try works.
Anyone has tips, appreciated; or, if it’s more than off the cuff, I’m happy to PP some bucks.
Update: Thanks for the help. As you can see, I got steered in the right direction. Just a bit of custom CSS code did the trick.
WHAT IT'S ABOUT AND HOW IT WORKS
Free The Animal is an eclectic writing project about everything since November 2003. 23 years, 5,500 posts, 5 million words.
It's a paid membership blog. Most posts are free and public, but only paid members can comment. What determines whether it's free or paid is when I publish. Monday through Friday, free and public. Saturday and Sunday, for paid members. That's it. Membership info here.
Try make a new div tag above the image area, plop your text in there and style it like your navigation menu.
The simplest way to do it is to edit the html. It’s probably located in “header.php”
You need to copy and paste the ” up one line of code to just above ”.
The “title-area” is inside the “wrap” div, so you can’t move it above the “wrap” area by css alone. (you can, but it’s more complicated)
Once you move the html, you should be able to position the title and description using margin or padding via css.
It cut out my code. Here it is in English….
You need to copy and paste the “title-area” div and everything in it up one line of code to just above the “wrap” div.
What I forgot to mention is that I’m using the Prose child theme under the Genesis framework.
It’s unique in that for most simple stuff, there’s a ton of setting, rather as it used to be for a TypePad blog, which this was until about 2009 when I converted.
Anyway, this seems to be beyond the settings capability, so it’s going to take custom php, probably. I do have a place to do that, which overrides the relevant section in the applicable file. I do have a few others in the custom area and everything worked fine.
Yeah I’m looking at this more and it looks a bit more complicated than I thought. I’d have a hard time telling you what to change without looking at the actual php file.
Does this help nudge you in the right direction?
“Deconstructing the zoo human” or perhaps “deconstructing the human zoo”? Human zoo; zoo human? Whatever floats your boat I guess.
Have you seen this? It’s becoming widespread knowledge: dailymail.co.uk/health/article-2692057/Dont-eat-mash-dont-cook-olive-oil-DO-eat-unripe-bananas-Think… .
This is probably not the best approach but as a hack it works in Firefox. IE plays by its own rules. You may be able to tweak it a bit.
#header {
margin-top: 32px;
}
#title-area {
max-width: 940px;
max-height:47px;
position: absolute;
margin-top: -47px;
background-color: #444;
}
#title-area #description {
position: relative;
left: 238px;
top: -35px;
}
Thank you NAB
Almost worked right out of the box. I just had to tweak the left position for the tagline and adjust the background color setting to the exact code I’m using for the menu.
Once I got it up there I could see it was too bold, which I had done to overcome the image background, so went from Arial Black to Verdana and I think it looks nice. Works in Safari, Firefox and Chrome. Not sure how it looks in IE.
Thank you sir!
Yo Rich, you attending the Seth Roberts Memorial Talks in August. Nassim will be there amongst other notable speakers.
No, I have other stuff going on.
Your tagline is really awkward. I’d change “Neolithic Zoo Human” to … well … something else.
Failing that, add a hyphen so it isn’t so confusing as to what you’re talking about, such as “Neolithic-Zoo Human”.