Skip Navigation

Tinkering with my blog template

Travel Forums System Talk Tinkering with my blog template

1. Posted by RedMonkey (Full Member 18 posts) 6y

Hi guys!

Well not really a problem for the TP community but a bloody headache for me.
I want to add some graphics/links into my blog as I have seen other do but is proving very difficult to do and not having any positive results at all so thought I would ask one of you guys for a bit of help as my web site coding skills are non existant and nothing seems to be working!

Here's what I want to do....
I want to add 3 link graphics, BELOW each other that when they are clicked they open in a new window. Would love to have them below the 'Navigation' section and above the 'search' box if that is even possable.

Also what would be the ideal width of the graphics to fit in that right navigation bar?
I'm using the 'Postcard' template if that matter.

Thanks so much
Jase :D

2. Posted by Sander (Moderator 4809 posts) 6y

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.

[ Edit: Edited on 01-Dec-2009, at 09:12 by Sander ]

3. Posted by Sam I Am (Admin 5588 posts) 6y

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 this 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 here with the 4 rules at the very bottom.

Does that help?!

[ Edit: Edited on 01-Dec-2009, at 12:43 by Sam I Am ]

4. Posted by Sander (Moderator 4809 posts) 6y

Quoting 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. :)

5. Posted by Sam I Am (Admin 5588 posts) 6y

Quoting Sander

Quoting 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. :)

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 :)

6. Posted by RedMonkey (Full Member 18 posts) 6y

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

7. Posted by Sam I Am (Admin 5588 posts) 6y

Quoting RedMonkey

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;}