Header background image alt needs to be a H1 tag WordPress
- SOLVED
Here's the test site for my new SpamDiary them
http://www.would-you-trust-a-company-with-such-a-fucked-up-domain-name.com/
The header image alt tag needs to be interpreted as an H1. I'd prefer that my blog title and tagline be the actual H1 tag (but not visible to the viewer) but I'll settle for the image alt tag being an H1.
I'm using the the Big Feature theme with a the Big Feature Nav child.
Here's the header PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bf_title(); ?></title>
<?php bf_metaTags(); ?>
<?php bf_head(); ?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php if ($bf_feed_url) echo $bf_feed_url; else bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
<?php bf_top(); ?>
<!-- begin #container -->
<div id="container" class="clearfix">
<?php bf_top_container(); ?>
<!-- begin #header -->
<div id="header" class="clearfix">
<?php bf_header(); ?>
</div>
<!-- end #header -->
<?php bf_belowheader(); ?>
Style sheet code for child theme:
body { background: #f9f9f9 url(images/bg.gif) repeat; }
#header { margin-bottom:0; }
#container { padding: 0px 50px 20px; background:url(images/body.jpg) repeat; }
#topheader { margin-top: 0px; }
#topheader .inside { background-color: #fff; background:url(images/top.jpg) repeat; padding:5px 0px 53px 0px; }
#topheader p.description { border-left: none; margin: 0; font-size: 14px; padding: 17px 0 0 14px; }
#topheader ul.navigation.navsimple li a { border-right: 1px solid #666; }
#topheader ul.navigation.navsimple li.last a { border-right: none; }
ul.navigation.navboxes li a:hover { text-decoration: none; }
#headerstuff { padding: 0 50px; }
#top .inside { background-color:none; background:url(images/middle.jpg) repeat;padding: 8px 0px; }
#top ul.navigation { width: auto; margin: 5px 0 0 50px; }
#top ul.navigation a { color: #aaa; }
ul.navigation.navsmall li a { border-right: 1px solid #999; }
#searchcontainer { float:right; margin-right: 58px; }
#searchcontainer .searchicon { margin: 3px 0 0 3px; }
#searchcontainer .searchbox { height: 26; background-color: #fff; border:1px; }
.searchform .searchfield { padding: 2px; }
#footer-widgets a { color: #000; }
#footer { margin-top: 0; }
#footer .inside { background:url(images/bottom.jpg) repeat; }
#footer-widgets h2 { color: #eee; }
#footer-widgets ul li ul li { border-bottom: 1px #666 solid; }
#footer-widgets { border-top: none; margin-top: 0; padding: 20px 50px; background-color:#333; background:url(images/bottom.jpg) repeat;color: #eee; }
#footertext { padding: 10px 50px; }
#footertext ul.navigation.navsmall { float: right; width: auto; margin: 5px 15px 0; }
#footertext ul.navigation.navsmall li.last a { padding-right: 15px; border-right: 1px solid #999; }
Answers (3)
Eddie Moya answers:
You've seem already got the h1 showing up, so about making it not appear for users, why cant you just do...
h1.blogtitle { display:none; }
That should obviously make it not show up.
Eddie Moya comments:
You seem to still have a gap after that... so for that (someone irrelevant but still helps you out)...
Change...
#topheader .inside {
background:url("images/top.jpg") repeat scroll 0 0 transparent;
padding:5px 0 17px;
}
to
#topheader .inside {
background:url("images/top.jpg") repeat scroll 0 0 transparent;
padding:5px 0 17px;
}
Eddie Moya comments:
Sorry,... i meant to change from padding: 5px 0 53px; to padding 5px 0 17px;
Clay Butler comments:
Nope. Not that one either. I don't know why that isn't the default on most themes. If I use a logo image instead of blog title the text should be hidden so you still get the same SEO effect.
Clay Butler comments:
Ok. let me try.
Eddie Moya comments:
What i am describing would in effect, hide the text. This is assuming you have this on the page already...
<h1 class="blog-title"><a href="http://www.would-you-trust-a-company-with-such-a-fucked-up-domain-name.com">Spam Diary | A Collection of the Funniest, Weirdest, Most Bizarre, Email Spam Ever.</a></h1>
adding
h1.blogtitle { display:none; }
Should make that text invisible.
Eddie Moya comments:
Damn the typos...
h1.blog-title { display:none; }
forgot the hyphen...
Clay Butler comments:
The text is still there.
Eddie Moya comments:
Wanna try that one more time.. sorry about that type. Looks like you submitted the same time I submitted my correction.
Clay Butler comments:
Heck yeah!. Now how do make the tagline invisible?
Eddie Moya comments:
If by "tagline" you mean this bit:
<p class="description">Spam, Spam and More Spam. World's Worst, Best, Most Creative, Funniest, Weirdest, Spam Ever Sent!</p>
Then amend what I gave you before to show this:
h1.blog-title, p.description { display:none; }
Eddie Moya comments:
And now your body is misaligned again so you'll want to change this:
#topheader .inside {
background:url("images/top.jpg") repeat scroll 0 0 transparent;
padding:5px 0 17px;
}
to this:
#topheader .inside {
background:url("images/top.jpg") repeat scroll 0 0 transparent;
padding:5px 0 56px;
}
Clay Butler comments:
Thanks. Now I'll know to do that with any blog.
Clay Butler comments:
When I got to a deeper page it seems to revert.
Any idea why. The fix works on the home page, category and contact and about pages but for some reason not individual posts.
[[LINK href="http://www.would-you-trust-a-company-with-such-a-fucked-up-domain-name.com/2010/06/your-domain-has-been-suspended-uh-not-really-just-trojan-virus/"]]http://www.would-you-trust-a-company-with-such-a-fucked-up-domain-name.com/2010/06/your-domain-has-been-suspended-uh-not-really-just-trojan-virus/[[/LINK]]
Clay Butler comments:
Correct that: NOT on about and contact pages
Thanks.
Clay Butler comments:
Nevermind. Figured it out. The them uses H2 tags for the blog title on those pages so I just added a style for those.
Sidd answers:
Hello Clay,
Look for this <img alt="logo" src="http://www.spamdiry.com/images/logo-trans1.png">
and replace that with <h1><img alt="logo" src="http://www.spamdiry.com/images/logo-trans1.png"></h1>
You should be able to find it in the <div> with id "logo" i.e. <div id="logo">
Also only when the image is missing, will the alt text ( which is "logo" ) in this case be shown with H1 tag attributes. Otherwise it has no use.
That's all.
Deepak Thomas answers:
Image alt attribute cannot be made an H1. How about displaying an additional H1 above your header image for SearchEngines and hiding it to the user?
Edit the following lines to
<!-- begin #header -->
<div id="header" class="clearfix">
<h1 class="hiddenToUser"><?php bloginfo( 'name' ); ?></h1>
<?php bf_header(); ?>
</div>
And all the following to your CSS
h1.hiddenToUser {
text-indent: -99999px;
display:hidden;
height:0; width:0;
}
Clay Butler comments:
Close but it didn't show the tag line as well. Basically I want this [[LINK href="http://www.would-you-trust-a-company-with-such-a-fucked-up-domain-name.com/"]][[/LINK]] but not seen. Like it is on the live [[LINK href="http://www.spamdiary.com/"]]spam diary[[/LINK]] site.
Clay Butler comments:
By this I mean [[LINK href="http://www.would-you-trust-a-company-with-such-a-fucked-up-domain-name.com/"]]this[[/LINK]]
Deepak Thomas comments:
Add this to your CSS
h1.blog-title, h1.blog-title a {
text-indent: -99999px;
}
Clay Butler comments:
Not so elegant as it still leaves a big gap because it may be 9000 pixels away, it still forces space.