Custom CSS Examples

Below you can find some examples of Custom CSS. Feel free to use any that you like the look of, or edit this page with your own examples!

Colors

Papaya #EE9A17

.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
  background-color: #EE9A17 !important;
  border-color: #c47d0e !important;
}

.navbar.bg-primary, .border-primary {
  border-color: #c47d0e !important;
}

.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
  color: #EE9A17 !important;
}

.dropdown-item:active {
  background-color: #EE9A17 !important;
}

#event-title:hover {
  color: #c47d0e !important;
}

Rosso Corsa #D40000

.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
  background-color: #D40000 !important;
  border-color: #a10000 !important;
}

.navbar.bg-primary, .border-primary {
  border-color: #a10000 !important;
}

.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
  color: #D40000 !important;
}

.dropdown-item:active {
  background-color: #D40000 !important;
}

#event-title:hover {
  color: #a10000 !important;
}

Limeade #489107

.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
  background-color: #489107 !important;
  border-color: #306005 !important;
}

.navbar.bg-primary, .border-primary {
  border-color: #306005 !important;
}

.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
  color: #489107 !important;
}

.dropdown-item:active {
  background-color: #489107 !important;
}

#event-title:hover {
  color: #306005 !important;
}

Electric Violet #6045FF

.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
  background-color: #6045FF !important;
  border-color: #3412ff !important;
}

.navbar.bg-primary, .border-primary {
  border-color: #3412ff !important;
}

.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
  color: #6045FF !important;
}

.dropdown-item:active {
  background-color: #6045FF !important;
}

#event-title:hover {
  color: #3412ff !important;
}

Make your own!

You can easily make your own colored CSS with the following snippet of SCSS, and then compile it using an online SCSS to CSS compiler such as sass.js.org:

$base-color: #EE9A17; /* enter your color here! */
$border-color: darken($base-color, 10%);

.bg-primary, .btn-primary, .badge-primary, .dropdown-item:hover, .dropdown-item:focus {
  background-color: $base-color !important;
  border-color: $border-color !important;
}

.navbar.bg-primary, .border-primary {
  border-color: $border-color !important;
}

.text-primary, a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.text-white):not(.text-danger):not(.fc-event):not(.page-link) {
  color: $base-color !important;
}

.dropdown-item:active {
  background-color: $base-color !important;
}

#event-title:hover {
  color: $border-color !important;
}