[Wolves] wordpress question

Mark Harrison Mark at yourpropertyexpert.com
Thu Jul 5 10:57:26 BST 2007


baza wrote:
> Which file do I need to edit to change the graphic at the top of the 
> blog? I'm assuming it's one of the theme's files, but which?
>
> Baz
Baz,

As Gareth has said, you can just take a graphic editor to the image file 
that Wordpress is calling. This is the easiest way to do things.

If you just want a "how do I do this NOW, urgently" answer - then go 
with Gareth's :-)



I'm going to explain a more complicated way of doing it, which will take 
longer, but hopefully give a bit more of an insight into how Wordpress 
themes work:

- Wordpress has probably been installed to /usr/share/wordpress - cd to 
there :-)
- Content files (look/feel as opposed to posts) are in the wp-content 
subdirectory directory: go there
- Themes stuff is in the themes subdirectory: go there
- You will see a subdirectory for each theme available, cd to the 
appropriate one (default?)
- You'll see a set of php files which define the look/feel of the site

In the theme I'm using, header.php is the file that defines the contents 
of, well the header. Editing that, you'll see a set of lines that (in my 
case), look like:

========================
<div id="header">
        <div id="headerimg">
                <h1><a href="<?php echo get_option('home'); ?>/"><?php 
bloginfo('name'); ?></a></h1>
                <div class="description"><?php bloginfo('description'); 
?></div>
        </div>
</div>
========================

This is notable for NOT containing any specific graphic as an embedded 
image. Instead, you need to note the DIV classes "headerimg" which is 
contained in "header".

These reference definitions in the stylesheet, style.css. So you need to 
edit that file - search for the word "header", or just scroll down 
enough, and you'll see something like:

========================
#header {
        background: #73a0c5 url('images/kubrickheader.jpg') no-repeat 
bottom center;
        }

#headerimg      {
        margin: 7px 9px 0;
        height: 192px;
        width: 740px;
        }
========================

Clearly, it's the "header" DIV that contains the pointer to the graphic. 
The #73a0c5 is a colour... it's the "kubrickheader.jpg" that you need.

At this point you have two choices, either take your favourite graphics 
editor to kubrickheader.jpg in the images subdirectory (of where you 
currently are), or change that CSS file to point to a different graphic.

Depending on the nature of your graphic, you may want to remove the 
"no-repeat", or for that matter the "bottom" or the "center" (note the 
US spelling) from the CSS.


Hope this helps,

Mark



More information about the Wolves mailing list