End-User Options - UKBL ~ Choose Multiple Forum Colors - like VB.Org

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

<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

<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

<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  

<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

   <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

 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

<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%

[Manic Mechanic]

Originally Posted by sKippah

Ok so far.. but what about the code? seems i have to add this to every footer Template? Thanks

The code you add to the footer, you only have to add it one time to your parent/default style. It will be in all the other styles you make.

[Manic Mechanic]

Originally Posted by PGAmerica

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?

Edit: Sorry I checked this as an Admin and it worked fine. When I checked as a regular user the colors will not change if you do as I say below.

Go to acp and click vBulletin Options, then go to Style & Language Settings. Go to 3rd. box down marked Allow Users To Change Styles. Click no then scroll to bottom and click save.

[Manic Mechanic]

Oh by the way I did this hack on 3.8.4 and it works great. Thanks

[The Smoking Gun]

Thanks for the convenient hack UKBL, is there an option for the fluid fixed change over too?

Also will running vBa be an issue with this hack?

Thanks, will mark installed as soon as I manage to get through the install LOL!

TIA,

TSG!

[caliman]

With 'allow users to select styles' and this mod... when somebody clicks a color square - will vb remember your selection next time you come to the site?

[Devanand]

Great hack, work fine but don't work on IE8 for me...what can be problem?

[TheLastSuperman]

Originally Posted by The Smoking Gun

Thanks for the convenient hack UKBL, is there an option for the fluid fixed change over too?

Also will running vBa be an issue with this hack?

Thanks, will mark installed as soon as I manage to get through the install LOL!

TIA,

TSG!

It should work in Fluid or Fixed width's as long as the code has been added for selection. This should also work with vBa just be sure to upload the cloro squares and any other required files into the correct style folder in your vBa directory .

Originally Posted by caliman

With 'allow users to select styles' and this mod... when somebody clicks a color square - will vb remember your selection next time you come to the site?

Caliman... come on bud... did you test that before you posted? You could have logged out, closed the browser and checked yourself Let us know, maybe we can add it in to remember if not .

Originally Posted by Devanand

Great hack, work fine but don't work on IE8 for me...what can be problem?

What can it be... IE! Firefox FTW (For the Win!) See if this works in IE7 and if your in IE8 try the compatibility tab (IE8 it works for me, reverting back to IE7 now.. bad IE!!!)

AND to everyone, if your style is showing the blue or "purple once visited" border arounf the image simply modify each img code like this:

<img src="http://www.yoursite.com/yourimage.png" style="border-style: none"/>

Your just adding the code to remove any styling per say i.e.

style="border-style: none"

Mike

[Hornstar]

Would love if something simple was made for VB4. Are you interested in making a new one for Vb4?

[archet1337]

Working with vB 4.0.2. Thanks

[caliman]

Originally Posted by OcR Envy

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:


Then the color image/link would change to:



onclick="updatestyle(5);" 5 represents the style id, change this to whatever.

Enjoy

This javascript did not work for me... did it work for anyone else?