Customizing a Theme
I am the webmaster for the National Writing Project at Rutgers University: htp://www.nwprutgers.org
I'm currently exploring options to convert the static HTML site into Drupal. The executive board members of the NWP @ RU love the look and feel of the old page, and want to maintain that appearance; so this is a condition I have to meet in order to make the move.
Fortunately, the layout on the HTML site seems like it would be easy to setup by modding a pre-existing Drupal theme (seems like most blogs suggest to start with BlueMarine). Just looking to adjust color scheme and add the BWP Rutgers banner at the top of the page.
I'm having trouble with editing the BlueMarine color scheme CSS code. Can anyone offer suggestions or show me a snippet of code-- just enough to get me started? Or maybe someone could point me to a good tutorial?
You should use Firebug
You should use Firebug extension for Firefox to quickly locate the right css code. It might be using the theme css or the system module css or any other module css. You'll just waste a good portion of your life trying to find the right line in the 1000+ lines of css code.
With firebug you can change it right on your browser to check it before you do it for real. It's very simple and saves a lot of time.
Steve.
Thanks!
Thanks for your input! Tampering with Garland using the color mod didn't quite give me the level of customization I was looking for. Taking up your advice, I began to edit Bluemarine's CSS using Firefox's web dev tool Firebug. Locating the CSS codes took a bit of poking around, but Firebug allowed me to edit them on the fly once I found them. Looking for header and footer tags was also easy enough; I had a basic idea of what section I was editing. At some point, I would love to see some tutorial or blog entry that identifies what each color line changes. there were some edits (down towards the bottom of the code) where I didn't notice any change.
Check this out:
http://www.nwprutgers.org (old static site edited with Dreamweaver)
http://rodeo.nwprutgers.org (new dynamic site using Drupal)
Outside of the menu system (which I still have to add and configure), both appear somewhat similar. I'm about 90% there. This is where I need some more advice. There are two final edits I'd like to make to the Bluemarine template to make the new site have a very similar appearance to the old site.
First, I'd like to do away with the "home" link in the right hand corner of the header, and merge the two columns. Secondly, I'd like to add a cell-- one column wide, one row deep-- and move the breadcrums from the top of the content block to this new cell which would appear at the bottom of the header.
How would I go about this? Do I have to edit another part of the Bluemarine template, or would I have to change configuration through Drupal's administration panel?
Thanks for any and all help!
Good place to start
I've been coding HTML/CSS for about 10 years and the bluemarine theme is some of the nicest front end code I have worked with. You're on the right track. It will probably do what you want.
Try playing around with the background colours and some of the text colours. Look for anything like #63c and read up on hex codes or just fiddle with those numbers. Also try changing the width of your sidebars etc. Good luck!
http://www.rimian.com.au
Funny enough, just as soon
Funny enough, just as soon as I posted this topic the "configure" operation of the Garland theme popped out at me. I was able to tweak some color combinations, but nothing to satisfaction. I'll have to keep an open eye for themes enabled for the color mod for a 6. release. So far Deco might be a candidate. I read minelli for the 5. version was another color mod friendly theme. Those options might work short term. Looks like I'll have to tinker with the BlueMarine CSS for long term.