Go Back   vb.org Archive > vBulletin Modifications > vBulletin 3.8 Modifications > vBulletin 3.8 Template Modifications
Reload this Page End-User Options - UKBL ~ Choose Multiple Forum Colors - like VB.Org
FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 9 of 11 « First 78 9 1011
 
Thread Tools
UKBL ~ Choose Multiple Forum Colors - like VB.Org Details »»
UKBL ~ Choose Multiple Forum Colors - like VB.Org
Version: 1.00, by UKBusinessLive UKBusinessLive is offline
Developer Last Online: Feb 2012 Show Printable Version Email this Page
Category: End-User Options - Version: 3.8.1 Rating:
Released: 02-17-2009 Last Update: Never Installs: 65
Template Edits
Re-useable Code Translations  
No support by the author.

UKBL ~ Choose Multiple Forum Colors - like VB.Org


With recent requests to do something similar to VB.org without all the complications of seperate CCS scripts and pages, Now you'll be able to change your forums color, Just like VB.org This hack will show you how to make and customise your own forum styles - Great Fun



PLEASE NOTE, The demo Screenshots are not the Colors you will be getting They are just quick examples i made to show different colors. The Colours are custom made by you when you Edit the CSS in your Styles template folder

Lets get Started

First you will need to decide how many colors you want, For example we'll chose just 4, but you can have as many or as little as you want.

Then decide which forum style you want to use to offer your color changes, I've used just the VB default style for this example.

So here we go..........

1. Go to your Admin CP and select Style Manager

2. Click the Link at the bottom - Add New Style

3. Parent Style - Select the Style that you want to offer Color Changes on, Normally this would be your chosen default style, and name it Default - Green Allow User selection - Yes Display order - 20 Then Save

4. You will see that you've created a copy of your default style called default green. Now we'll need to play with our Colors

5. On your defalt Green style click on All Style Options and GO, scroll down untill you come to the Body CSS

Then basically you need to work your way down this changing Background Colors, font colors etc,, If you click on one of the colored squares you will bring up a selector of colors which can let you chose the color you want without having to know Hex color numbers.

Trust me, I've not done this before and already within minutes i was making different forum styles, It really is that simple, The key word here is experiment You'll love it

To see your changes save and then click on the Forum Home Page link at the top right of your screen.

So basically thats what we need to do to make our different color Styles, Do a new Default Style for each color you want.

Color Squares

Next we'll need our color Squares









Just make your own in the color which best represents your Style and save to your forums /images/misc folder To fit nicely in the bottom navbar, I made mine 13 x 13 pixels and made them in paint.net, You can use photoshop or even windows paint

Half way there

Now comes the Fun Part

We need to Make our Color Squares Clickable so for that we'll have to edit a bit of code.

Open Notepad or a similar Text editor and add the following Code

Code:
<a href="link.com"><img src="picture.jpg"></a>
Now we will need to add our url of our style to the Front of that code like this

Code:
<a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=5"><img src="picture.jpg"></a>
You can find out which Style id you need in the Style Manager in your AdminCP, Next we add the url of our color square.

If you already havn't done so, Upload your Color squares to your forums image/misc folder and use the full url to link to that in the code, so now our code will be like this

Code:
<a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=5"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/green.png"></a>
Then we add a spacer Code to the end of our coded like this &nbsp;


Code:
<a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=5"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/green.png"></a> &nbsp;
Thats it, Then you do that with all the colors and save them one after the other, so you end up with one long line of code

Code:
   <a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=5"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/green.png"></a>&nbsp; <a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=6"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/red.png"></a>&nbsp;  <a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=7"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/blue.png"></a>&nbsp;
Thats the code done, Now to add a few words to the Front of it

Code:
 Choose Your Color &nbsp;  <a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=5"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/green.png"></a> &nbsp; <a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=6"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/red.png"></a>&nbsp;  <a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=7"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/blue.png"></a>&nbsp;
Remember to add a unedited Link back to your normal Style so members can keep using the original, You can use a white color square for this.

and thats it :up: save your work

Next we'll need to upload the code to our footer template of our Parent Style

Go to Default (Parent) style in the Admin CP and select All style Options > Edit Templates > Footer
and then find

Code:
<strong>
and below it add your code, Then save.

You'll see that it will copy to all the child styles automatically

You should get something along the lines of this









Thats all folks

Please Click Install and i'll support 100%

Download Now

File Type: zip color.zip (227.9 KB, 601 views)

Screenshots

File Type: png choser.png (48.9 KB, 0 views)
File Type: png bluepage.png (50.8 KB, 0 views)
File Type: png orangepage.png (50.8 KB, 0 views)
File Type: png redpage.png (50.4 KB, 0 views)
File Type: png greenpage.png (51.0 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #82  
Old 08-09-2009, 01:45 AM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Excellent :up:
Reply With Quote
  #83  
Old 08-09-2009, 06:58 PM
K4GAP K4GAP is offline
 
Join Date: Mar 2008
Posts: 1,255
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by GaryT View Post
This is what I came up with.... looks and works GREAT!

So I thought.
The first two members on the web site to try it said the colors were not changing for them when they clicked a colored square. They are using IE8. I tried it with IE8 and it works fine for me????

Here is the code I'm using....
Code:
<center>Layout Options | <span class="smallfont">Width:</span><a target="_top" href="http://www.publicwarriors.com/forums/index.php?styleid=46">Narrow&nbsp;</a><span class="smallfont">Color:</span>
<a href="http://www.publicwarriors.com/forums/index.php?styleid=32"><img title="Default Style - Tan" alt="Default Tan" src="http://www.publicwarriors.com/forums/images/colors/default_tan.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=10"><img title="Black" alt="Black" src="http://www.publicwarriors.com/forums/images/colors/black.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=14"><img title="Gray" alt="Gray" src="http://www.publicwarriors.com/forums/images/colors/gray.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=18"><img title="Blue" alt="Blue" src="http://www.publicwarriors.com/forums/images/colors/blue.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=12"><img title="Dark Blue" alt="Dark Blue" src="http://www.publicwarriors.com/forums/images/colors/darkblue.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=22"><img title="Light Blue" alt="Light Blue" src="http://www.publicwarriors.com/forums/images/colors/lightblue.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=24"><img title="Royal Blue" alt="Royal Blue" src="http://www.publicwarriors.com/forums/images/colors/royalblue.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=16"><img title="Perfect Blue" alt="Perfect Blue" src="http://www.publicwarriors.com/forums/images/colors/perfectblue.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=28"><img title="Red" alt="Red" src="http://www.publicwarriors.com/forums/images/colors/red.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=27"><img title="Coral" alt="Coral" src="http://www.publicwarriors.com/forums/images/colors/coral.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=26"><img title="Chestnut" alt="Chestnut" src="http://www.publicwarriors.com/forums/images/colors/chestnut.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=29"><img title="Rosy Brown" alt="Rosy Brown" src="http://www.publicwarriors.com/forums/images/colors/rosybrown.gif" border="0" height="9" width="9"></a>&nbsp;
<a href="http://www.publicwarriors.com/forums/index.php?styleid=30"><img title="Gold" alt="Gold" src="http://www.publicwarriors.com/forums/images/colors/gold.gif" border="0" height="9" width="9"></a></center>
Do you see anything in this code that would prevent anyone from being able to use it? This has got me stumped.
Reply With Quote
  #84  
Old 08-09-2009, 07:08 PM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
The beauty of this hack is the fact that its quite easy to do the links are in fact clickable pictures and if your using the basic code there can't really be a problem??

Code:
<a href="yourstyle.com"><img src="picture.jpg"></a>
basically the Url to your style goes in the front and the url to the colored squares goes to the end

Test each url in your brower see if it goes where its meant to

I've just checked a url http://publicwarriors.com/forums/index.php?styleid=28 and it goes to the brown style also with http://publicwarriors.com/forums/index.php?styleid=10 thats brown also ??

You have every style going to the brown style, I think you've not set somthing up right in your style manager???
Reply With Quote
  #85  
Old 08-09-2009, 08:01 PM
K4GAP K4GAP is offline
 
Join Date: Mar 2008
Posts: 1,255
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by UKBusinessLive View Post
The beauty of this hack is the fact that its quite easy to do the links are in fact clickable pictures and if your using the basic code there can't really be a problem??

Code:
<a href="yourstyle.com"><img src="picture.jpg"></a>
basically the Url to your style goes in the front and the url to the colored squares goes to the end

Test each url in your brower see if it goes where its meant to

I've just checked a url http://publicwarriors.com/forums/index.php?styleid=28 and it goes to the brown style also with http://publicwarriors.com/forums/index.php?styleid=10 thats brown also ??

You have every style going to the brown style, I think you've not set somthing up right in your style manager???
You have to be logged in. It works now. It requires user style selection be turned on. I had it off to hide the drop menu. As Admin it would work for me but nobody else.
Everything is good now... thanks!
Reply With Quote
  #86  
Old 08-11-2009, 12:48 AM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by GaryT View Post
You have to be logged in. It works now. It requires user style selection be turned on. I had it off to hide the drop menu. As Admin it would work for me but nobody else.
Everything is good now... thanks!
Just took a look Gary, You did a great job with all the styles, works ok for me buddy. What do your members make of it???

Well done again
Reply With Quote
  #87  
Old 08-11-2009, 01:03 AM
K4GAP K4GAP is offline
 
Join Date: Mar 2008
Posts: 1,255
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Members?
Both of them love it!!
Reply With Quote
  #88  
Old 08-13-2009, 09:44 PM
Kadence Kadence is offline
 
Join Date: Nov 2004
Location: New Jersey
Posts: 29
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
There's probably no way this would work with 3.6.8 right?
Reply With Quote
  #89  
Old 08-13-2009, 10:50 PM
UKBusinessLive UKBusinessLive is offline
 
Join Date: Sep 2008
Location: Essex, United Kingdom
Posts: 1,637
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Kadence View Post
There's probably no way this would work with 3.6.8 right?
This is Basic Html, It would work with VB 2.2 if people still have it
Reply With Quote
  #90  
Old 08-26-2009, 11:16 AM
OcR Envy's Avatar
OcR Envy OcR Envy is offline
 
Join Date: May 2008
Location: Boston
Posts: 248
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
It bothered me that regardless of what page you were on this would redirect you to index.php when you change the color so I wrote up a simple javascript so when a user selects a different color they stay on the page they were viewing.

Place this above your color images:
Quote:
<script type="text/javascript">
<!--
//<![CDATA[
function updatestyle(styleid){
location.href = location.href + "?styleid=" + styleid;
}
//]]>
// -->
</script>
Then the color image/link would change to:

Quote:
<a href="#" onclick="updatestyle(5);"><img src="http://www.ukbusinesslive.co.uk/forum/images/misc/green.png"></a> &nbsp;
onclick="updatestyle(5);" 5 represents the style id, change this to whatever.

Enjoy
Reply With Quote
  #91  
Old 09-04-2009, 02:04 AM
PGAmerica PGAmerica is offline
 
Join Date: Mar 2008
Posts: 405
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thank you for this. It works perfectly for me. However, I have 2 questions.

1) How do I remove the pull-down style selection list so this is the only way to change styles?

2) How do I make this the only way to select a new style in the UserCP?
Reply With Quote
Reply
Page 9 of 11 « First 78 9 1011

« Previous Thread | Next Thread »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 07:28 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.10711 seconds
  • Memory Usage 2,361KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (10)bbcode_code
  • (6)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (6)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete