Basic CSS changes

Custom CSS changes

To make your site your own and fit more to your brand you can change some of the colors on your Bamboo Site using the "Custom CSS" field under "Website" > "Branding".
Bamboo Pro tip: Please be aware, CSS changes might take up to 15 mins to update, so please be patient.

Bamboo Pro tip: When using hex colors, don't forget to add # before the value.

Homepage:
Background color:

body[data-route="root.gallery.home"], body[data-route="root.gallery.play"], body[data-route="root.gallery.view"], body[data-route="root.home"] {
background-color: Insert color in Hex code !important;
}

For example-
body[data-route="root.gallery.home"], body[data-route="root.gallery.play"], body[data-route="root.gallery.view"], body[data-route="root.home"] {
background-color: #ffffff !important;
}

Category name text + Arrow:

Text:
.category-label {
color: # Insert color in Hex code !important;
}

Arrow:

.glyphicon-chevron-right:before {
color: Insert color in Hex code !important;
}

Hero unit- The big slider in the top part of the page.

Video name
#home-carousel .caption .title, .home-carousel .caption .title {
color: Insert color in Hex code !important;
}
Video description
#home-carousel .caption .description, .home-carousel .caption .description {
color: Insert color in Hex code !important;
}

For example-

Navigation top menu:

Background color and text color
.navbar.navbar-default {
background: Insert color in Hex code !important;
color: # Insert color in Hex code !important;
}

For example-

.navbar.navbar-default {
background: black !important;
color: #00FFDA !important;
}

Search bar border and thickness
.main-search-bar {

border: # Insert color in Hex code solid 2px !important;
}

For thickness change the number 2 to a higher number.

For example- Custom CSS fields in Bamboo:

Mobile navigation menu text color:

.mobile .navbar-nav>li>a {
color: # Insert color in Hex code !important;
}

For example-
.mobile .navbar-nav>li>a {
color: #00FFDA !important;
}

Login page:

Title - Title text

.login-title {
color: # Insert color in hex !important;
}

For example-
.login-title {
color: #1c1481 !important;
}

Button- Login button
.loginBtn {
background: # Insert color in hex !important;
}

For example-
.loginBtn {
background: #1c1481 !important;
}

Background color-

.login-main-form {
background: Insert color in hex !important;
}

For example-
.login-main-form {
background: white !important;
}

Image- Image in the right side of the page
Bamboo Pro tip: The image should be uploaded as a link, if you can't do it yourself, contact our support team to upload an image.

.login-main-form .login-image .image-login {
background-image: URL( Insert image url) !important;
}

Category page

Category banner text- The text of the category name on the top of the category page

#gallery-page .category-header {
color: Insert color in hex !important;
text-shadow: 2px 2px black;
}

For example-
#gallery-page .category-header {
color: white !important;
text-shadow: 2px 2px black;
}

EPG colors:

Channel list Background
.channels-list {
background-color: Insert color in hex !important;
}

For example:
.channels-list {
background-color:black !important;
}

Channel header (Where it says the time)

#guide-header .channels-schedule {
background-color: #Insert color in hex !important;
}

For example:
#guide-header .channels-schedule {
background-color:#f79133 !important;
}

Text color:
#channels-guide {
color:# Insert color in hex !important
}

For example:
#channels-guide {
color:#FFF !important}

EPG background color:

.channel-schedule-row.channels-guide-body {
background-color:# i nsert color in hex !important
}

For example:
.channel-schedule-row.channels-guide-body {
background-color:#000 !important
}