Getting to know the colours

**protheory** · 10-28-2007, 11:38 AM

Hello everybody, I'm Pro

I'm no doubt following in the footsteps of countless thousands when I say 'I'm new to vBulletin' but that can't be helped right now

I'm currently running a small and relatively simple InvisionFree board and I'm planning to upgrade my primary URL to VB. My current setup is very simple to edit and understand compared to VB and I had no idea how to install skins or anything on VB either. InvisionFree use a couple of simple CSS forms for layout and images and I found the new options in the VB Demo intimidating.

I wanted to keep most of my current skin but there was no simple way for me to learn which of the many swatches was which area of a post, menu, background image etc. I was also aware that I only had 24 hours to use the demo.

I realised that the best way to learn which colour was which was to do it visually. I had read most of the documentation obviously but seeing is so different to reading and trying to imagine what 'Text Box 257...' or similar were.

I needed to learn fast and I needed a template of the colours that I could keep for reference after my 24 hour demo. I just captured the screen and now I have a 'colour map' as such for reference. Not only can I learn without using the demo I can also use the template to restore any new demo or install to this state (visually) so I always know where I am according to the colour.

I apologise for the extreme colours I used here but at the time I needed to clearly distinguish between the swatches. I planned to edit each extreme colour in turn to create my desired theme

The idea is to use a colour matching site to see which colours compliment each other. Then go through the swatches (clearly identifiable by colour) and edit them one by one to achieve my desired colour scheme or style.

I can also use this technique to find which part is which when I want to insert an image instead of a colour. I'm new to this so it's handy for me to know that if I think I'm in the right swatch but I'm not sure I just change it to an extreme colour and refresh the board to see the result and edit as necessary.

This will only be of use no doubt to new comers to VB such as myself but I wanted to post about it as it really simplified my understanding of styles and helped me to get a foothold on the plethora of options available

**Michael Biddle** · 10-28-2007, 07:58 PM

i think i went blind....

**Luigi** · 10-28-2007, 09:08 PM

I assume there is a legend consisting of a color code and associated block that will be posted to show what each of the colors represent in the admin panel?

**bdude** · 10-28-2007, 09:47 PM

Yeah, in the admin panel you can edit the CSS and it tells you the different bits.

If you're looking for colour inspiration check out kuler - it's quite cool for that

**protheory** · 10-29-2007, 02:17 AM

Quote:

Originally Posted by Luigi

I assume there is a legend consisting of a color code and associated block that will be posted to show what each of the colors represent in the admin panel?

I'm planning to do some work on it when I buy VB soon but as I used the 24 hour demo I can't post any more pics just yet I'm afraid. I just went into Main CSS and edited each colour in turn to the colours shown above. It works the same for menus etc too so this way I can match my current skin and decide on a new skin if need be

Quote:

Originally Posted by whitemike

i think i went blind....

Sorry about that

I posted it as a joke skin on my InvisionFree forum and one member actually liked it, she said it would be good for inspiration which is one way to look at it lol.