Enable custom header with Home link

placesunknownart · Member · Nov 21, 2011 at 3:21 am
Copy link

Add topic to favorites
hey there, i’m playing around with different layouts for my site and created custom header. I want it to be “Home” aware, ie anytime users point to it and click on it – it will take them back home. thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 21, 2011 at 4:07 am
Copy link
You have to create a blank transparent PNG image with no background color, put it into a text widget and link it to your home page, and then use CSS positioning to move that text widget up and over the top of your header image. This doesn’t work cleanly with all themes and in some cases the clickable area can shift up or down depending on whether someone is logged into wordpress or not (shifts by the height of the top admin bar).
placesunknownart · Member · Nov 22, 2011 at 1:17 am
Copy link
ok, thanks, bit more complicated than I was hoping for. requires a lot of labor
placesunknownart · Member · Nov 24, 2011 at 3:44 am
Copy link
Hi, so what is the right CSS to move specific widget image into header area without affecting the rest of widget bar?

I tried to test this with image widget that I have on my blog and it is affecting the entire widget column.

First I do not see any specific CSS for widget_image. Based on the source it seems like this image is controlled via this code <li id=”image-4″ class=”widget-container widget_image”><div style=”overflow:hidden;”><img src=”http://sillymonkeyphoto.files.wordpress.com/2010/11/visitmy-photogallery1.jpg?w=200&h=200″ class=”alignnone” width=”200″ height=”200″ /></div>
, specifically id=”image-4″.

So I tried inserting the following CSS:

#image-4 {
margin -100 0 0 0:
}

and it moves the entire widget column up.

I just want to move the specific widget image without affecting the rest of widgets.
thesacredpath · Member · Nov 24, 2011 at 4:05 am
Copy link
First off, I’ve got a slower wireless internet service, and your site takes entirely too long to load. Please go to settings > reading and reduce the number of posts that show per page to perhaps 3. Those of us on slower connections (and that is about 65% of the webbing public) will be grateful.

Post back here after you have done that and I will take a look.
placesunknownart · Member · Nov 24, 2011 at 4:30 am
Copy link
Sorry that you can’t load it fast.

The basic question: what is the CSS code to move individual Widget around the page without affecting the rest of the widget bars and make it visible? 2010 theme.

I added another widgettext and I can not move it out of the widget column. Moving it up is affecting the entire widget bar – ie it is moving other widgets too. Also if I move it high enough, it is hidden behind other areas of the page.
thesacredpath · Member · Nov 24, 2011 at 5:36 am
Copy link
The reason I asked you to temporarily make that change was so that it would not eat a bunch of my bandwidth (which I have to pay for) and so that it would not take forever for your site to load.

You have to set position relative in the outer most element (inside of body) and then when you set position absolute in the image widget CSS, the positioning will be in relation to the wrapper element and the image widget will stay in relationship to all the elements in the wrapper no matter what.

Play with the top and left values
```
#wrapper {
position: relative;
}

#image-4 {
position: absolute;
top: 50px;
left: 500px;
}
```
placesunknownart · Member · Nov 24, 2011 at 10:26 am
Copy link
Thanks! I’ll give it a try.
thesacredpath · Member · Nov 24, 2011 at 10:36 am
Copy link
You are welcome.
placesunknownart · Member · Nov 27, 2011 at 4:14 pm
Copy link
got it working.
thesacredpath · Member · Nov 27, 2011 at 5:20 pm
Copy link
Glad to hear that.

No items found.