Here I share the CSS code.
(Sorry for my English but I speak Spanish. This is a translation)
instructions:
1) with hoteldruid hosting account, you simply have to upload this file to the pers.css name and use simple graphic theme
But if your installation is not in the server hoteldruid, Maybe would have to search each field in the archives you should find these fields in base.css and stylesheet.css files and replace them with those who share here.
2) There are two graphics files (calendar button and select arrow) that should upload via ftp and paste your url where indicated in the css file.
Hope you find it useful!
Code: Select all
/* rounder corner text fields and select - redondear campos de texto y select */
textarea, input, .inputbox {
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
font-size: 14px;
padding: 4px;
background-color: #fff;
}
/*insert url select arrows - insertar la url de la flecha del campo select */
select {
text-indent: 0.01px;
text-overflow: "";
-webkit-appearance: button;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #ccc;
background: url(http://www.yourdomain.com/img/input_select3.png) no-repeat right #fff;
padding: 3px;
padding-right: 15px;
font-size: 14px;
border-color: #B0AEAE;
min-width: 50px;
-moz-appearance: radio-container;
-moz-appearance: menulist-text; }
/* color the most used fields - Colorear los campos mas utilizados */
input[name=nome] { background-color: #FFF998; }
input[name=cognome] { background-color: #FFF998; }
input[name=email] { background-color: #FFF998; }
input[name=telefono] { background-color: #FFF998; }
#id_sdm1{ background-color: #FFF998; }
#id_sdm2{ background-color: #FFF998; }
input[name=sconto1] { background-color: #FFF998; }
input[name=caparra1] { background-color: #FFF998; }
select[name=nometipotariffa1] { background-color: #FFF998; }
select[name=tipo_sconto1] { background-color: #FFF998; }
select[name=appartamento1] { background-color: #FFF998; }
select[name=origine_prenota1] { background-color: #FFF998; }
select[name=met_paga_caparra1] { background-color: #FFF998; }
textarea[name=commento1] { background-color: #FFF998; }
select[name=n_appartamento] { background-color: #FFF998; }
input[name=n_numpersone] { background-color: #FFF998; }
textarea[name=n_commento] { background-color: #FFF998; }
select[name=n_nometipotariffa] { background-color: #FFF998; }
input[name=n_sconto] { background-color: #FFF998; }
select[name=tipo_val_sconto] { background-color: #FFF998; }
input[name=n_caparra] { background-color: #FFF998; }
select[name=tipo_val_caparra] { background-color: #FFF998; }
select[name=modo_aggiorna_pagato] { background-color: #FFF998; }
input[name=n_pagato] { background-color: #FFF998; }
select[name=numero_contratto] { background-color: #FFF998; }
/* Coloring bit fields that are used - Colorear Campos que se utilizan poco*/
input[name=numpersone1] { background-color: #FFF; }
select[name=appartamento1] { background-color: #FFF; }
select[name=num_piano1] { background-color: #FFF; }
select[name=num_casa1] { background-color: #FFF; }
/* Coloring Fields that are not used - Colorear Campos que no se utilizan*/
select[name=tipo_val_sconto1] { background-color: #F1F1F1; }
select[name=tipo_val_caparra1] { background-color: #F1F1F1; }
input[name=lista_app1] { background-color: #F1F1F1; }
select[name=num_persone_casa1] { background-color: #F1F1F1; }
select[name=giorno_stima_checkin1] { background-color: #F1F1F1; }
select[name=ora_stima_checkin1] { background-color: #F1F1F1; }
select[name=min_stima_checkin1] { background-color: #F1F1F1; }
input[name=commissioni1] { background-color: #F1F1F1; }
select[name=tipo_val_commissioni1] { background-color: #F1F1F1; }
input[name=num_app_richiesti1] { background-color: #F1F1F1; }
/* Titles - Tamaño de los titulos */
h3,h4,h5 { text-align: center; padding: 0; margin: 0; font-family:"arial", arial, sans-serif; color: #2B2B2B;}
h3 { font-size: x-large; font-weight: bold; }
h4 { font-size: x-large; font-weight: bold; }
/*Background - Fondo */
#contentbox {
background-color: #F1F1F1;
}
/*Buttons - Botones*/
input.sbutton,button,.cpbutton,input.rbutton {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #4d90fe), color-stop(1, #357ae8));
background:-moz-linear-gradient(top, #4d90fe 5%, #357ae8 100%);
background:-webkit-linear-gradient(top, #4d90fe 5%, #357ae8 100%);
background:-o-linear-gradient(top, #4d90fe 5%, #357ae8 100%);
background:-ms-linear-gradient(top, #4d90fe 5%, #357ae8 100%);
background:linear-gradient(to bottom, #4d90fe 5%, #357ae8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d90fe', endColorstr='#357ae8',GradientType=0);
background-color:#4d90fe;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #1fa1c2;
color:#ffffff;
text-decoration:none;
}
.cpbutton,input.rbutton { border-radius: 2px; }
input.sbutton:hover, button:hover,.cpbutton:hover, input.rbutton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #357ae8), color-stop(1, #4d90fe));
background:-moz-linear-gradient(top, #357ae8 5%, #4d90fe 100%);
background:-webkit-linear-gradient(top, #357ae8 5%, #4d90fe 100%);
background:-o-linear-gradient(top, #357ae8 5%, #4d90fe 100%);
background:-ms-linear-gradient(top, #357ae8 5%, #4d90fe 100%);
background:linear-gradient(to bottom, #357ae8 5%, #4d90fe 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#357ae8', endColorstr='#4d90fe',GradientType=0);
background-color:#357ae8;
}
input.sbutton:active, input.sbutton:active, button:active,.cpbutton:active, input.rbutton:active {
position:relative;
top:1px;
}
/* Calendar - Calendario */
.datepick {
position: absolute;
top: 0px;
left: 0px;
background: #F5F6F7;
padding: 6px;
border: 1px solid #959595;
z-index: 1;
visibility: hidden;
font: bold 18px Arial, Helvetica, sans-serif; color: #363636;
text-align: center;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;}
.datepick table table { border-collapse: collapse; font-size: 16px; margin-left: auto; margin-right: auto;}
.datepick table table tr td { cursor: default; text-align: center; padding: 6px; border: 1px solid #F5F6F7;}
/* Insert image url with calendar 30x30px - Insertar url con la imagen del calendario 30x30px */
.dbutton{
width: 35px;
height: 28px;
background: transparent url('http://yourdomain.com/img/calendar.gif') no-repeat center top;
}
.calbutton { font-size: 16px; padding: 0 5px 0 5px;
background-color: #357ae8;
border: 1px solid #666666;
color: #000000;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
h5 { font-size: large; font-weight: bold; }
/* MENU */
table.nav_bar { height: 40px; text-align: center; border-style: solid; border-width: 1px; border-color: black;
border-bottom: 1px solid #888889 ; background-color:#828282; border-radius: 6px 6px 0 0;}
table.nav_bar tr td { height: 19px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; }
table.nav_bar tr:first-child td:first-child { border-top-left-radius: 6px; }
table.nav_bar tr:first-child td:last-child { border-top-right-radius: 6px; }
table.nav { padding: 0; margin-left: auto; margin-right: auto; margin-top:0; margin-bottom:0; border: none; }
.drop ul ul a { font-size: 10px; }
a.nav:link {color: #000000; }
a.nav:visited {color: #000000; }
a.nonav:link {color: #000000; }
a.nonav:visited {color: #000000; }
/* Grid months - Grilla de los meses*/
#contentbox { line-height: 1.2; }
table.m1 tr td { border: 0; font-color: #ffffff; font-size: 16px; border-color: #ffffff; font-family: helvetica; padding-top: 1px; padding-bottom: 1px;}
table.m1 tr { border: 0; font-size: 20px; border-color: #ffffff; background-color: #ffffff; height: 25px;}
table.m1 { width: 80%; border: 0; border-spacing: 1px; }
tr.rd_r td {
background-color: #e1e1e1; }
a:link {color: #ffffff; text-decoration: none}
a:visited {color: #ffffff; text-decoration: none}
a[href^="mailto:"] { color: black; }
/* Reserve Style on the grid - Reserva en la grilla */
.pren { font-size: 20px; padding: 0px; }
/* Room table - Tabla con las habitaciones */
table.t1 { width: 60%;}
