#370 Color Pallet Themes

open
nobody
None
5
2007-01-03
2007-01-03
karen
No

I'll repeat my initial post here as an explanation of what these files contain. I probably should have added a README.txt file, but I didn't :-)

It turns out the whole thing is too large to upload here, so I had to break it into two parts. 'themes.zip' are all the files to drop in the themes folder. 'images.zip' should go into the 'themes/colors' folder.

I am working on the Drupal integration of PGV and needed some themes that better match the Drupal themes. I came up with a way to create a group of themes that share the same images and html and just have different css to change the color pallets. The colors I created are set to match several of the Drupal themes but there's nothing Drupal-specific in them, they are just a variety of different color pallets that could could work either as embedded or stand-alone themes.

The style sheets all start from the same base, there is a place at the top that that lists 5 hexidecimal colors that are used for that pallet, and all other colors in the stylesheet are neutral white, black or gray. To create a new variation, you just do a find and replace on each of the 5 colors and save it with a new name, and you have a new sylesheet for a different color pallet.

Since the html and images are shared, it's easy to add a logo or other personalized html to the shared header.html, or drop different images into the images folder, and they will be then used by all the themes. Currently, the images folder contains mostly images from the xenia theme, but where the xenia images were too color-specific I picked up images from other themes that are more neutral to try to create an image collection that will work well with lots of different color pallets.

Also, I tried to set the base css up to make it fairly easy to change font families and font sizes. Font sizes and families are defined in just a couple places so it's easy to change them.

To use this, you create a theme folder for each color that just holds a file that defines the name and stylesheet for that color, and includes everything else from a shared folder (which I'm calling 'colors').

Discussion

  • karen
    karen
    2007-01-03

    Images

     
    Attachments
  • karen
    karen
    2007-01-03

    Logged In: YES
    user_id=1333912
    Originator: YES

    File Added: images.zip

     
  • karen
    karen
    2007-01-03

    Logged In: YES
    user_id=1333912
    Originator: YES

    Just to clarify how the folders should end up:

    PGV
    --themes
    ----colors
    ------css
    ------images
    ----ash
    ----belgianchocolate
    ----aquamarine
    ----etc, etc, etc

     
  • karen
    karen
    2007-01-03

    Logged In: YES
    user_id=1333912
    Originator: YES

    File Added: themes.zip

     
  • karen
    karen
    2007-01-03

    Themes

     
    Attachments
  • karen
    karen
    2007-01-03

    Logged In: YES
    user_id=1333912
    Originator: YES

    I found a few more tweaks needed for IE6 and added them to the css
    File Added: themes.zip

     
  • nigelo
    nigelo
    2007-01-04

    Logged In: YES
    user_id=1254634
    Originator: NO

    Karen this looks great. I've jsut put it up on my test site to start experimenting.

    One thought though - couldn't you take it one step further. Instead of having to do a 'search/replace/ to set up a new color theme, it should be possible to use a form of variable.

    At the top of the css file call the Base color '$base' and refer to that in all the color tags. They need defining through PHP, which is where I get a little lost, but I think this web page has the answer:

    http://www.wait-till-i.com/index.php?p=24

    What do you think?

    Nigel

     
  • nigelo
    nigelo
    2007-01-04

    Logged In: YES
    user_id=1254634
    Originator: NO

    ... or this website may be better.

    http://www2.jeffcroft.com/blog/2004/apr/12/css-colorfont-variables-using-php/

    Seems there are a few issues with the odea, but it could still be worth testing. Potentially it could lead the way to a lot more variation in the css file than just color.

     
  • karen
    karen
    2007-01-04

    Logged In: YES
    user_id=1333912
    Originator: YES

    I've tried those kinds of methods in the past and quit because you lose the advantage of having the browser cache the css. It's a lot more processor-intensive to be treating the css as code on every page. I've also done something a little different in the past, use variables to create the css, then once I like it, create a little php script to write the css file to the server and use the static css page in the html code. I think that's a better approach, but you have to write some sort of front-end for it which I don't have time to do right now. The first idea, putting variables in there, is fairly easy to do and it does work, and I sometimes use that when I'm developing a theme and I want to keep changing things around.

    The find and replace isn't that bad if you only need to do it once and you already know what colors you want to use. If you're tweaking and testing things, variables are nicer.

    Anyway, I don't have time to do more with it right now, but maybe later if I get time -- I already spent way more time on this than I planned :-)