Meet Fred.
He’s a Kaiju. He’s mean and he’s green and he’s ready to rid the world of ugly dysfunctional websites – truly worthy of becoming KaijuHost’s logo.
So anyway, we’re going to put Fred on the upper left portion of this blog.
I will skip the Photoshop portion of actually making Fred, suffice it to say he is saved as a 500×485 22.3kb transparent gif.
First step is to create a Child Theme, with instructions at Codex.wordpress.org/child_themes. I used the default Twenty-twelve theme as a parent in my example below. Using a Child theme is essential because you can revert back to default if you happen to screw things up beyond fixing, and more importantly because when you update the parent theme it will not affect the edits on your child theme.
Step 1. (Optional)
The Twenty-twelve theme has the functionality to allow you to allow a custom background using WordPress’ internal editor, accessible via Appearance > Customize. While powerful, I will not be using this because it is unable to perform minute changes such as moving the logo x pixels to the top, right, bottom or left amongst other design nuances.
So we will remove the ability for the WordPress editor to edit the header. This is how:
Open functions.php on your editor and go to line 70:
Disable it by adding extending the nearest commend end ‘*/’ to the end of line 72:
Step 2.
Next, is to upload your logo to your WordPress images directory, which you can do while logged in WordPress and clicking Media > Add New.
Get the URL of the image by clicking ‘Edit’, then copying the URL part like this:
Save the URL you will need it later.
Step 3.
Now we want to make the image appear. Edit header.php directly using Appearance > Editor > header.php. Place this code beneath the <body> tag and use the URL of your image for the src=””.
<div id="logo">
<img id="logo" src="url_of_your_image.jpg">
</div>
Save the file. Visit any of your blog pages and the image should now appear, just like Fred below although clearly too far to the left from where we want him to appear:
Step 4.
By default, images appear at the left and top most portion of your browser. So while we can make Fred move closer to the header via adding padding values on the css, his position will change every time the browser size changes.
The solution is to base his position from a point that does not change such as the center of the site. The center remains constant regardless of browser size, so we want to place him based on values relating to that. Here’s how:
The html code we used to place the logo is:
<div id="logo">
<img id="logo" src="url_of_your_image.jpg">
</div>
The div with id = “logo” is our container. We will place it in the middle of the site. Open your WordPress styles.css file with an editor and add this to the bottom of the page:
div#logo {
margin-left: auto;
margin-right: auto;
width: 500px;
border:solid 2px red;
}
It will look like this. I added a 2px red border so you can see the size of the logo. Width should be the actual width of the logo:
Now that it’s centered, we can now move it to the left relative to the center by adding this css code:
img#logo{
position:absolute;
margin:-100px 0px 0px -400px;
}
Margin syntax is margin: top right bottom left, so we moved it 100 pixels higher, kept right and bottom values unchanged, and moved it -400 pixels to the left. Remove the border and now you have:
