# Basic CSS formating template

**URL:** <https://forum.youcanbook.me/t/basic-css-formating-template/444>\
**Category:** Customization\
**Created:** [September 18, 2019, 1:58pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444 "2019-09-18T13:58:09Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Koen](https://avatars.discourse-cdn.com/v4/letter/k/a9a28c/32.png) [@Koen](https://forum.youcanbook.me/u/Koen)\
**Post date:** [September 18, 2019, 1:58pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/1 "2019-09-18T13:58:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ben](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/ben/32/772_2.png) [@Ben](https://forum.youcanbook.me/u/Ben)\
**Post date:** [September 19, 2019, 7:51pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/2 "2019-09-19T19:51:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chris](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/chris/32/181_2.png) [@Chris](https://forum.youcanbook.me/u/Chris)\
**Post date:** [September 23, 2019, 10:12am UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/3 "2019-09-23T10:12:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ben](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/ben/32/772_2.png) [@Ben](https://forum.youcanbook.me/u/Ben)\
**Post date:** [September 23, 2019, 4:15pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/4 "2019-09-23T16:15:20Z")

</div>

@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;
}
```

---

<div class="post-metadata">

**Author:** ![Chris](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/chris/32/181_2.png) [@Chris](https://forum.youcanbook.me/u/Chris)\
**Post date:** [September 23, 2019, 5:10pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/5 "2019-09-23T17:10:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ben](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/ben/32/772_2.png) [@Ben](https://forum.youcanbook.me/u/Ben)\
**Post date:** [September 23, 2019, 5:53pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/6 "2019-09-23T17:53:37Z")

</div>

@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;}
```

---

<div class="post-metadata">

**Author:** ![Chris](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/chris/32/181_2.png) [@Chris](https://forum.youcanbook.me/u/Chris)\
**Post date:** [September 24, 2019, 1:40pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/7 "2019-09-24T13:40:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Ben](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/ben/32/772_2.png) [@Ben](https://forum.youcanbook.me/u/Ben)\
**Post date:** [September 24, 2019, 1:48pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/8 "2019-09-24T13:48:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chris](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/chris/32/181_2.png) [@Chris](https://forum.youcanbook.me/u/Chris)\
**Post date:** [September 24, 2019, 3:57pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/9 "2019-09-24T15:57:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rachel](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@rachel](https://forum.youcanbook.me/u/rachel)\
**Post date:** [April 30, 2020, 5:14pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/10 "2020-04-30T17:14:40Z")

</div>

@Ben Im using theme “Flat Minimal”  
this was super helpful to me. i wanted to change the free time hover to a logo color. and the code here worked perfectly. but there is another button that i really wanted to change : Our YCBM page is embedded in our website and the large ‘select’ buttons which appear in front of appointment types on our website are a standard blue. Ive added an image (as per standard options in the “apppointment type” dashboard area). that the button changes to blue and says ‘select’ when hovered over. I’d like that color to be a branding color. to be can you help with that code, please? or maybe could you just give the ID of that item?  
attaching image

thank you

---

<div class="post-metadata">

**Author:** ![rachel](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@rachel](https://forum.youcanbook.me/u/rachel)\
**Post date:** [April 30, 2020, 5:20pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/11 "2020-04-30T17:20:31Z")

</div>

replying to myself : that button appears in front of the appointment types . . . and when it is blue, it says 'select" . . . (just trying to further identify the button to which i’m referring) thanks!!  
attaching image

[Screen Shot 2020-04-30 at 12.20.03 PM|588x500](https://forum.youcanbook.me/uploads/short-url/vh0tyZDT6Ed33dwyVBOdTzlrBSS.png)

---

<div class="post-metadata">

**Author:** ![Ben](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/ben/32/772_2.png) [@Ben](https://forum.youcanbook.me/u/Ben)\
**Post date:** [May 4, 2020, 1:45pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/12 "2020-05-04T13:45:30Z")

</div>

To change the background color for services and teams on flat minimal use these classes:  
` .service .servicePic, .team .teamPic {background:#fff;}`

---

<div class="post-metadata">

**Author:** ![TedDaniels](https://avatars.discourse-cdn.com/v4/letter/t/71e660/32.png) [@TedDaniels](https://forum.youcanbook.me/u/TedDaniels)\
**Post date:** [August 28, 2020, 2:49pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/13 "2020-08-28T14:49:45Z")

</div>

For those who want to do some customization, here is the designer guide location. [Designer Guide](https://youcanbook.me/design_guidelines/)

---

<div class="post-metadata">

**Author:** ![Ben](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/ben/32/772_2.png) [@Ben](https://forum.youcanbook.me/u/Ben)\
**Post date:** [September 1, 2020, 1:41pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/14 "2020-09-01T13:41:48Z")

</div>

One thing to be mindful of here is that custom CSS is not available on the new experience. We hope to have more customization options in the future to help get folks close to the modifications they want to make with CSS. Feel free to provide feedback on changes you would like to see. You can do that in #feature-requests.

---

<div class="post-metadata">

**Author:** ![boyler](https://avatars.discourse-cdn.com/v4/letter/b/a4c791/32.png) [@boyler](https://forum.youcanbook.me/u/boyler)\
**Post date:** [October 9, 2020, 11:14am UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/15 "2020-10-09T11:14:15Z")

</div>

Hi Ben,

To be clear then, there’s no way to edit the CSS on the dialogue box to make it wider than the 420px that comes as standard?

(use case - I have it embedded on a wordpress site, where it looks pinched and mean, when I’d like it to be 75% of the iframe width)

---

<div class="post-metadata">

**Author:** ![Ben](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/ben/32/772_2.png) [@Ben](https://forum.youcanbook.me/u/Ben)\
**Post date:** [October 26, 2020, 8:29pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/16 "2020-10-26T20:29:03Z")

</div>

@boyler sorry on the delay. Correct, no way to adjust that right now. The booking grid will be mobile responsive so even if it is in a smaller frame on your site it should still work. I tested out your contact page on my desktop and Android phone and it worked as expected.

---

<div class="post-metadata">

**Author:** ![woyago](https://avatars.discourse-cdn.com/v4/letter/w/7ea924/32.png) [@woyago](https://forum.youcanbook.me/u/woyago)\
**Post date:** [November 16, 2021, 8:42am UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/17 "2021-11-16T08:42:11Z")

</div>

Hey guys,

this link: [https://youcanbook.me/design\_guidelines](https://youcanbook.me/design_guidelines)

Does not work. YCBM is so flexible and awesome but so ugly, it is the only reason we moved away from it. Still have not found anything as good as YCBM, but that table with all the times is just too ugly to use in our case!

How do I change that/prettify it?

---

<div class="post-metadata">

**Author:** ![Ben](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.youcanbook.me/ben/32/772_2.png) [@Ben](https://forum.youcanbook.me/u/Ben)\
**Post date:** [November 16, 2021, 8:35pm UTC](https://forum.youcanbook.me/t/basic-css-formating-template/444/18 "2021-11-16T20:35:12Z")

</div>

@woyago welcome to the Forum! We no longer support custom CSS. What types of changes were you looking to make? [You can embed the booking page](https://support.youcanbook.me/article/33-embed-your-booking-page-on-your-website) on your website to have more control over how things will look, and plugin in the booking grid.