Blog Template

Travel Forums System Talk Blog Template

1. Posted by ChriNi (Budding Member 13 posts) 28w Star this if you like it!

Hello guys,

Anyone is good at coding and has changed his template blog?

I did but I would like to change some more complicated things but I don't know how :
- the "Navigation" part is down to the bottom and would like it to be next to the first article on the page.
- I would like to have a black line or so in between article
- I would like pictures to be next to each other and not all in a row

That's pretty it (unless you have other advice :) )

Here is my actual template html code :

/* 1900 Template */

/* Primary layout */
body {margin: 0;background-color:#fff;color: #4a496e;font-size: small;}

  1. wrapper {position:relative;width: 1050px;margin: 0 auto;border: 120px solid #E6E6FA;padding: 0;border-top: 0;}

/* font specs */
h2, h3, h1, body, p, li, ul {font-family:helvetica, arial, sans-serif;}

/* Header */

  1. header, #center, #footer {width:850px;margin:auto;position:relative;}
  2. center {background:transparent url(https://photos.travellerspoint.com/768647/large_IMG_0470.JPG) no-repeat top center;padding-top: 270px;clear:left;}
  3. header {min-height:36px;padding: 20px 0px 10px;font-size: 10px;border-bottom: 1px solid #6E6EE2;}
  4. header #title {padding-bottom: 100px;background: url(https://photos.travellerspoint.com/768647/icons8-world-map-64.png) bottom no-repeat;font-size:xx-large;text-transform:uppercase;}
  5. header #title a {text-decoration:none;color:#7779ca;font-weight:normal;}
  6. description {font-size:100%;float: center;font-style:italic;padding: 0px 750px 0px;}

/* Images */
img {border: 0;}

/* Links */
:link, :visited {color: #4a496e;font-weight: bold;}

/* Navigation */

  1. navigation {float:right;width:100px;margin:0;padding:0;font-size:90%;border-left:1px dotted #bbb;text-align:center;}
  2. navigation ul {margin:0 0 5px;padding:5px;color:#4a496e;list-style-type:none;}
  3. navigation li {line-height:150%;}
  4. navigation h3 {padding:5px;color:#4a496e;font-size:110%;font-weight:normal;text-align:center;text-transform:uppercase;margin:0;}
  5. navsearch {padding-bottom:10px;}
  6. navsearch form, #changestyles form {margin:0;padding:.5em;}
  7. authorprofile,#photography {padding:0; padding-bottom: .5em;}
  8. changestyles {border-bottom:1px dotted #bbb;padding-bottom:10px;}
  9. authorprofile p, #photography p {margin:.5em 10px 0 10px;}
  10. photography .photo, #profilephoto .photo {border:1px solid #4a496e;margin:0 5px 2px 0;}
  11. profilephoto {float:right;margin:10px;}
  12. ads_nav {text-align:center;margin:10px 0 15px;}
  13. tag_cloud ul {margin:0;}
  14. tag_cloud li {display:inline-block;padding:0;margin:0 5px 0 0;}
  15. tag_cloud li.activity_level_1 {font-size:100%;}
  16. tag_cloud li.activity_level_2 {font-size:120%;}
  17. tag_cloud li.activity_level_3 {font-size:140%;}
  18. tag_cloud li.activity_level_4 {font-size:160%;}
.social_links a {display:inline-block;width:22px;height:22px;background:url(/img/social_icons_sprite.png) no-repeat 0 0 !important;border:0 !important;}
.social_links a span {display:none;}
a.twitter_link {background-position:0 -60px !important;}
a.googleplus_link {background-position:0 -30px !important;}

/* Content Group Header */

  1. contentgroupheader {margin-bottom:5px;border-bottom: 1px solid #2a2ad5;padding: 25px 0;text-align: center;}
  2. contentgroupheader h2 {margin: 0;}

/* Blog Content Area */
  1. blogcontent {width:750px;margin:0;float:left;}
.map,.tp_map {width:440px;height:250px;display:block;margin:0px 0;}
  1. blognav_map .map,#blognav_map .tp_map {width:500px;height:220px;margin:0 0 10px;}
  2. sortorder_info {background:#eff7ff url(https://tp.daa.ms/img/icon_information.gif) no-repeat 3px 3px;padding:5px 5px 5px 25px;border:1px solid #ccc;margin:0 30px;font-size:10px;}
.entry {margin-bottom: 20px;padding:30px;background: #fff url(img/2/icon-seperator.gif) no-repeat bottom;color:#7779ca;}
.entry h1,.entry h2 {width:auto;margin:0;padding:0;text-transform:uppercase;font-size:150%;}
.entry h1 a,.entry h2 a{text-decoration:none;font-weight:normal;}
.entry p.subheading {font-style:italic;padding:0;margin:0;}
.entrycontent, .comment {overflow: auto;}
.entrycontent p {text-indent: 0.9em;}
.entry img.photo {padding-bottom:5px;}
.entrydetails {margin-top: 0;font-size:100%;background:url(img/2/icon_page.gif) no-repeat left;padding:0 0 0 10px;clear:both;}
.commentlink {margin-left:1em;padding-left: 1.5em;background: url(img/2/icon-comments.gif) no-repeat left top;}
.commentdetails {margin-top:0;font-size:90%;font-style:italic;}
  1. comment_in_moderation {border-top:1px dotted #666;border-bottom:1px dotted #666;padding:5px 0;font-style:italic;}
  2. commentform #nonmember_details div {padding:5px 0;}
  3. commentform #nonmember_details div label{width:135px;float:left;}
  4. commentform #nonmember_details div input{width:175px;}
  5. commentform #nonmember_details p.moderate_info {font-size:80%;border-top:1px dotted #666;border-bottom:1px dotted #666;padding:5px 0;font-style:italic;}
  6. commentform input.radio {vertical-align:bottom;padding:0;margin:0 0 1px 5px;border:none !important;}
  7. commentform span.clarify {font-size:70%;margin-left:4px;}
input#ff_rememberme,input#ff_notify {vertical-align:middle;margin-bottom:5px;}
textarea#ff_comment {padding:5px;width:425px;}
  1. entry_options {margin:5px 0;height:25px;}
.bookmarking_options{border-top:1px dotted #eee;border-bottom:1px dotted #eee;padding:4px 0;line-height:11px;width:40%;float:left;margin:0;}
.bookmarking_options img{vertical-align:middle;height:14px;width:14px;}
.bookmarking_options a{margin-right:2px;padding:2px 4px 4px;border:1px solid #fff;}
.bookmarking_options a:hover{border:1px solid #CFE4FF;}
p.entry_nav {border-top:1px dotted #eee;border-bottom:1px dotted #eee;width:60%;margin:0;padding:4px 0;line-height:11px;text-align:right;float:left;}
p.entry_nav a.previous {background: url(/img/icon_previous.gif) no-repeat right;padding-right:15px;}
p.entry_nav a.next {background: url(/img/icon_next.gif) no-repeat left;padding-left:15px;}
p.entry_nav a.toc {background: url(/img/icon_toc.gif) no-repeat;padding-left:18px;margin-left:20px;}
p.entry_nav a {font-size:10px;}
div#ads_entry {text-align:center;}
.othercontent {margin:10px 20px 20px;padding:0 0 10px;border-top:3px double #999;}
.othercontent h2{font-size:110%;}
.othercontent form {padding:0 10px 10px;border:1px solid #ccc;}
  1. entrynavigation {margin-bottom:5px;padding:0 30px;}
.floatleft {margin-right:10px;}
.floatright {margin-left:10px;}
  1. fb-root {clear:both;}

/* Tables */
table {margin:1em 0;width:100%;border-collapse:collapse;border:0;}
table th {padding:0.5em;border-bottom:3px double #666;text-align:left;}
table td {padding:5px;border:0;border-bottom:1px solid #eee;overflow:auto;font-style:italic;}

/* Footer */

  1. footer {display: block;clear: both;margin: 1em 0 0;border-top: 1px solid #ccc;background: #fff;}
  2. footer p {margin: 0;padding:1em 0 .2em;text-align: center;}
  3. footer .tp_plug {margin:0;padding:0 0 1em;list-style:none;text-align:center;}
  4. footer .tp_plug li {margin:0 0.2em;display:inline;}
  5. footer p#copyright_notice {font-size:10px;padding-top:0;}

/* IE Hacks */

  • html #navigation {width:187px;}

/* TP Link block */
.tp_ad {margin:10px 20px;border:1px solid #eee;padding:10px 0 15px;border-left:0;border-right:0;}

  1. ads_entry h4, #ads_entry p {margin:0;}

.fb_like {
margin:10px 0;
}

/* The Travellerspoint bar at the top of the blog */

  1. brand_line {
height: 40px;
background: #333;
border-bottom: 1px solid #4a496e;
font-family:"Lucida Grande",Verdana,sans-serif;
font-size:12px;
margin:0;
padding:0;
margin-bottom:10px;
}
  1. brand_line a {
color: #fff;
font-weight:normal;
text-decoration:none;
}
  1. tp_branding {
position: absolute;
left: 20px;
top: 4px;
padding: 9px 0 10px 160px;
background: url(https://tp.daa.ms/img/blog_branding_logo.png) no-repeat;
}
  1. tp_branding:hover {
margin: 0;
}
  1. user_links {
position: absolute;
right: 20px;
top: 0;
margin:0;
padding-top:13px;
font-family:"Lucida Grande",Verdana,sans-serif;
}
  1. user_links a {
margin: 0 0 0 10px;
padding: 0 8px;
}
  1. brand_line a:hover {
color: #F28E2B;
}

p.remove_ads {
padding: 6px;
font-style: italic;
}

@media only screen and (max-device-width: 690px) {
#brand_line {width:690px;position:relative;}
}

Can anyone help me?

Thank you very much! :)

2. Posted by Vic_IV (Respected Member 117 posts) 28w Star this if you like it!

Look, why make things so complicated?
I have enjoyed using the available templates and have no time/desire to introduce such evident changes.
I am grateful to TP for all the services, including the available templates. :)
Why don't you then simply buy some web space, a web template and publish it your style?
;)

3. Posted by Stefmuts (Respected Member 184 posts) 28w Star this if you like it!

Quoting Vic_IV

Look, why make things so complicated?
I have enjoyed using the available templates and have no time/desire to introduce such evident changes.
I am grateful to TP for all the services, including the available templates. :)
Why don't you then simply buy some web space, a web template and publish it your style?
;)

I totally agree !

4. Posted by ChriNi (Budding Member 13 posts) 28w Star this if you like it!

Thanks for your comments but that’s not my question here :)

[ Edit: Edited on 11-Mar-2020, 17:30 GMT by ChriNi ]

5. Posted by Sander (Moderator 5490 posts) 28w Star this if you like it!

Vic, Stef: Travellerspoint blogs deliberately include the ability to customize templates fully with CSS, and we have frequently offered extensive technical help with this over the years. Please don't be dismissive of such requests, as they're entirely desired here.

Christelle: I'll try to have a look at your blog later tonight to help you out. It's possible I won't manage tonight, in which case it'll be in a day or two. Glad to see you trying to use the blogs here to their fullest! :)

6. Posted by ChriNi (Budding Member 13 posts) 28w Star this if you like it!

Thank you very much Sander, take your time, no rush :)

Tell me if I can help you with something.

Have a good day :)

7. Posted by ToonSarah (Travel Guru 1332 posts) 28w Star this if you like it!

I modified my template a little, with Sander's help, when I first joined TP. Vic, I take your point, but if the facility is there to modify our templates, why not? It's easier for us non-techies than starting a whole separate website, and it enables us to tweak our pages to our liking - one of the things that I most appreciate about this site.

Christelle, I can't answer your questions but I'll be very interested to see the finished result. I'm especially curious about the potential to add black lines as that's something I'd thought might be good.

On the photos, you can get them side by side if you widen the main area of the blog sufficiently but I've never managed to do so enough to get landscape photos to work that way, only two portrait photos or one of each. If you're interested to see what I achieved with my changes have a look: https://toonsarah.travellerspoint.com. The biggest change I made was moving the list of countries to the top but there are others too.

8. Posted by Sander (Moderator 5490 posts) 28w Star this if you like it!

Quoting ChriNi

- the "Navigation" part is down to the bottom and would like it to be next to the first article on the page.

The way the "1900" template is set up is that there's a width property on the #wrapper element of 690px, and a width property on the #blogcontent and #navigation elements of 500px and 189px. 500 + 189 = 689. There's 1px missing, which is needed because it's used by the border-left:1px dotted #bbb; on the #navigation.

You changed the width of the #wrapper element to 1050px, of the #blogcontent to 750px and of the #navigation element to 100px. However, you also set a width to the #center element of 850px (which is centered within the 1050px of the #wrapper). 750 + 100 + 1 = 851px, which is 1px larger than the 850px available space of the #center element, which causes the #navigation element to move all the way down below #blogcontent.
You could fix it by setting the width of #navigation to 99px, or the width of #center to 851px or the width of #blogcontent to 749px; as long as the total of width + padding + border + margin of #blogcontent and #navigation combined is smaller than the width of #center, the two columns will show side by side.

Looking further, I suspect that your goal was to have the text of the blog be as wide as the header photo. If that's the case, do note that you can use a larger version of that photo. You're currently using https://photos.travellerspoint.com/768647/large_IMG_0470.JPG which is 800px wide, but there's also a 1200px wide version created by the system, namely https://photos.travellerspoint.com/768647/xl_IMG_0470.JPG

If you want that to use up the full available space, I recommend the following other changes to #center:
no width (making the full 1050px of the #wrapper available)
background-size: contain; to make the image show up fully (resized down from 1200px to the available 1050px from the #wrapper)
padding-top: 313px; to make the #navigation properly start below the header image.

Note also that 100px is very narrow for the navigation column. Various elements within that column show up outside that width of 100px (the search box and button and the title "Photographie"), which becomes quite obvious if you remove the 850px width from #center. Alternatively, you can also visualize how narrow the column is by giving it a background-color, or by using the "developer tools" built into any browser (right-click on that part of your blog and select "inspect element", or hit F12 to open developer tools, go to the "inspector" click on the little arrow icon in the top left, and click on the column). You might want to increase the #navigation width back to 189px, and adjust the other widths to make it fit? (If you deliberately made the navigation column smaller to have the photos in the photography section show up below each other rather than next to each other, than a change of the width to 183px would already accomplish that without going quite this narrow...)

If you go for removing the width from #center, and setting a 189px width back to #navigation, then you have 1050 - (189 + 1) = 860px remaining width to set for #blogcontent.

Quoting ChriNi

- I would like to have a black line or so in between article

If you mean between two blog posts, this is currently handled by the fancy curly icon at the bottom of a blog post, caused by this CSS rule on .entry:
background: #fff url(img/2/icon-seperator.gif) no-repeat bottom;
You could change that to any other image, but you could of course also add a line by doing something like:
.entry:not(:first-child) { border-top: 2px solid black; }

If you mean a black line between the articles and the navigation column, then change the existing line:
#navigation { border-left: 1px dotted #bbb; }
to something stronger like:
#navigation { border-left: 1px solid black; }
or if you want it to run the entire length of the blog articles, and not be limited to the left of the sidebar, remove that border from the #navigation, and set a border-right to #blogcontent

Quoting ChriNi

- I would like pictures to be next to each other and not all in a row

This happens automatically when there's enough space for two images to fit next to each other. Your width: 850px on #center is preventing it, but going with my suggestion above would already solve it.
Alternatively, you could set a maximum width to all non-large images to make them smaller, and thus fit next to each other even with that small #center column:
.entry img.photo:not([src*="/large_"]) { max-width: 333px; }

I hope all of that is clear enough. Let me know if you have any questions, or would like me to post the full code for all my suggestions.

[ Edit: Edited on 11-Mar-2020, 20:30 GMT by Sander ]

9. Posted by ChriNi (Budding Member 13 posts) 28w Star this if you like it!

Thank you so much both of you, I'm on my way trying to make things work and learn new skills :)