[TomatoCart]Modern form fields and button for bootstrap template

Frankly, the form fields and buttons looks ugly in default bootstrap template. It will impact the user experience of your store. I want to show you small trick to improve them with modern and  fashionable design.






How it’s done, Lets begin!

Step 1. Go to templates > bootstrap > css directory.

Step 2. Create a css file named custom.css in above css directory.

Step 3. Copy following css content into above customer.css:

    margin:0px !important;
form *{
    box-shadow:none !important;
form input,
form textarea,
form select {
    font-size:12px !important;
    border-radius:2px !important;
    border:1px solid #ccc !important;
form input.btn {
    border: 0 !important;
form input:focus,
form textarea:focus,
form select:focus {
    border:1px solid #4d90fe!important;
form select{
    color: #9a9a9a !important;
    padding-left: 8px !important;
form label{
    font-size:12px !important;

#keywords {
    border:none !important;
    height: 20px;
#keywords:focus {
    border:1px solid #4d90fe!important;
.navbar-search .icon-search {
    top: 10px;

.icon-white {
    background-image: url("../img/glyphicons-halflings.png")
button.btn {
  color: #000000;
  background: none;
  border-color: rgb(28, 125, 250);
  filter: none;
button.btn:hover {
    background: #1c7dfa;

a.btn:hover .icon-white,
button.btn:hover .icon-white {
    background-image: url("../img/glyphicons-halflings-white.png")

Step 4. Open index.php under templates > bootstrap directory with your favorite text editor and then find following code snippet:

<!-- touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="templates/<?php echo $osC_Template->getCode(); ?>/images/apple-touch-icon-144-precomposed.png">

Add following code snippet before it:

<link rel="stylesheet" type="text/css" href="templates/<?php echo $osC_Template->getCode(); ?>/css/custom.css" />

That’s it,  Enjoy!

Tags: , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

One Comment on [TomatoCart]Modern form fields and button for bootstrap template

  1. Miltos Kouis says:

    Dear Jack it is very important for me to find an easy way to create custom fields for Customer details for example his TaxID and Tax Department here in Greece are very uesful.
    I ve told you some months ago but obviously you are very busy. You have helped me in the past if you believe we can do it please inform me.
    Is there a way for someone to make an order without being member of the site?

    Many thanx Great Work Keep WalkinG!!

Leave a Reply

Your email address will not be published. Required fields are marked *