Themes: Bluebarr theme (Barr Family website, part 2)

Posted by: beerMeon 2005/1/9 8:32:25 6315 reads
View the theme here.
Download it here.

If you have any constructive criticism for me, I would love to hear it. I'm always looking to learn from the masters.

Important Notes:
This theme uses the center-right block in the banner area; therefore you can't use center-right blocks in the rest of your site. You can put any center-right block in the banner, just make sure it doesn't exceed 100px in height or it will expand the table and cause trouble.

The theme puts links just below the logo for View Account, Edit Account, Logout, and Admin Menu. Therefore I have removed these links from the User Menu on my site, leaving only Notifications and Inbox. I renamed the User Menu to "Messaging." This helps to conserve space and eliminates some redundant links.

The style.css includes code to make the newbb2 dropdown menus match the theme. If you use this theme, you can remove all code in the newbb2 css file after the include statements. (If you use multiple themes on your site, you might want to also copy the newbb2 css code into your other themes' css files and modify to match your themes.)

I've included a small screenshot, shot.gif, which is basically only useful (I think) if you're using multiple themes with the XT-Temas module.

Hacking Bluebarr -- Notes for Newbies
If you like the layout of the theme, but not the colors, you can change things really easily.

*Open style.css in any text editor.
*The dark background color is #003366. Do a Find-Replace on 003366 and replace it with another hexadecimal RGB color code.
*The next darkest blue (the color of the left and right block headers) is #003399. Do a Find-Replace etc.
*The next darkest blue (the color of the main menu items) is #0099FF. Do a Find-Replace etc.
*The next lightest blue (the color of a highlighted main menu item) is #66CCFF. Do a Find-Replace etc.
*The color of the lines surrounding the banner area and the left and right blocks is #FFFFAA. Do a Find-Replace etc. For this one, you will also need to edit logo.gif (the .png file is included) and bannerbg.gif!
*The color of links is #FFFF66.
*Text color is #FFFFFF (a.k.a. white)
*There are some other random colors in there that you can find, if you look closely

That's it. Enjoy!