View Full Version : PHP, Wordpress and CSS image replacement.

Apr 29th, 2009, 04:06 PM
Ok, so here's hoping this questions finds its feet in the correct area of the forum, due to the fact there are multiple faccets to this question i just wasn't sure.

Anyway. I've been trying to replace the title text in my wordpress blog with an image i have created, using the css text indent method of replacement. Currently the code I have on the php side of things is as follows:

<!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 profile="http://gmpg.org/xfn/11">

<?php if (is_home()) { echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archives:'; wp_title('');
} else {
echo wp_title('');

<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<meta name="description" content="<?php bloginfo('description') ?>" />
<?php if(is_search()) { ?>
<meta name="robots" content="noindex, nofollow" />
<?php }?>

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>



<div id="page-wrap">

<div id="top-bar">

<h1 class="logo">
<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>

<p><?php bloginfo('description'); ?></p>


<div id="navigation">

<ul id="main-nav">
<li id="nav_home"><a href="/">Home</a></li>
<li id="nav_contact"><a href="/contact/">Contact</a></li>

<ul id="extra-nav">
<li id="nav_portfolio"><a href="/portfolio/">Portfolio</a></li>
<li id="nav_blog"><a href="/blog/">Blog</a></li>


<div class="clear"></div>

I have highlighted the area I believe to be of most importance in red.

The code is very simple. A H1 tag around some php that drags in the title of the blog and links it. Next I set the css so that this text would be replaced by an image, and the text that was there would be sent 9999px off the side of the screen.

The code for this can be seen below:

h1.logo { height: 200px;
background: #050306 url(images/logo.jpg) no-repeat;
text-indent: -9999px;
overflow: hidden;

For some reason it just doesnt seem to work. I have tried linking to the image in the usual method using XHTML and that way it shows, its just when the php is inside the h1 tags it just doesnt work.

Any insight someone might be able to shed over this very painful issue would be massivly appreciated.

All the best


Apr 29th, 2009, 06:24 PM
Can we have a URI?