Color mapper - control color set

To see the original skin colors, click on web notes at the top of the page. This is the asevo skin for b2evolution, although I changed the colors. The colors on web notes are the ones that are used for the mapping.

Updates

The following updates were made:

  • Tuned mapping logic - to better align the source and target colors.
  • Palette selection - this allows you to upload the image, then choose which colors to use from it. To use it, clear the image color area, then click on the colors you would like to use in the table below it.
  • Alternate precedence - Added a second mapping approach. Review the maps listed under step 3 and decide which you like best.
  • Test data cleanup - Some of the source CSS codes were wrong.

Engineering a Design

The CSS/HTML architecture has a serious impact on the cost of development, integration, and maintenance of a web site.

Divide the page into a few areas.

  • Top/header - the area that spans the top of the page
  • Bottom/footer - horizontal span across the bottom of the page
  • Middle - that which is between the header and footer

Thus, the HTML would be:


<div id="header">
</div>
<div id="middle">
</div>
<div id="footer">
</div>

Next, subdivide the middle into three columns - left, center, right, like so:


<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>

Set up the layout in a base .CSS file. This should be a browser independent CSS file. Also create two other .CSS files, one for IE, one for Firefox to override any browser specific issues.


body
{
padding:0;margin:0;
height:768px;
width:1024px;
}

Place the colors in a color .CSS file. Place color (image) related dimensions in the color file, name your image files with their dimensions (x,y convention - where x=width, y=height).


body
{
color:#008;
background: #fff url('bg-1x768.gif') repeat-y top left;
}

You should have 5 files:

  1. index.htm
  2. base.css
  3. color.css
  4. ie.css
  5. ff.css

Adjust the layout dimensions in base.css, using background colors to help you see. Once you have the layout stable, and as you would like it, under all the browsers you want to support (usually IE6, IE7, FF), begin integrating it with the other components. This approach can be used to skin a blog, build an application, or build a simple site.

If you find you are copying index.htm, over and over, and then modifying it - you’re working too hard. Switch to a hierarchical architecture using either SHTML, PHP or other languages that allow you to include content from different files. For example:


include 'header.php';
include 'left.php';
echo '<div id="center"><p>Page content here</p></div>';
include 'right.php';
include 'footer.php';

The assumption is that header, left, right, and footer.php would be the same for all the pages on the site. This approach allows you to modify the file once and affect the whole site.

Even if you have a very simple, small site, these practices will be helpful. Web sites tend to grow. They change, and if you have a good architecture, you can change them in a cost-effective manner.

Comments have been enabled ...

and are welcome … I think you have to register … and, in that case, click the Log In link …

:)

color mapping - applications / experiments / improvements

The color mapper is still evolving. The biggest change was to key off the ‘#’ character, followed by a digit or hex letter instead of the word ‘color’. This allows all borders and backgrounds to be captured.

Interesting options:

  • Manually type in color codes in the image text area, with the color:#333333 syntax
  • Remove undesired codes from images
  • Edit screen shots to capture only those colors you want to use on the skin

Planned improvements:

  • Continued testing :)
  • Palette chooser, to allow you to pick colors to apply

Acknowledgement:

I’m sure someone else has developed a color mapper, one that is probably much more sophisticated. If it hasn’t already been done, it will be done soon.