How To Change Colour Of New Products Tabs

[Spainman]

Hi all,

 

On my front page, when new products are added a tab in the right corner with the word "new" appears.

 

How can I change the colour of this tab from red to say black.

 

Please find attached a screenshot with what Im refering to marked with purple dots.

 

My url is: http://62.81.159.230/~canicoba/index.php

 

Regards.

[PascalVG]

go to /themes/<your theme folder>/css/product_list.css

 

find the following code (around line 46):

 

#product_list li span.new {

display: block;

position: absolute;

top: 15px;

right:-30px;

padding: 1px 4px;

width: 101px;

font-size:10px;

color: #fff; // <-- font colour of 'New'

text-align: center;

text-transform: uppercase;

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform:rotate(45deg);

/*-ms-transform: rotate(45deg);*/

background-color: #990000; // <-- background of 'new'

transform: rotate(45deg); /* Newer browsers */

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

}

 

That should do it.

 

N.B. Do you use google chrome? If not, try it!

Right click on 'new' and choose "Inspect element". You see a code box shown, where you can literally play with the

current page, changing colours, sizes, fonts, i.e. the layout of many elements,

AND! it shows many times the file where to find the real code to change things parmanently (on the right next to the code snippet you want to change, in this case product_list.css:46 !)

Hope this helps!

Pascal