Changing title text to image in Oulipo

bunandbiscuit · Member · May 12, 2012 at 8:21 pm
Copy link

Add topic to favorites
I want to delete the title text on the right hand side of my blog and add in a logo (image) instead. How can I do this using CSS? I tried to figure this out myself, but couldn’t seem to get it right.

Thanks!

my blog is bunandbiscuit.wordpress.com

The blog I need help with is: (visible only to logged in users)
timethief · Member · May 12, 2012 at 8:30 pm
Copy link
I searched for you.
See these threads:
https://en.forums.wordpress.com/topic/adding-logo-above-title-in-oulipo-layout?replies=6
https://en.forums.wordpress.com/topic/oulipo-theme-adding-link-to-image?replies=4
bunandbiscuit · Member · May 12, 2012 at 10:17 pm
Copy link
Thank you for your quick reply!

I was able to delete the title text and replace it with the logo with the help that you gave me. Although, now the left menu sidebar overlaps slightly with the logo. Is there a way that I can shift this down?

Thanks!
bunandbiscuit · Member · May 12, 2012 at 10:20 pm
Copy link
Also, is there a way that I can keep the logo stationary at the top of the page? Right now it scrolls down with the rest of the posts.

Thanks!
designsimply · Member · May 15, 2012 at 2:09 pm
Copy link
Although, now the left menu sidebar overlaps slightly with the logo. Is there a way that I can shift this down?

I looked at http://bunandbiscuit.wordpress.com/ and I dont’ see the left menu sidebar overlapping anything. Please post back again here if you still need help with that part, or it would also be great if you post a solution if you already figured out the answer. :)
bunandbiscuit · Member · May 15, 2012 at 2:12 pm
Copy link
I just decreased the size of the image. My problem now is that I need the image to link to my homepage. Can you help me with that?
designsimply · Member · May 15, 2012 at 2:14 pm
Copy link
Also, is there a way that I can keep the logo stationary at the top of the page?

You can do that with fixed positioning. Here is some additional background information about it if you are interested:
https://developer.mozilla.org/en/CSS/position

The Oulipo theme actually does use fixed positioning already, but you overwrote that when you added the following custom CSS:
```
#main-nav {
	background:url('http://bunandbiscuit.files.wordpress.com/2012/05/girlwdog_145x218_logo.jpg') no-repeat scroll 0 0 transparent;
	margin:0;
	padding-top:9em;
	overflow:hidden;
	position:absolute;
}

#main-nav h1,#main-nav .description {
	margin-left:-500px;
}
```
Are you interested in switching back to the original way Oulipo makes the left title and navigation a fixed position so it doesn’t move when it’s scrolled?
designsimply · Member · May 15, 2012 at 2:14 pm
Copy link
I just decreased the size of the image. My problem now is that I need the image to link to my homepage. Can you help me with that?

I will answer this question in the other, separate threads you started. I’m working on it! Hang in there just a little longer.
bunandbiscuit · Member · May 15, 2012 at 2:45 pm
Copy link
Thanks! The absolute positioning is fine.
designsimply · Member · May 15, 2012 at 2:53 pm
Copy link
Aha, well if you’d like to change from fixed to absolute positioning, then you may want to take a look at my latest reply to another thread where you asked about making the image clickable:
https://en.forums.wordpress.com/topic/making-header-clickable-to-homepage?replies=2#post-886851

To change the image and menu from fixed to absolute positioning, you would just add “position:absolute;” back to your #main-nav block.

No items found.