<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener("load", function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <iframe src="http://www.blogger.com/navbar.g?targetBlogID=23121500&amp;blogName=Free+Blogger+Skins&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=CLASSIC&amp;searchRoot=http%3A%2F%2Ffreeskins.blogspot.com%2Fsearch&amp;blogLocale=en_US&amp;homepageUrl=http%3A%2F%2Ffreeskins.blogspot.com%2F" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe> <div></div>

Friday, July 06, 2007

Greener Pastures 3 Column Blogger XML Skin

Free Blogger / Blogspot XML skin / template! Click on the image to open a new window for a larger view. This template is fixed width and designed for 1024x768 and wider screen resolutions. This template will NOT work in "classic" Blogger mode.

This theme features an easy to edit navigation bar in the heading, 3 full columns, a built in RSS Feed and full support for drag and drop sidebar widgets to add content.


Click Image For Larger View!!


Click Greener Pastures 3 Column Blogger XML Template to download the code. Only 12KB.

The images are already hosted via Photobucket, no need to download those separately!

IMPORTANT!

Make sure you backup or save your existing customizations like links and sidebar addons, hit counters, widget contents, etc. before deleting the old skin because they will be replaced by the new code. After installation just copy and paste your customizations back in from your original code.

Backing Up And Installing
Backing Up Your Old Template Data
Installing Your New XML Template

In some cases the template editor will ask to confirm the deletion of some of the widgets / page element sections. This will happen when you have widgets installed that are not included in this theme. This theme includes a bare minimum of widget elements. You should make backup copies of the contents of those widgets before deleting or you will lose the data! Once the theme is installed, you can reinstall your widget elements and complete the customization.

Your blogs title will automatically replace the title you see in the header. The description or tagline will display in the header panel, edit it in your blogs "Settings" area.

If you have any questions or problems please ask in the comments, don't email me directly! I will offer limited tech support thru the comments only!

For easy to follow technical help and tutorials on blogging, please visit

Ready for a custom designed skin? Visit
Stay tuned for more free templates!

tags: , , , , , ,

Tag this post on Reddit Tag it on Furl Stumble It Blogmarks Bookmark it on Google Tag it on Squidoo Add to My Yahoo Add to Onlywire Multiple Choice Bookmarking

52 Comments:

Anonymous Hillary said...

You rock Se7en!!!! I love all your works! I would like to use this template in my blog if you dont mind :-) And btw, i want to change the horse picture cuz i want something that looks more girly, can you pls tell me how to change it? Thanks a lot, cant wait to see another 3 columns template.

12:00 PM  
Blogger se7en said...

Thanks! Of course you can use it, that's what it's there for!

To change the header background image, look for this section in the Edit HTML page:

#header-wrapper {
background: url("http://i188.photobucket.com/albums/z203/freetemplates5/horses-heading.jpg") no-repeat;
width:980px;
height:260px;
margin:0;
padding:0;
text-align:left;
border-top:6px solid #77b842;
border-bottom:6px solid #77b842;
}

And change the link to the image of your choice. For best results, size your image to 980 pixels wide by 260 pixels high or it won't fit properly without a lot of editing in the CSS. An odd size image will throw off the position of the navigation links bar too.

By the way, that's the only image in the template, all the rest of the background and font colors are editable in the CSS.

12:36 PM  
Blogger Talia Mana said...

fantastic!!! i'm looking forward to using this with my own custom image.

4:21 AM  
Blogger Talia Mana said...

hi again

I've adjusted the css template to fit the size of my image, and moved the nav tabs and moved up the sidebars and divider... but I'm having challenges with the title. I'd like to remove the title as my image includes the name of the blog, so i don't want the title or description of the blog appearing.

Can you please tell me which part of the code to change/remove???

I still have to play with the colour scheme and a few other things before I take it live, but I have a test format up at http://moneypsychologist.blogspot.com/

P.S. I am really impressed with your skins. I loaded up the chocolate one for a friend's blog and it went very smoothly.

I had been playing with a blogcrowds 3 column format with some help from stavanger, but this one works without any fixes needed, and I love having the nav tabs already coded!!! Brilliant.

5:47 AM  
Blogger se7en said...

Hi Talia, thanks and I'm glad you like the skin.

Here's how you remove the title words, look for this section:

div id='header-wrapper'

And remove all the text between it and this line:

div class='top-nav'

However you will need to readjust the padding of the top-nav section in the css again because it will move up with the header div removed.

Hope that helps =)

7:20 AM  
Anonymous Hillary said...

