Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Change colour of "quick search", "buy now" buttons etc


Luk1

Recommended Posts

Normally you would go to theme roller 2.3.... series important

 

http://jqueryui.com/themeroller/

 

If you are confident changing your css you can override most settings by using css

 

example some buttons added to your stylesheet (best you create a custom mystylesheet.css  which comes after all other stylesheets in template_top.php

<link rel="stylesheet" type="text/css" href="mystylesheet.css" />

then you can over ride your theme settings

.ui-button  {
  border:1px solid #FD82D7 ; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;
  font-size:13px;font-family:arial, helvetica, sans-serif;
  padding: 3px;
  text-decoration:none;
  display:inline-block;
   font-weight:bold;
  color: #000000;
opacity: 1.0;
background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-9 */
}
.ui-button:hover{
 border:1px solid #FBC5ED;
 background: #b3bead; /* Old browsers */
background: -moz-linear-gradient(top, #b3bead 0%, #dfe5d7 60%, #fcfff4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3bead), color-stop(60%,#dfe5d7), color-stop(100%,#fcfff4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b3bead 0%,#dfe5d7 60%,#fcfff4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b3bead 0%,#dfe5d7 60%,#fcfff4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b3bead 0%,#dfe5d7 60%,#fcfff4 100%); /* IE10+ */
background: linear-gradient(to bottom, #b3bead 0%,#dfe5d7 60%,#fcfff4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bead', endColorstr='#fcfff4',GradientType=0 ); /* IE6-9 */
}

now there are a few types of buttons so to target them individually best you install web developer tools in your browser and you can check and change each individual setting .

 

Think  Multi mixer may have a blog about this which probably explains better than me just do a google search

 

Regards

joli

 

PS: a load of css there in the code as regards shadow / rounded corners etc most you may not need

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...