Hi guys!
The one thing you can't do is have these links opened in a new window; all links on the blog navigation sidebar open in the same window by default. Our policy is that if a visitor wants to open a link in a new window (or in a new tab, more likely), that's something they can decide to do for themselves, using their own browser.
The ideal size for an image in that sidebar you're using would be 148px wide. (I didn't double-check this; am short on time here, so don't spend too much time getting this exact size.)
First you'd create the links as you did for your "Pictures" smugmug link in the sidebar. Then in the blog template, you would 'hide' the text and show a background image for the list item. The CSS would be something like:
#bloglinks ul > li:first-child + li {background: url("http://photos.travellerspoint.com/63667/yourfirstimage.jpg") no-repeat; }
#bloglinks ul > li:first-child + li a {text-indent: -100em; overflow: hidden; }
#bloglinks ul > li:first-child + li + li {background: url("http://photos.travellerspoint.com/63667/yoursecondimage.jpg") no-repeat; }
#bloglinks ul > li:first-child + li + li a {text-indent: -100em; overflow: hidden; }
Basically you're counting links from the first one; for each link you add a "+ li" to the selector to match the next one.
I didn't test this at all. Play around with it, see how far you get on your own. If you don't have any luck, ask again and I'll see if I can find some more time to actually sort it out myself. You might also need to set display: block on the "li a" selectors, and/or give it a height equal to that of the image.
[ 01-Dec-2009, at 09:12 by Sander ]
I think Sander might be overcomplicating things
You can add images directly in the Links area of your blog. You also have to add a link title, but that won't actually show if you also have an image listed there. I played around with the template a little and have working. I think this is what you were after?
I used an image that was 190px wide, but you could use different sizes (although this leaves roughly same white space on left and right). This seemed about right to me, then I just dug one up on the internet (let me know when you are done and I'll remove it) in that width. The next thing I did was remove the little arrow that normally shows for items in the navigation and set the width to 190px. Adding these two rules in the template will take care of the above:
#bloglinks ul {padding-left: 0;width:190px;}
#bloglinks ul li {list-style-image:none;}
The next thing you want is for it show right at the top, right? That in itself is not hard, as adding this to the template basically sorted that out:
#bloglinks {position:absolute;top:260px;}
The only problem then is that the search field and rest of the navigation gets hidden behind the image(s). This is the part you'll have to fiddle with. For this one image, I used this rule which works nicely:
#navsearch {margin-top:425px;}
However if you have higher images, or shorter ones, then this 425 value will need adjusting up or down. Just play with it a little after adding in the images and see what works (that's how I do it )
Just stick these 4 rules at the bottom of your template. You can see my customized template with the 4 rules at the very bottom.
Does that help?!
[ 01-Dec-2009, at 12:43 by Sam I Am ]
I think Sander might be overcomplicating things
You can add images directly in the Links area of your blog.
Oh wow, didn't know that. That'll teach me to try and give advice when I'm pressed on time and not able to go and dig around.
I think Sander might be overcomplicating things
You can add images directly in the Links area of your blog.
Oh wow, didn't know that. That'll teach me to try and give advice when I'm pressed on time and not able to go and dig around.
No worries, that was added a few months after the links option was, so not strange you didn't know. But it made attempting this a lot easier though
Thank you both for your help!!
You know I didn't even check the 'links' area, think the last time I was there it was only the option for a text link but that was years ago!.
I did a quick job just to see if it works and the code and instructions you gave me were perfect and just what I wanted.
There seems to be a problem though when I click on the author name 'RedMonkey' in that it doesn't remember the margin, but seem to be the only page it goes it.
Thanks again guys
Jason :D
There seems to be a problem though when I click on the author name 'RedMonkey' in that it doesn't remember the margin, but seem to be the only page it goes it.
Argh, I've never been a big fan of how that author page works, and even less so now seeing this...
I've gone for the least intrusive fix. Replace the navsearch rule (that last one) with the following instead (I've already amended to match your margins):
#navsearch,#authorprofile {margin-top:530px;}
#authorprofile + div + div {margin-top:0;}
0 Response to "Tinkering with my blog template"
Post a Comment