I am developing an application which displays multiple views as tables (for example customers, products, etc.). The last column of each row contains buttons, using which the user can perform some actions on a specific row. Simplified example:

<td class="actions">
  <a href="projects/some-project/edit">
    <img src="images/edit-project.png" alt="Edit project" />
  </a>
  <a href="projects/some-project/do-something">
    <img src="images/someaction.png" alt="Do something else with the project" />
  </a>
</td>

The images are transparent pngs. The amount of buttons per table can vary, now there are about 30 in total.

I was asked to make changes in the application css styles, so different tables can now have different colours, for example the customers table now has some grrenish tint, the projects one is blue and so on. Moreover, "odd" table rows have a slightly different colour than "even" ones. The rows also change colours if they are selected.

The problem is that the design states that the buttons have to change colours along with the rows. This requires making lots of button - colour binations, and there will be more buttons added in the future.

I think a better way than assigning the designer with making hundreds of versions of the buttons in different colours is to make it dynamically, depending on the table class. My question is - what would be the most efficient way to do it? The application uses php as the server-side language and javascript with jQuery on the client side. The problem with the images is that they are not monochrome but use multiple colours so I would have to manipulate their HSL according to css classes.

If the better way if to use php, I would probably use ImageMagick. The question is what is the best method to acquire an image coloured very closely to a provided colour.

I am developing an application which displays multiple views as tables (for example customers, products, etc.). The last column of each row contains buttons, using which the user can perform some actions on a specific row. Simplified example:

<td class="actions">
  <a href="projects/some-project/edit">
    <img src="images/edit-project.png" alt="Edit project" />
  </a>
  <a href="projects/some-project/do-something">
    <img src="images/someaction.png" alt="Do something else with the project" />
  </a>
</td>

The images are transparent pngs. The amount of buttons per table can vary, now there are about 30 in total.

I was asked to make changes in the application css styles, so different tables can now have different colours, for example the customers table now has some grrenish tint, the projects one is blue and so on. Moreover, "odd" table rows have a slightly different colour than "even" ones. The rows also change colours if they are selected.

The problem is that the design states that the buttons have to change colours along with the rows. This requires making lots of button - colour binations, and there will be more buttons added in the future.

I think a better way than assigning the designer with making hundreds of versions of the buttons in different colours is to make it dynamically, depending on the table class. My question is - what would be the most efficient way to do it? The application uses php as the server-side language and javascript with jQuery on the client side. The problem with the images is that they are not monochrome but use multiple colours so I would have to manipulate their HSL according to css classes.

If the better way if to use php, I would probably use ImageMagick. The question is what is the best method to acquire an image coloured very closely to a provided colour.

• php
• javascript
• jquery
• css
• image-processing

• I'd use CSS styling only and forget the button image pletely. – Rory McCrossan Commented Nov 23, 2011 at 12:08
• Yes, that would be the way to do it, but I have to stick to the images (customer decision). – Przemek Commented Nov 23, 2011 at 12:10
• 1 possible duplicate of jQuery: there is a way to apply colour (tint) to an image? – Spacedman Commented Nov 23, 2011 at 12:43
• but not the same but they want to achieve the same – user753676 Commented Nov 23, 2011 at 13:20

3 Answers 3

I would use jQuery for this and set the color behind the png or of the png regarding the css class/es of the table.

Dont use too much php like Imagemagick because it slows down the rendering of the page dramatically.

take a look at Pixastic (coloradjust)
https://github./jseidelin/pixastic http://www.pixastic./lib/docs/actions/coloradjust/

or PaintbrushJS (colour tint)
https://github./mezzoblue/PaintbrushJS
http://mezzoblue.github./PaintbrushJS/demo/

or CamanJS (colorize)
http://camanjs./
http://camanjs./guides/#BuiltIn
https://github./meltingice/CamanJS/

or VintageJS
http://rendro.github.io/vintageJS/
https://github./rendro/vintageJS

Can you post one of those images? Because if it's transparent as you say, you could just style the a that contains those images.

For example:

.actions > a {
    width: 40px;
    height: 20px;
    display: block;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
}

.actions > a.green {
    background-color: green;
    border-color: darkgreen;
}

.actions > a.orange {
    ...
}

And so on.

I've implemented a very similar feature on one site I've built. We allow users to select from different layouts (similar to your html) as well multiple palettes of colors, images, etc. You definitely do this with jquery:

On init of the page you can do

$("head").append("<link>");

On some sort of change event (or reload of data). My data is loaded via ajax

css = $("head").children(":last");  // or find your <link> that you'd replace
   css.attr({
   rel:  "stylesheet",
   type: "text/css",
   href: path_to_your_css
});

You can change anything you want that way including colors and images.