Basic CSS formating template

Does somebody has a CSS template with basic features like border color, text color, text align, text font, text size, hover color etc. ?

This can be accomplished by inspecting the element you wish to modify then adding the attributes you wish to change. There isn’t a template, but if you have some ideas of what you want changed I might be able to help get you close.

Hi Ben,

Could you let me know how to change the following on the Soft Cell Theme :

All Background Colours

Button Hover Colour

Required Field Asterix’s on Booking Form

‘Confirm Booking’ Button on Booking Form

Thanks

@Chris This may get you started. Swap out the black (#000) with whatever color you need.

 /*Page background */
  html{background-color:#000!important;}

/*Content background */
 .content{background-color:#000!important;}

/*Header background*/
div.header { background-color:#000; }

/*Grid background */
div.main { background: #000; box-shadow: none; }

/*Instructions background */
.instructions{background-color:#000!important;}

/*Free time Hover */
.gridPage .gridDay .gridSlot.gridHighlight {background-color: #000000; border: 1px solid #fff;}

/*Required */
div.item.required div.itemLabel p:first-child:after { 
color:#000000; 
}

/*Submit button */
.dialogue .formButtons #submitButton:hover {
color: #000;
background: #fff;
}

.dialogue .formButtons #submitButton {
background: #000;
border-color: #000;
color: #fff;
}

Thanks Ben that’s really helpful.

Any chance you could also let me know:

The Jump To Date button

Booking Form Questions Text

Thanks again

@Chris the jump to date stuff is a bit tricky. It isn’t a button but an image. Also the UI elements are all seperated out. Here is the code to help you. Be sure to change then URL of the image to something you have license to use.

/* Date Picker */
.ui-widget {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important
}

.ui-datepicker .ui-datepicker-header {
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-weight: 500 !important;
    border-radius: 2px !important;
   border-color: #000!important;
   background-color:#000!important;

}

.ui-widget-content {
    border: 1px solid #e4e4e4 !important;
    background-color: #ffffff !important;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-radius: 4px !important;
}

.ui-datepicker th {
    font-weight: 500 !important;
    color: #000 !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    height: 32px !important;
    width: 32px !important;
    font-weight: 400 !important;
    border: none !important;
    padding-top: 7px !important;
    color: #000 !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    margin-top: -10px !important;
}

.ui-datepicker .ui-datepicker-title {
    font-size: 0.7em !important;
}

.ui-datepicker table {
    margin: 0 !important;
    font-size: 0.7em !important;
}

.ui-datepicker td {
    padding: 0 !important;
}

.ui-datepicker {
    width: 12em !important;
    margin: 37px 0 0 0 !important;
    bottom: auto !important;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    padding: 10px !important
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background-color: #000 !important;
    font-weight: 500 !important
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    color: #ffffff !important;
    font-weight: 500 !important
}

a.ui-state-default:hover {
    background-color: #e4e4e4 !important;
color:#fff!important;
}

.ui-datepicker-next.ui-corner-all .ui-icon.ui-icon-circle-triangle-e,
.ui-datepicker-next.ui-corner-all .ui-icon.ui-icon-circle-triangle-e:hover {
    background-position: -32px 0 !important
}

.ui-datepicker-prev.ui-corner-all .ui-icon.ui-icon-circle-triangle-w,
.ui-datepicker-prev.ui-corner-all .ui-icon.ui-icon-circle-triangle-w:hover {
    background-position: -96px 0 !important
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border-radius: 4px !important
}


.gridPage .jumpDate .ui-datepicker-trigger {
    color: #fff;
    background-image: url('https://freeiconshop.com/wp-content/uploads/edd/calendar-outline-filled.png');
}

.ui-datepicker-prev.ui-corner-all:hover{background:#e4e4e4 !important;}
.ui-datepicker-next.ui-corner-all:hover{background:#e4e4e4 !important;}

 /*Booking Form Labels */
.itemLabel{color:#fff!important; font-size:25px;}

 /*Booking Form Content */
.itemContent{color:#fff!important; font-size:25px;}

Thanks for that Ben, worked a treat!

For some reason the ‘Submit Button’ on the booking page has now changed size. I have only changed the colours on this, any idea why this might be?

It looks like the font-size of the form elements carried over I removed that from your CSS. Should be good to go.

Thanks Ben, thats great, really appreciate all your help. I’ll leave you alone for a while now haha! Cheers again :slight_smile:

1 Like