LOL i had the same problem like Talia, but i didnt know how to fix it... Soooo I hided my blog title and description by changing the color :-) A bit stupid but it works!

2:18 PM  
Blogger Talia Mana said...

Yes that sorted it se7en

Thanks for your help... I'll finish it later tonight. I better go get some "real" work done now!

8:02 PM  
Blogger Talia Mana said...

Back again LOL

The only problem that I am having with the layout is when an image is inserted to the right of the text. It doesn't "float" and instead pushes all the text down. Any idea why?

12:25 AM  
Blogger se7en said...

Talia, people are having a lot of trouble with that same problem on the xml templates and I'm not sure why.

The first thing to do is look in your Settings on the Formatting tab, make sure float alignment is set to yes.

If that doesn't help take a look at this link on the Blogger Help Groups

Hope that helps!

9:52 AM  
Blogger Talia Mana said...

thanks for visiting my blog. the float alignment was working fine in the rounders template and i haven't changed the settings

as an experiment i went into the float settings and tried changing from yes to no and back again but it didn't help lol

thanks for the tips on the colours. i definitely need to work on them but i'm still really excited to have the 3 column up and running with top nav tabs even if the colours aren't quite right!!!

6:30 PM  
Blogger Talia Mana said...

i'll check with that blogger help group and let you know when i've solved the mystery

6:38 PM  
Blogger Talia Mana said...

here is the answer from the blogger help group

Ihttp://groups.google.com/group/blogger-help-publishing/browse_thread/thread/3f2c696fb3f6a5d4/71ad0cb97fbf736a

2:19 AM  
Anonymous Elroy said...

You have some great work , is it ok for me to use your templates on my blog

12:47 AM  
Blogger F1 Wolf said...

I used one of your templates, changed it a bit, love it !

Thanks !

3:49 AM  
Blogger LUVS2BaSAHM said...

I'm working on my blog, it's new. I love this template! Thank you for the super easy to follow instructions.

I have one question about the tabbed links. I opened the html editor and changed the links there. Did I do it right? I really am not sure what I'm doing, even though it looks like I may have done it right.

12:12 PM  
Blogger MejreM said...

Hi se7ven, and thanks alot of the 'green pastures' template, the only one that I didn't find any significant trouble trying to customize, however, there is only one problem which is changing the Page Background Color, I'm pretty sure that this is the section:

Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff"

I changed it to :

Variable name="bgcolor" description="Page Background Color"
type="color" default="#E27437" value="#E27437"

But nothing is happening and the background is still white, could you please help out?

also, unintentionally, the footer background color i chose is very similar to the credit link so it's hard to distinguish it, what should i change to make your link more obvious?

again, thanks for any help!

3:57 AM  
Blogger se7en said...

MejreM, you have to change the colors further down in the stylesheet according to the section you want to change.

Look for background colors under outer-wrapper and footer-wrapper.

Also, I couldn't view your site because your profile isn't set up correctly.

Hope that helps.

10:03 AM  
Blogger andi miswar said...

I'm working on my blog, it's new. I love this template! Thank you for the super easy to follow instructions.

I have one question about the tabbed links. I opened the html editor and changed the links there. Did I do it right? I really am not sure what I'm doing, even though it looks like I may have done it right.

10:15 AM  
Blogger andi miswar said...

I've adjusted the css template to fit the size of my image, and moved the nav tabs and moved up the sidebars and divider... but I'm having challenges with the title. I'd like to remove the title as my image includes the name of the blog, so i don't want the title or description of the blog appearing.

Can you please tell me which part of the code to change/remove???

I still have to play with the colour scheme and a few other things before I take it live, but I have a test format up at http://moneypsychologist.blogspot.com/

P.S. I am really impressed with your skins. I loaded up the chocolate one for a friend's blog and it went very smoothly.

I had been playing with a blogcrowds 3 column format with some help from stavanger, but this one works without any fixes needed, and I love having the nav tabs already coded!!! Brilliant.

10:16 AM  
Anonymous se7en said...

Yes, it looks like you did it right. Nice job. The background colors of the tabs are editable as well as the text color.

The CSS pertaining to the tabs are all in this section:

#header-wrapper .top-nav a {
background:#77b842;
margin:0;
padding:2px 10px 3px;
border-top:1px solid #c9eeab;
border-left:1px solid #c9eeab;
border-right:1px solid #c9eeab;
text-decoration:none;
color:#FFFFFF;
}
#header-wrapper .top-nav a:hover {
background:#a4e470;
color:#000;
text-decoration:none;
}
.top-nav ul {
margin:0;
padding:125px 10px 0;
list-style:none;
float:right;
}
.top-nav li {
margin:0;
padding:0;
display:inline;
}

The background # is the color of the tabs themselves in normal and mouse hover. The word color pertains to the color of the text in the tabs.

It also looks like you figured out how to remove the title text section too.

11:25 AM  
Blogger Talia Mana said...

ok that's weird

andy miswar has copied and pasted my earlier comment (look further up the page)

some sort of spam???

a question se7en if you have time...
i've modified my template and it works fine except the border below the title image and nav tabs drops down in IE but looks fine in FF

blog www.nzrealitytv.com

and yes I will change the colours to match better, especially down the bottom, but for now I've got to sort that strange border dropping down!!!

2:15 AM  
Anonymous se7en said...

Talia - actually it only looks messed up in IE 6, IE 7 looks fine as does Firefox. You need to reduce the padding to the top of the ul (the 125px number) so that it looks ok, and then you need to change the color of your tabs to match the bottom border color.

The different browsers handle the positions differently but you can work out an average of the three by masking that space with the border behind them. You're not going to get them perfectly positioned across all three. You have to go with what looks best across the board.

But it won't work if your tabs are a different color than the border.

7:41 AM  
Blogger Talia Mana said...

Thanks se7en

I have IE 6 so I hadn't checked IE7. I'll upgrade to sort it, but I hadn't realised I needed the same colour border! I'll have a wee think on that and decide what colour I want...

4:44 PM  
Blogger MollyB, Bloggerin said...

Hi se7en,

stooopid question: how does one create pages w/in blogger to which one can link from your tabs?

e.g. to create an 'about me' page or a page of links to recipes or motor part suppliers or whatever.

thanks.

7:01 PM  
Anonymous se7en said...

Molly - While you can't create extra pages within Blogger (it doesn't have that capability like Wordpress) you can write that info into a post then put a direct link to that post in the nav bar at the top.

You can also link to things like your MySpace page if you have one or Flickr photo album or anywhere else you want to have a link to in a handy, very visible location. Just use your imagination =)

11:31 PM  
Blogger MollyB, Bloggerin said...

Thanks se7en.

2:21 PM  
Blogger Cait London said...

I am trying to use *horses 3 column and finding that in the edit template/add element the right column runs off into nowhere, rather there is no right column, just fragments, i.e. home. I took off profile as I didn't have it before. Could you help me please?

5:55 PM  
Anonymous se7en said...

Cait - That's usually just a problem with Firefox but you should be able to scroll to the bottom of the page where you'll see a sideways scroll bar. Then you'll be able to scroll over to see the Add Elements on the right side.

8:01 PM  
Blogger Lois said...

That worked great Se7en. Thank you. I'm not a fan of IE and generally use FireFox/Mozilla, etc. But I'll use it to edit the template.
Thanks again.

10:57 PM  
Blogger LORD MANILA STONE said...

thank you so much, i really find your templates so exciting, i am working on my second one, thanks again, you just made blogging more exciting and fun for me^^

10:19 AM  
Blogger Mabelle said...

Nice template....

1:28 PM  
Blogger Smurf said...

Hi se7en,

First off, I'd like to compliment your patience handling all these questions and how-to's, so in behalf of everyone else using your excellant templates, thanks!

as for my question, I'd like to know if there's any way to change the colors of either the central section of the 'body' where posts usually go, or the side columns, thanks in advance.

3:58 PM  
Blogger ZAM said...

I loaded this template : http://freeskins.blogspot.com/2007/07/greener-pastures-3-column-blogger-xml.html


It seemed to work at first. I then switched back to my old blogger template. But when I tried to reload the Greener Pastures template. I get this error code: bX-2y36e6

I've tried to reach blogger help but there's still no reply at the moment.

6:25 PM  
Blogger ZAM said...

Got my concern solved now. I made minor modification and it worked. Thanks for this template.

7:29 PM  
Blogger Eny Widiya Astuti said...

hi, I'm eny (sound like annie) from Indonesia. Thanx a lot for your blooger skins. I've been months looking for nice and easy 3-column-type, and now I've found it.

6:13 AM  
Blogger Anne said...

Thanks for the template. I have a problem with the header. I have created a new image the same size as the horses but it is showing as smaller and sits to the right. What is wrong?

4:06 PM  
Blogger Chris said...

I am having a similar problem as Anne as well. My image is 980 wide but lines up to the left and doesn't go all the way across the page. Is there a way I can fix this...or at least center the image?

Thanks for the template btw, I've been looking for a three column template that I liked.

5:16 PM  
Blogger qonitasholihah said...

hi, im from indonesia..i like this skin. and im using this. thanks a lot :)

10:07 PM  
Blogger headtee said...

hi, i use ur template, i've trouble to edit the blog title. i've tried the steps that u said to hillary but it doesn't work. pls help. thx for ur kind

11:04 PM  
Blogger DaNnEa said...

Hi se7en, this template is awesome! I have a noob question though. The links at the top right, the one that says home, about me, another link... How do you change those? I mean how do you change 'another link' to 'computer stuff' for example? And how do you link your posts? I know it's asked above but please clarify coz I still don't get it T_T

10:39 PM  
Blogger DaNnEa said...

hi, you need not answer that previous post of mine coz I already found a way around that. I do have another question though. Please bear with me. How do you add digg and stumbleupon to this template? Please reply. thanks.

6:15 AM  
Blogger Syn said...

Hi. I've been looking all over the web for a cowgirl blogger template and found yours with horses. I like it for my blog, but I can't figure out how to get the other columns to come up to the side. All but one are on the bottom of the blog. I am a noobie so this editing html stuff is confusing so go easy on me, lol.

http://www.cowgirl-up.net

Thanks!!

12:49 PM  
Blogger se7en said...

Syn - It looks the error is in your posts, it may be an unclosed div tag or an unclosed center tag that you're using to center your videos. Take a close look at the html in your posts by reopening them in the post editor. Make sure all tags are properly closed.

If that doesn't fix it, do the same thing with the contents of your sidebar widgets, by opening them and carefully looking at the html you've added.

All tags must be closed! That means if you a <center> you must close it with </center>

7:59 AM  
Anonymous Johnny said...

Awesome i like this template a lot...um i think templates with 3 columns are best so i think you should make more with 3 columns....anyway thanx man for making such nice template

7:26 PM  
Anonymous Johnny said...

Um btw can you tell me how i can edit sidebars so they will have black or green (or anyother cool border color wich will fit nice in template) border cuz i don't want all to be white :P
and please one more question ...how to say main color of template is green so how to change it to be blue but not dark blue more like idk light blue and i would be greatfull if u can answer on my questions

7:49 PM  
Anonymous Michael said...

Hi Se7en,

After installing your tmeplate, I want to alter the text, fonts, background colours etc to suit, however, when I go to Fonts and Colours and try to change things- nothing is happening at all. Can you tell me how to do it please?

http://crossroadsofculturesp7.blogspot.com/

Many thanks

Michael

4:12 PM  
Blogger Makita said...

First, let me tell you how much I love your skins! Thank you!

I would like to change the banner picture and have followed your instructions to the first poster here in the comments section (hillary). I have created an image (980x260 pixels), I uploaded to photobucket, and attempted to replace the url as stated but I keep getting an error message. What am I doing wrong?

Thank you.

9:13 AM  
Blogger Makita said...

This post has been removed by the author.

9:43 AM  
Blogger Makita said...

Okay. I've messed with it for some time and can't seem to get it right. The image looks okay but there is white space on the right and on the bottom. The tabs are no longer aligned on the bottom. Can you help me figure out how to tweak this?
Thank you.

10:14 AM  
Blogger Nancy said...

hm, i notice you have tabs on this with home and about me, etc, how do you customize that? I am assuming you dont add these things at layout, but in the change html...but what exact link are you putting in? Blogger is only one page, if you are linking, what are you linking to? Another blog?

1:18 PM  
Blogger Makita said...

Hi Nancy - I posted my ???s months ago and haven't yet received a response from Se7en. However, I can answer your ?? .....

Yes... you edit the tabs in HTML. The tabs you link to will need to be another blog, I believe.

The HTML you need is within the header wrapper near the bottom and looks like:

[li][a href='http://www.blogger.com/profile/093168915271']About Me[/a][/li]

Of course, in the HTML ... the [ ] are actually < >.

Just change the URL to point to the blog you want the tab to jump to. Change 'About Me' to the title of that blog.

Hope that helps.

9:31 AM  
Blogger se7en said...

Yes, thats correct, the links for the tabs must be edited in the HTML but it's very simple.

Just scroll down until you find the section and You will find some instructions on how to do the editing right in the page.

You can also link to previous posts or an about me post in your own blog or create a link to anything you want to anywhere on the 'net.

7:50 AM  

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home