Jump to content

Change colour in CSS to split different parts


Recommended Posts

I am using a layout based on the default, but not one prepared by me. The main factor relates (or at least should relate) to colour changes of backgrounds, buttons, text and so on. My problem is that some aren't as they should be and I lack knowledge how to correct these.

 

I understand I need to edit the global.css. Here, though, there is a 'custom.css' file which is being used instead, it seems. There are two areas of colour control with the same problem, so sorting out one will tell me how to deal with the other as well. The two are:

 

The 'delete' button on the first order page is a dark colour with dark blue text, so it cannot be read. There may be other places the same combination shows up, but I haven't found them

 

The strip of colour across products that says NEW is the same as the colour for IN STOCK, both being red (and possibly in other places the same colour controlled by one entry in the css).

 

I either need to change the background to a lighter colour or the text to white, and in the second to separate the two colours so the New is red and the IN STOCK is green. Here is the code I have found for the text and backgrounds:

 

.products_block li span.new, #special_block_right .products span.reduction span, #availability_statut span#availability_value, #reduction_percent span, #reduction_amount span{
    color: #ffffff !important;
}
.products_block li span.new, #special_block_right .products span.reduction span, #availability_statut span#availability_value, #reduction_percent span, #reduction_amount span{
    background-color: #54bd31 !important;
}

 

At least, if I change the background number 54bd31 the colour changes from green to (say) red, but for both IN STOCK and also NEW. Is there a way to split these so I can control the two colours separately? That would be nice, but not essential. The next one is essential as it cannot be read at all.

 

The following line seems to control the background colour for the delete button:

 

table.std th, table.table_block th, .cart_delete a.cart_quantity_delete, a.price_discount_delete, #mywishlist td.wishlist_delete a, .cart_total_price .total_price_container p{
    background-color: #4d4d4d !important;

 

But if I change 4d4d4de to anything else, the backgrounds for the titles and other parts of the page also change colour. Is there a way of splitting this so the button is separate?

 

Or is there something else I haven't found - any ideas where to look for what?

 

Chris

Edited by CJH (see edit history)
Link to comment
Share on other sites

×
×
  • Create New...