A variation on my earlier beach-scene proof of concept. Includes a few accessibility tweaks for larger buttons and text in a few places.
I tried to get pebbled black and pebbled white leather to work but it didn’t look good for me - the header bar is especially intransigent. I’m also not happy yet with my gold button images or my brushed silver button images. Using freepik premium as my image source fyi all.
I’m aware this is a bit “dirty” in terms of text-color-overrides for accessibility, and that none of this reproduces in mobile apps.
I am using 650/651px as my breakpoint for mobile phone portrait mode vs all other cases.
Looking for any advice on any part of this!
/* fancy header bar*/
header.doc-layout-header div.doc-layout-header-bar doc-layout-internal-header {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-header.png) repeat-x center;
background-size: contain;
background-color: transparent;
}
/* fancy breadcrumb bar*/
doc-layout-breadcrumbs div.breadcrumbs {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-wood-dk.jpg);
background-size: cover;
}
doc-layout-breadcrumbs div.breadcrumbs div.hierarchical-breadcrumbs ul li{
visibility: hidden;} /* hide breadcrumb text*/
/*doc-layout-breadcrumbs div.breadcrumbs div.navigation-history a {
color: black;} black navigation-back text*/
myprofile-widget div.cover {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-gold.jpg) !important;
background-size: cover !important;
box-shadow: inset 0.25em 0.25em 0.25em 0 rgba(255,255,255,0.5), inset -0.1em -0.1em 0.1em 0 rgba(0,0,0,0.5);
}/* profile widget */
div.cover, button.light-ring, button.bg-main-filled {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-silver.jpg) !important;
background-size: cover !important;
box-shadow: inset 0.25em 0.25em 0.25em 0 rgba(255,255,255,0.5), inset -0.15em -0.15em 0.15em 0 rgba(0,0,0,0.5);
color: black !important;
}/* brushed steel instead of blue primary highlights */
div.avatar__initials {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-silver.jpg) !important;
background-size: cover !important;
box-shadow: inset 0.25em 0.25em 0.25em 0 rgba(255,255,255,0.5), inset -0.1em -0.1em 0.1em 0 rgba(0,0,0,0.5), var(--hyd-shadow-md) var(--hyd-color-layout-shadow);
color: black !important;
}
button.bg-positive-green, button.bg-positive-green-filled, div.global-search-boxed-submit, ui-button-raised button, a.user-selector-confirm.btn-docebo.green, .player-arena-editor-panel .btn-docebo.green, div#player-lo-manage-panel .btn-docebo.green, div#player-blocks-nav-header-container .btn-docebo.green, div.modal .btn-docebo.green, input.btn-save {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-gold.jpg) repeat top right !important;
background-size: cover;
box-shadow: inset 0.25em 0.25em 0.25em 0 rgba(255,255,255,0.5), inset -0.15em -0.15em 0.15em 0 rgba(0,0,0,0.5) !important;
color: black !important;
}/* brushed gold instead of green primary highlight buttons */
@media screen and (min-width: 651px) {
button.button-circle {
box-shadow: inset 0.25em 0.25em 0.25em 0 rgba(255,255,255,0.5), inset -0.1em -0.1em 0.1em 0 rgba(0,0,0,0.5), var(--hyd-shadow-md) var(--hyd-color-layout-shadow) !important;
width: 64px !important;
height: 64px !important;
margin-top: 1em;
}/*expert and share larger buttons*/
doc-layout-action-buttons .action-buttons .button-wrap button div span.icon i {
color: black !important;
transform: scaleY(1.6) scaleX(1.6);
}/*black larger icons for expert and share etc*/
doc-layout-action-buttons .action-buttons .button-wrap button[aria-label="Share"] div span.icon i {
transform: scaleY(1.6) scaleX(-1.6) !important;
}
}
div.global-search-boxed-wrapper ui-icon span.color-negative svg {
fill: black;
transform: scale(1.3);
}/*black larger search icon*/
.docebo-tooltip {
font-size: 16;
}/*larger tooltips*/
doc-layout-action-buttons .action-buttons .button-wrap button {
box-shadow: inset 0.25em 0.25em 0.25em 0 rgba(255,255,255,0.5), inset -0.15em -0.15em 0.15em 0 rgba(0,0,0,0.5);
}/* 3d effect expert and share etc buttons???duplicate???*/
doc-layout-title-bar div#page-title__wrapper, course-edit div.course-edit_header {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-wood-light.jpg) repeat-x center;
background-size: contain;
/*box-shadow: none;*/
}/* fancy page title bar */
.modal-header, .scorm-upload-options {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-wood-light.jpg) repeat-x center;
background-size: contain;
/*box-shadow: none;*/
}/*generic modal header*/
.overview-course-header__wrapper {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-wood-light.jpg) repeat-x center top !important;
}
.learning-plan-lp .lp-progress__wrapper{
background-color: transparent;
}/*learning plan and course overview*/
/*.doc-layout-main, .tabs-content {
background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/breadcrumb-branding-docbg.jpg) repeat left top !important;
background-color: #f4f4f4 !important;
}/*main page bg - disabled*/
div.doc-layout-page-content div.overview-tabs-wrapper.bg-white {
background-color: transparent;
}/* transparent tabs bar below titlebar */
/*div.doc-layout-page-content div.overview-tabs-wrapper.bg-white header{
box-shadow: none !important;
}/* remove tabs box shadow*/
@media screen and (max-width: 650px) {
header.doc-layout-header div.doc-layout-header-bar doc-layout-internal-header, doc-layout-breadcrumbs div.breadcrumbs, doc-layout-title-bar div#page-title__wrapper {
background-size: cover !important;
}
}/*cover instead of x-repeat bg image on mobile*/
/*manual override button and highlight colors
.bg-admin-menu-filled {
background: lightgrey !important;}
.bg-hover-grey-superlight:hover {
background: lightgrey !important;}
a.text-main.bg-hover-grey-superlight:hover {
background: lightgrey !important;}
div.doc-layout-external-header {
background: white !important;}
div.users-list table.border-grey-light{
background: white !important;}
resource-selector-item div.wrapper.selected{
background: lightgrey !important;}
.data-browser-channels div.hyd-table-row:hover{
background: lightgrey !important;}*/
/*div.pages-widget-page div.widget-render-row div.single-widget{
background: lightgrey !important;}broken - trying to have white bg while loading homepage widgets*/
