Skip Navigation

Trying to amend Postcard Template

Travel Forums System Talk Trying to amend Postcard Template

Page
  • 1
  • 2

Last Post

1. Posted by Johnash (Budding Member 31 posts) 2y

Hi

Am getting into a pickle trying to customise the "Postcard" template.

I'm trying to get a new banner at the top of my blog, remove the maroon strip at the top and place the headers below the USA banner on the Blog here:- http://justdrive.travellerspoint.com/

I've been trying to follow the notes here http://blog.travellerspoint.com/165/ but have now got completely lost.

Any help would be much appreciated.

I'm just trying to personalize this template this time around. I find the others are too "narrow" and limiting.

Thanks very much
John

2. Posted by Sander (Moderator 4420 posts) 2y

Quoting Johnash

I'm trying to get a new banner at the top of my blog, remove the maroon strip at the top

Find the line which says:
body {margin:0;padding:0;font-family: Georgia, serif;font-size: small;color: #333;background: #ECECDD url(img/8/bg_header.gif) repeat-x 0 7px;}
and change it to:
body {margin:0;padding:0;font-family: Georgia, serif;font-size: small;color: #333;background: #ECECDD;}

and place the headers below the USA banner on the Blog here:- http://justdrive.travellerspoint.com/

This is a bit harder, since the header has a fixed height which is 'necessary' to cut off the background image of the flag; but you could do it like this:
#header #title {margin: 0;padding-top: 20px;font-size: 2em;font-weight: bold;letter-spacing: 1px;text-transform: uppercase;color: #F4F4EC;line-height:1.15em;}
becomes
#header #title {margin: 0;padding-top: 130px;font-size: 2em;font-weight: bold;letter-spacing: 1px;text-transform: uppercase;color: #F4F4EC;line-height:1.15em;}
and
#blogcontent {width:68%;float:left;margin-right:1%;}
becomes
#blogcontent {width:68%;float:left;margin-right:1%;margin-top:90px;}

I've been trying to follow the notes here http://blog.travellerspoint.com/165/ but have now got completely lost.

Yeah, that template is set up in a completely different way, and many concepts don't really apply in the same way to this template. Anyway, I hope you'll get a bit further along with this. Let us know if it ends up being what you want, or if you want further tweaks. :)

3. Posted by Johnash (Budding Member 31 posts) 2y

Sander, thanks. I'll try it later and get back here. Your help much appreciated.

4. Posted by Johnash (Budding Member 31 posts) 2y

That worked nicely, thanks very much.

I'd like to move the banner at the top over so the left lines up with the left of the rest of the blog. I've fiddled with various settings to zero effect!

Sorry for being do DIM! Thanks.

John

5. Posted by Sander (Moderator 4420 posts) 2y

Quoting Johnash

I'd like to move the banner at the top over so the left lines up with the left of the rest of the blog. I've fiddled with various settings to zero effect!

Change
#header {padding-left: 90px;height: 90px;background: url(http://www.travellerspoint.com/photos/originals/195524/USA_Banner_700.gif) no-repeat;}
to
#header {padding-left: 90px;height: 90px;background: url(http://www.travellerspoint.com/photos/originals/195524/USA_Banner_700.gif) 90px 0 no-repeat;}

(Background images have their own alignment settings; here you're basically saying that the image within the header should start 90px from the left and 0px from the top.)

6. Posted by Johnash (Budding Member 31 posts) 2y

Sorry. Not ignoring you - well I have been. I have only just got back to this project. Been preoccupied with other things, one of which is losing my Drivers Licence which could impact on our forthcoming trip.

Will try your suggestions. Thanks so much Sander.

7. Posted by Johnash (Budding Member 31 posts) 2y

That's it; perfecto. Thanks.

8. Posted by Johnash (Budding Member 31 posts) 30w

We´re off again and starting this trip´s Blog, I just found "float". Was it there before, I don't recall it?

I am trying it out on this page http://johashtest.travellerspoint.com/66/ (which I am using to try things out before publishing our next page here http://www.travellerspoint.com/my_blog.cfm?blogid=85472

I would like to give more of a gutter (is that the right word?) between the text on the left and the Youtube video on the right. How can I achieve this, please?

Are there notes anywhere on how to use the float formatting tool and other tools as well?

Many thanks.
John

9. Posted by Sander (Moderator 4420 posts) 30w

I don't know exactly what you mean, but I don't think there've been any significant changes to the stylesheets for the blogs, so the float property should've been there before, yes. (That's assuming you're referring to properties in the stylesheet saying "float: left;" or similar. But I'm doubting that a bit, as I have no idea what you mean by "the float formatting tool". Though maybe you're talking about the language used to describe the layout of your blog? That's "CSS" (Cascading Style Sheets); this is a decent tutorial to learn a bit about that, but it's a lot of information, and you'd probably need to work through almost all of it to have a decent idea of what's happening with the blogs.)

Your test blog has a login on it, so I can't see what you're seeing wrt the gutters ("margin" or generically "white-space" is how I'd probably refer to those). Could you remove the password, or send it to me in a PM, so I can have a look?

10. Posted by Johnash (Budding Member 31 posts) 30w

I will PM PW.

No, I have used the "float" text setting icons (these are to the right of the "text right-align" tool), which give the hints "floatleft & floatright" in the Blog edit window. These are to wrap text around an image or, in this case, a video window, placing the image to the right or left of the text.

As it is, the text goes right up to the video window and it would look much better if there were white space between text and video (or picture or whatever it is the text is flowing round).

Thanks