New look with CSS

[leorescia]

Hoteldruid is the best software for hotel I have ever met. However its graphical environment is rather poor. So sometimes it is necessary to improve a little. The new version has the ability to improve their appearance by a CSS file.
I leave here my final result. I would like to see if any of you have done something similar and see the result.

[harisetiaji]

Awesome..

I can't change the basic structure (layout) because the html element is hard to grouping with new class/id

Share the css please..

[Niko18]

nice job! yeah hoteldruid is so nice and usefull , now with a new cool interface that maybe supports mobile browsing will be perfect.

[bluealmondhostel]

share the css please!

[leorescia]

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%;}