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 Code:
<a href="link.com"><img src="picture.jpg"></a> Code:
<a href="http://www.ukbusinesslive.co.uk/forum/index.php?styleid=5"><img src="picture.jpg"></a> 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> 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> 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> <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> <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> Code:
Choose Your Color <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> <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> <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> and thats it 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> 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
color.zip (227.9 KB, 607 downloads) Screenshots |