How To Absolutely Position Images In Thesis

by Matt on June 25, 2009


In this Thesis tutorial there are only few lines of CSS I entered before the lesson and they are 100% for effect. Here is what I have in my stylesheet prior to the lesson:

body.custom { padding-top: 3em; }
.custom #header #logo { text-indent: -9999px; }
.custom #header #tagline { text-indent: -9999px; }

This is from the lesson and goes in the custom_functions.php:

function name_your_function() {
?>
<img id="dog" src="wp-content/themes/thesis_151/custom/images/image.type" alt=""/>
<?php
}
add_action('thesis_hook_before_html','name_your_function');

Be sure to come up with your own appropriate image id. Remember not to use spaces.

Finally, this is the single line of CSS used to position the image:

.custom #dog { position: absolute; left: 33em; top: 1.5em }

Remember to Get Thesis and join the design revolution! Viva La Thesis!

{ 3 comments… read them below or add one }

Cat October 4, 2009 at 1:26 am

Hey! GREAT tutorial. Everything worked except that instead of my image, I have a blue question mark box. My file is in the correct spot and saved in a .jpg format; any idea of what could be wrong?
Thanks again!

Reply

Matt October 4, 2009 at 8:47 am

@Cat
What is the size of the image file you are trying to use? What browser are you using? If you’d like, you may send me a link to the site and I will check out the problem and advise from there.

Reply

Mark July 8, 2010 at 11:24 pm

This is a great tutorial but this doesn’t work if you want it near the text but never on it.

How can I make it do exactly this and stay in one spot but when I resize the window it still stay in the same are of the site. If I wanted something popup out of the navbar for example. And it always be right off the border no matter the resolution and when its collapsed past that it just stops at that point..

Reply

Leave a Comment

Previous post:

Next post: