FreshBlue Template

[Dom.S]

Hi all,

I've just completed my first free vB template which is called FreshBlue (http://www.vayadesign.net/blog/2006/03/29/free-vbulletin-template/).

https://vborg.vbsupport.ru/

Demo Forum: MotoGP Boards (http://www.motogpboards.com/index.php?styleid=4)

Hopefully it will be useful, let me know what you think. :)

Cheers,
Dom

Update
I've updated the template to include some statusicons for the forumhome area. You can see them at the same demo link as before and the download link's the same too. If you would prefer to upgrade the template manually (I made a couple of CSS & template changes) then instructions are available here (https://vborg.vbsupport.ru/showpost.php?p=938296&postcount=21).

Update #2
You can now download FreshBlue for vB 3.6 - see this thread (https://vborg.vbsupport.ru/showthread.php?t=123489) for details and to download.

[twitch]

Nice job :)

[sensimilla]

great job, very nice and clean skin!

[yinyang]

very very nice. looks like it loads fast alsoo.

[Dom.S]

Thanks for the comments. :) It should load more or less as fast as the default vB template as there is only a tiny amount of new markup.

[Bellinis]

Awesome looking skin!! :)

[Snake]

I'm loving it!

[Viks]

looks very nice

[evenmonkeys]

I really like that. Clicked install. =D

[EricaJoy]

oh thats very nice. *clicks install for when i install later*

[yannisc]

very nice... how much would it cost as a brand-free version?

I mean how much should I pay to you so that I have the right to remove your link?

[Dom.S]

very nice... how much would it cost as a brand-free version?

I mean how much should I pay to you so that I have the right to remove your link?

I could have an unbranded copy sent over to you later today for ?30 (approx $50). :)

[EricaJoy]

Heya Dom, would you entertain the idea of making different color variations of this style?

[Ohiosweetheart]

I second princess's request.

I LIKE this style, Dom... very neat and clean-looking. My only problem is with the stock vBulletin forum icons. I'd really love to see different icons there. otherwise, NICE job!

[EricaJoy]

ditto on the icons...i'd like to see it maybe incorporate some of the famfamfam icons.

[Ohiosweetheart]

Good idea Princess. Altho, this being a free style, I wouldn't have any problem with creating my own forum icons for it. I WOULD, however, like to see it in a variety of colors as you suggested.

Someone else here on vb.org did that... it was awesome

[Blackbeard]

I love it and it works great, added a few of my own icons

check it out here if you want

Sharewithus (http://www.sharewithus.co.uk/forum)

still got to sort out the post new threads but this is great work m8 very well done, my members luv it

[Gbml2u]

nod bad , but i don't like it

[Dom.S]

I love it and it works great, added a few of my own icons

check it out here if you want

Sharewithus (http://www.sharewithus.co.uk/forum)

still got to sort out the post new threads but this is great work m8 very well done, my members luv it

Thanks for posting the link, that's a nicely setup forum. :)

I've just released an updated version of the template which includes some new forumhome statusicons. You can download and demo it at the original addresses.

https://vborg.vbsupport.ru/ https://vborg.vbsupport.ru/ https://vborg.vbsupport.ru/

If you're looking to upgrade then I've added some CSS and a couple of template changes as well (just a little formatting on the 'Forum Contains New Posts' etc links) so it would probably be best to reinstall. That said, it's just to make things look a little neater and you could easily get away without it, in which case you just need to upload the new 'freshbluetemplate/statusicon' folder. If anyone would prefer to update the CSS and template changes themselves then I can post the details here.

Regarding other colour schemes... I'll think about it. ;)

[Blackbeard]

Can you upload the CSS and Template changes please.

[Dom.S]

Ok here goes:

Manual Upgrade Instructions

1) Upload new 'freshbluetemplate/statusicon' folder.
2) Open the FreshBlue main CSS and scroll right down to 'Additional CSS Definitions'. In the second of the two boxes, add the following:
.statusiconkey {
border-width: 1px;
border-style: solid;
border-color: #c7d6e1;
background-color: #f1f1f1;
padding: 2px;
margin: 0;
}
3) That's the CSS done, so save that.
4) Open the main 'FORUMHOME' template (in the 'Forum Home templates' section) and find the following:
<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_contains_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_contains_no_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
<!-- / icons and login code -->

Replace it with:
<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_contains_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_contains_no_new_posts]</td>
</tr>
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
<!-- / icons and login code -->

And you're done. HTH. :)

[Blackbeard]

Thanks for the update, how do i get the forum_new, old and locked to display across the bootom of the forum, i think this is much better than downwards.

But i still luv it all m8 and any other improvements is most welcome

[Dom.S]

Thanks for the update, how do i get the forum_new, old and locked to display across the bootom of the forum, i think this is much better than downwards.

But i still luv it all m8 and any other improvements is most welcome

This is untested, but try:

<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_contains_new_posts]</td>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_contains_no_new_posts]</td>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
<!-- / icons and login code -->

[Ohiosweetheart]

I love it and it works great, added a few of my own icons

check it out here if you want

Sharewithus (http://www.sharewithus.co.uk/forum)

still got to sort out the post new threads but this is great work m8 very well done, my members luv ithey not bad Blackbeard! Altho the forum icons don't really match the set, this is a perfect example of how one can replace icons with their own.

[Ohiosweetheart]

Thanks for posting the link, that's a nicely setup forum. :)

I've just released an updated version of the template which includes some new forumhome statusicons. You can download and demo it at the original addresses.

http://www.motogpboards.com/images/freshbluetemplate/statusicon/forum_new.gif http://www.motogpboards.com/images/freshbluetemplate/statusicon/forum_old.gif http://www.motogpboards.com/images/freshbluetemplate/statusicon/forum_old_lock.gif

If you're looking to upgrade then I've added some CSS and a couple of template changes as well (just a little formatting on the 'Forum Contains New Posts' etc links) so it would probably be best to reinstall. That said, it's just to make things look a little neater and you could easily get away without it, in which case you just need to upload the new 'freshbluetemplate/statusicon' folder. If anyone would prefer to update the CSS and template changes themselves then I can post the details here.

Regarding other colour schemes... I'll think about it. ;)

Now THOSE are nice! I'll be installing this one later today, now, with those new icons.

as for the various colors... glad to know you're thinking about it :D

[Ohiosweetheart]

This is untested, but try:

<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" alt="$vbphrase[contains_new_posts]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_contains_new_posts]</td>
<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" alt="$vbphrase[contains_no_new_posts]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_contains_no_new_posts]</td>
<td><img src="$stylevar[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" class="statusiconkey" border="0" /></td>
<td class="smallfont">&nbsp; $vbphrase[forum_is_closed_for_posting]</td>
</tr>
</table>
</td>
<if condition="!$show['guest']">
<!-- member logout -->
<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out()"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
<!-- end member logout -->
</if>
</tr>
</table>
<!-- / icons and login code -->

in which template?

[Dom.S]

in which template?

That would be in 'FORUMHOME' instead of my original replacement code. Like I said I haven't given that a go myself, but it should be alright.

[Blackbeard]

Thats it, i just need to center it, cheers m8

[Nathan2006]

Thank you Dom.S

Nice and clean :)

Install

[JimNY]

Awesome.......Thanks

[jellybaby]

Would be great if somehow I could work out how to fit my current banner inside the borders, is there any way?

[Dom.S]

If I was you I'd probably do something like this:

http://img57.imageshack.us/img57/8561/mumzone9xs.th.jpg (http://img57.imageshack.us/img57/8561/mumzone9xs.jpg)

I could code something along those lines very affordably if you were interested. ;)

If not then I would suggest you have a look at replacing $vboptions[bbtitle] in the header template with your standard banner image. I'm not sure how you could add a banner inside the borders and still make it look good without bigger changes tbh.

[jellybaby]

Is anyone able to help with the following please:-

1. I am trying to add this template but make a few changes. I have found that when I change the background colour it performs differently in Firefox to Internet Explorer, if I change the font colour so it looks right in IE its out in Firefox and vice versa, any ideas please?

2. For some reason when I change the width of forum its not changing top section. Again, any ideas?

Forum can be viewed at http://www.mumszone.co.uk/forums but you need to change to Fresh Blue on bottom right hand of screen. Any help much appreciated.

Thanks

[Dom.S]

Is anyone able to help with the following please:-

1. I am trying to add this template but make a few changes. I have found that when I change the background colour it performs differently in Firefox to Internet Explorer, if I change the font colour so it looks right in IE its out in Firefox and vice versa, any ideas please?

2. For some reason when I change the width of forum its not changing top section. Again, any ideas?

Forum can be viewed at http://www.mumszone.co.uk/forums but you need to change to Fresh Blue on bottom right hand of screen. Any help much appreciated.

Thanks

1. I'm not sure exactly what you mean. If you're talking about the header image (http://www.mumszone.co.uk/images/header.png) having a different colour around its edges I think it's fairly likely that's because IE isn't very good with PNG images. Try that as a GIF of JPEG and that problem should be fixed. You mention font colours, but they all look standard?

2. To change the overall width you need to edit #freshbluecontainer and #fbfooter in the additional CSS definitions. I have just tested changing these ids and the end result is this (http://www.motogpboards.com/?styleid=4) (only a temporary link, I'll change it back to the default later). To achieve that you need to change the forum width setting to what it was before and then make these changes:

Replace #freshbluecontainer with:
#freshbluecontainer {
background-color: #FFFFFF;
background-image:url(images/freshbluetemplate/bodybg.gif);
background-position:right;
background-repeat:repeat-y;
width: 800px;
margin: 0 auto;
}
Replace #fbfooter with:
#fbfooter {
background-image:url(images/freshbluetemplate/footerbg.gif);
background-repeat:repeat-x;
height: 84px;
width:800px;
margin: 0 auto;
}

Where 800px is the width you are aiming for.

(I might as well release this as a fixed width version now I guess!)

[jellybaby]

Thanks Dom. Such a great template and fits in great with my site, I love the smooth edges as opposed to the ones I have now! Sorry it wasnt the font it was around the edges of the banner, I have the same problem with the colour on my Joomla as well!

[jellybaby]

A problem with the narrow version, when I click on get new posts the bar that has contact us, etc on at the bottom is still stretched wide! Also, when I click on the pull down list at the top the list doesnt actually show underneath them anyone else have this?

Not sure if this link works:-

http://www.mumszone.co.uk/forums/search.php?do=getnew

[TomJames]

awesome skin *clicks install*

[Dom.S]

A problem with the narrow version, when I click on get new posts the bar that has contact us, etc on at the bottom is still stretched wide! Also, when I click on the pull down list at the top the list doesnt actually show underneath them anyone else have this?

Not sure if this link works:-

http://www.mumszone.co.uk/forums/search.php?do=getnew

I'm happy to have a look at that for you but at the moment I can't select a different skin at all so can only view things with the standard invision boardish template. That search asks me to log in as well.

Edit: Glad you like it, TomJames. :)

[Blackbeard]

Yes its great my members luv it

[TomJames]

Sorry im a bit new to this but im not sure how to add my banner to this skin.

[Dom.S]

What you want to do is replace $vboptions[bbtitle] in the header template with an image tag or whatever you would like to appear as the 'home' link.

[jellybaby]

I'm happy to have a look at that for you but at the moment I can't select a different skin at all so can only view things with the standard invision boardish template. That search asks me to log in as well.

Edit: Glad you like it, TomJames. :)

Sorry I had to change it back as I did something wrong when I was trying to install my hacks!:confused:

[jellybaby]

Has anyone else got the problem that when they click on the pull down lists it comes up in a funny place, not where it should?

[Luxury]

Are we allowed to remove the "skin designed by: ..."?

[Ohiosweetheart]

Are we allowed to remove the "skin designed by: ..."?

only for a fee

[Dom.S]

Has anyone else got the problem that when they click on the pull down lists it comes up in a funny place, not where it should?

I realised that the CSS changes I gave for the fixed width setup aren't really comprehensive enough. I've now got a fixed version of the skin (http://www.motogpboards.com/?styleid=5) sorted which I should get around to releasing later today, but in the meantime I would suggest you try adding the following at the bottom of the 'additional CSS definitions' area:

/* Fix navbar pop-up menus */
#usercptools_menu, #navbar_search_menu {
margin-top: -100px;
margin-left: -160px;
}

(I can't remember if the 'Fix navbar pop-up menus' definition already exists in the full width version of the template. If so, just replace it with this.)

If that doesn't help at all you may want to work on the fixed version of the skin rather than this one, but if you've already spent a lot of time on this I'm sure we can still get everything working properly with your changes.

[jellybaby]

Thanks so much for all your help on this, its much appreciated. Unfortunately that didnt make any difference.

[Dom.S]

Sorry that was no help, jellybaby. I will try and have a look at your forum later.

I have just released the fixed width version (https://vborg.vbsupport.ru/showthread.php?t=114104) which you may find quite a bit easier to work with.

[IceBurn3000]

Has anyone else got the problem that when they click on the pull down lists it comes up in a funny place, not where it should?I am also having this problem and the fix Dom gave didnt work.

[Dom.S]

IceBurn, looking at your forum (http://www.newayz.net/forum/), the problem is that you have content above the navbar. Since the navbar is already negatively positioned in the design in order to fit nicely into the curved corners, things are getting messed up. I would suggest you put the welcome headers stuff underneath the navbar if at all possible.

That said, you can use my fix, I assure you. Might need some different numbers, though. ;) Firstly, I looked at your CSS - you have the 'Fix navbar pop-up menus' in there twice. Most likely once in each of the additional CSS definitions boxes. Delete them both. Once you've done that you have a base and can find the correct negative margins through trial and error. The problem with doing this when you have text content above the navbar (and therefore drop down menus) is that if that text size is increased, your navbar will move down but the menus won't, so there could be some positioning problems.

(is it me or is vB.org a bit dead server-wise atm?)

[thptquynhluu1]

Very nice! Cool! Thanks !

[jellybaby]

Dom have set this so you can see it on my site now. Need to change the template at the bottom

[IceBurn3000]

IceBurn, looking at your forum (http://www.newayz.net/forum/), the problem is that you have content above the navbar. Since the navbar is already negatively positioned in the design in order to fit nicely into the curved corners, things are getting messed up. I would suggest you put the welcome headers stuff underneath the navbar if at all possible.

That said, you can use my fix, I assure you. Might need some different numbers, though. ;) Firstly, I looked at your CSS - you have the 'Fix navbar pop-up menus' in there twice. Most likely once in each of the additional CSS definitions boxes. Delete them both. Once you've done that you have a base and can find the correct negative margins through trial and error. The problem with doing this when you have text content above the navbar (and therefore drop down menus) is that if that text size is increased, your navbar will move down but the menus won't, so there could be some positioning problems.

(is it me or is vB.org a bit dead server-wise atm?)My bad.. i had gotten distracted while applying the update. All working now! Thanks!

[Dom.S]

Glad that sorted it, IceBurn.

Dom have set this so you can see it on my site now. Need to change the template at the bottom

Ah ok, well the reason these aren't working properly is that my 'fix' only applies to the standard menus, ie the search and quick links menus. Also as you've also modified the navbar quite a bit we may need some different margin numbers to get the positioning right. Not a problem though. What I'd suggest you try first is to add the extra menu navbars to CSS 'fix', with this code (replace the old one):

/* Fix navbar pop-up menus */
#custom_links_menu, #itrader_ext_menu, #usercptools_menu, #navbar_search_menu {
margin-top: -160px;
margin-left: -100px;
}

The second problem is that your iTrader dropdown doesn't seem to be loading at all. I've checked, and this is because it doesn't exist. The menu should be starting with the code:

<div class="vbmenu_popup" id="itrader_ext_menu" ...

But that just isn't in the markup, for whatever reason. So to make it appear, you need to add the menu content into the markup somewhere. There's more info on doing that here (http://www.vbulletin.com/docs/html/main/templates_vbmenu).

[jellybaby]

Sorry should have said I knew some didnt work not all info added in for the Itrader. Tried the fix you suggested but unfortunately didnt make any difference.

[Dom.S]

The fix definitely does make a difference as I tested it myself to be sure. ;)

I've uploaded the test file I used. Most of the images are broken as it apparently saved oddly, but you can see that the extras menu behaves as it should. http://www.vaya.ws/misc/mumzonetmp/

I haven't changed the HTML at all there, that's just the CSS change I gave in my previous post.

[jellybaby]

OK Ill reinstall to see if that helps, thanks Dom

[jellybaby]

Very strange, I did a fresh install and put the exact code in you said, and its still not coming up in the same place as yours! Ive just played around and seem to have it in the right place now though thanks.

[Dom.S]

Glad that's sorted it. :)

[Zachery]

As per your other thread, all modifications (styles, addons, hacks, etc) must be avaible here on vBulletin.org.

[Dom.S]

First post updated to include the download as an attachment.

Incidentally, if you have installed the template before today and either your showthread.php pages are not displaying correctly or your registration pages are messy (ie they don't look like this (http://www.motogpboards.com/register.php?styleid=4)) then the newest version fixes those issues. Also, the markup now validates as XHTML transitional.

[Sureshkumar]

This is the best template i have seen here. What an awsome kool template yaar. Great job.

[yellow_spider]

Very nice , excellent job. :cool:

[Zachery]

So just wondering where did your insperation for this style come from?

[Dom.S]

Hard to say really, I wouldn't say anything in particular. I just favour nice 'clean' looking designs and after setting up my own vB powered forum I liked the template system so much I thought it'd be good to start offering those services as well as 'normal' web dev etc. What better way to get the ball rolling? :)

[Dawnf1]

Hi

I recently installed your skin -it looks great, but unfortunately I have a slight problem.
I have this (https://vborg.vbsupport.ru/showthread.php?t=104725&highlight=menu) installed, and it's worked fine throught out the forum on all our skins, but does not show up on this new skin. All my skins have our default as the parent skin, and usually when a new skin is installed, everything appears on it the same as the default.

Also, the things which are added to my quick links bar in default skin, such as arcade, are not showing on this skin.

I'd appreciate any help with this.

[Dom.S]

I would suspect that the problem is that the template uses a non-standard 'navbar' template. If the navbar was standard it would inherit the markup (and links) from the default style, however it is not so you get the 'navbar' specific to FreshBlue.

Unfortunately I can't really see a way around the problem as the changes made to 'navbar' are important to the template as a whole, you wouldn't be able to revert to the standard template without a lot of errors appearing.

Sorry about that.

[rickyreter]

will this work with 3.6.5:)