Skip Navigation

Style changes - re post

Travel Forums System Talk Style changes - re post

  • 1
  • 2

Last Post

1. Posted by nzhamsta (Respected Member 93 posts) 5y


Thought I would repost this as it may have got lost somewhere given that it is very unusual for you guys not to reply to a post made over two weeks ago.

Just a couple of small style changes that I would like to make to my blog:

i. On the table of contents page, I would like the entry date column moving to the right a bit to avoid having the page title on two lines. Is this done in the template?

ii. On my pages I have a border around the photos and it looks neat and tidy. I am trying to do the same to the map, but using the same code in the template does not work.

Any help would be appreciated.

Regards and keep up the good work.


PS Any update on the table of content changes I suggested a few months ago? I am starting to post a lot of my historical stuff and will probably end up with a very long TOC page. Many thanks.

Post 2 was removed by a moderator
3. Posted by Peter (Admin 5790 posts) 5y

Hi Glynn,

Apologies for not getting back to you on that last post.

Making the table of contents wider is fairly easy - just add this bit of code to your template and it should be a lot better:

#table_of_contents {width:100%;}

The border you have on the photos is a bit harder to achieve on the maps. There's a bit of a problem with how it's structured, making it hard to target the exact bit that needs to be targetted. Here's something that will sort of do what you want though:

.map .map .map {border:1px double #666;}

(yes, all three .map bits will need to be there)

No changes have yet been worked on for the Table of Contents. We've got a few blog tweaks coming up though, so I'll see if we can include it in that round of changes.

Cheers, Peter

4. Posted by nzhamsta (Respected Member 93 posts) 5y

Thanks for the code.
The TOC now looks much neater and tidier.
The maps have a single border around them although the padding does not work. I may carry on playing with it to see if I can get it to work.


5. Posted by Peter (Admin 5790 posts) 5y

Yeah, I tried to get the extra padding working there as well. It needs another hook in that code to be able to do it properly. At least I couldn't work out a way based on the current html..

6. Posted by Sander (Moderator 4817 posts) 5y

You can get the same look, including the padding, with a bit of trickery:

.map .map .map { margin-left: 1px; outline: 1px solid #666; border: 2px solid #fff; }

(So the "border" looks like padding, and an outline is drawn around it all, looking like the border. The margin is needed to provide the white-space for that outline to show up on the left side, otherwise it gets hidden because of (presumably) some overflow: hidden; rule somewhere.)

[ Edit: Edited on 25-Jul-2011, at 18:18 by Sander ]

7. Posted by Peter (Admin 5790 posts) 5y

Nice! Never used that "outline" rule before :)

8. Posted by nzhamsta (Respected Member 93 posts) 5y


It looks good now.:)

Many thanks.

9. Posted by nzhamsta (Respected Member 93 posts) 5y

Further testing has revealed a problem. On IE it works fine, no stray lines at all.

On my preferred Opera (v 11.50, Windows 7) it shows a stray line either to the right of the map, or beneath the map in amongst the text.

Works fine on latest Firefox (v5.0.1).

Looking at the page in edit mode does not show any reason that might cause the lines to appear.



10. Posted by Sander (Moderator 4817 posts) 5y

This seems to be caused by some of the divs inside the google maps code expanding the last .map box as Opera sees it - and Opera drawing non-rectangular outlines. Probably fixable by a carefully placed overflow: hidden (but not on the 2nd .map, for that clips the map) - but needs more time to debug than I have available right now. I'll see if I can take another look later on...