Custom Flip Cards

​@Samanthamatey Unfortunately, Docebo has stated that they don’t support CSS even it’s a functionality on their platform so, I assume that you won’t get much help from the support.
Also, by default that is not possible on the system.

What you could do however, is to raise this to your Docebo CSM and ask if they know any other customer who would have those flip cards developed. If yes, then that way you know it’s possible and you could as from the CSM could you contact with the customer for more information.

What!!?? Docebo doesn’t support CSS… that is false.

I am guessing that is not what you meant to say.
Some CSS and some HTML tags are rejected.

Here is a little HTML and CSS you could use to make some flip tiles.

<div class="myTile">
<div class="myTileWrap">

<div class="myTileF">
<img src="https://path/to/your/image.jpg" alt="image.jpg" style="width:150px;height:150px;" />
</div>


<div class="myTileB">
<h4>Look up stuff</h4>
<a class="actionBtn" href="https://www.google.com">Search</a>
</div>

</div>
</div>

/** Flip Tiles **/


.myTile {
  background-color: transparent;
  width: 150px;
  height: 150px;
  perspective: 500px;
  display: inline-block;
  padding-bottom: 15px;
  padding-right: 10px;
}

.myTileWrap {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
  box-shadow: 2px 4px 8px 2px rgba(255,255,255,0.8), 1px 5px 2px 0 rgba(0,0,0,0.8);
  border-radius: 0px;
}

.myTile:hover .myTileWrap {
  transform: rotateY(180deg);
}



.myTileF, .myTileB {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0px;
}

.myTileF {
  background-color: #bbb;
  color: black;
}

.myTileF img {
  border-radius: 0px;
}

.myTileB img {
  border-radius: 0px;
}

.myTileF a {
  text-decoration: none;
}

.myTileB a {
  text-decoration: none;
}

.myTileB {
  background-color: #156082;
  color: #ffffff;
  transform: rotateY(180deg);
}

.actionBtn {
  width: 80%;
  padding: 5px;
  text-align: center;
  background-color: #03A7C2;
  color:white;
  border-radius: 15px;
  margin-top: 5px;
  display:inline-block;
}

/** End Flip Tile **/

What!!?? Docebo doesn’t support CSS… that is false.

​@gstager Yes the system does but Docebo as a company won’t support your CSS development is what I meant. At least that has been told me by Docebo staff.

​@Olli-Pekka Haataja - hi - follow up on what ​@gstager was saying - I have found this is a pretty standard practice with Saas content mgmt systems and LMSs. Going off-road brings around those types of statements. At least we are in a system that gives us a chance to drive and control a page experience with data driven (and lms function) widgets.

80% of the learning mgmt solutions out on the market dont give you any luxuries with custom experience beyond nesting catalogs and a branding module that usually controls color, font, a header, a logo - and thats really it.

Thanks you for your follow-up ​@dklinger.
I hear you and as a system admin for several LMS’s previously, I’m aware that most of the LMS solutions are not as configurable as Docebo is via CSS which is great and one of the reason we chose Docebo in the first place!

But as I tried to correct myself from my initial comment, I didn’t mean you cannot use CSS in Docebo.
What I tried to state was that, yes, you can use CSS but if there is any issues with it etc, you won’t most likely get much support on the problems from Docebo as they don’t support CSS customizations that admins have done to the platform.
I think my comment came out wrong and it’s easy to misinterpret.

<div class="myTile">
<div class="myTileWrap">

<div class="myTileF">
<img src="https://path/to/your/image.jpg" alt="image.jpg" style="width:150px;height:150px;" />
</div>


<div class="myTileB">
<h4>Look up stuff</h4>
<a class="actionBtn" href="https://www.google.com">Search</a>
</div>

</div>
</div>

/** Flip Tiles **/


.myTile {
  background-color: transparent;
  width: 150px;
  height: 150px;
  perspective: 500px;
  display: inline-block;
  padding-bottom: 15px;
  padding-right: 10px;
}

.myTileWrap {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
  box-shadow: 2px 4px 8px 2px rgba(255,255,255,0.8), 1px 5px 2px 0 rgba(0,0,0,0.8);
  border-radius: 0px;
}

.myTile:hover .myTileWrap {
  transform: rotateY(180deg);
}



.myTileF, .myTileB {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 0px;
}

.myTileF {
  background-color: #bbb;
  color: black;
}

.myTileF img {
  border-radius: 0px;
}

.myTileB img {
  border-radius: 0px;
}

.myTileF a {
  text-decoration: none;
}

.myTileB a {
  text-decoration: none;
}

.myTileB {
  background-color: #156082;
  color: #ffffff;
  transform: rotateY(180deg);
}

.actionBtn {
  width: 80%;
  padding: 5px;
  text-align: center;
  background-color: #03A7C2;
  color:white;
  border-radius: 15px;
  margin-top: 5px;
  display:inline-block;
}

/** End Flip Tile **/

Hi, I’m trying to test this on our platform and need a bit more direction. Do I put the HTML in the HTML widget on a page and paste the CSS into the Configure Branding and Look section under the admin gear?

I have changed the img src to link to our images I’ve hosted and that image pops up correctly. Not super familiar with CSS, sort of familiar with HTML with some past work I’ve done. Thanks!

Edit: I figured it out! You paste the HTML in the HTML widget and the CSS in the Configure Branding and Look section. For some reason it wasn’t saving even after I hit save after entering the CSS. Just had to do a computer restart and it worked fine. 🤷‍♂️

​@ChrisPrice - Glad to hear you got it figured out.

Gotta hand it to the good ol’ “didja restart” trick!!

​@ChrisPrice glad you are finding your way to a solution here, wanted to point something out that got buried above - As Greg mentioned - you can use custom HTML and CSS in Docebo, but not all types and combinations will work (some will be stripped out, or reordered in a way that won’t allow your plan to move forward.)

The good news? There’s always multiple approaches! Generally, you want to keep things as isolated as possible (the groupings is where things often get redone). As you move forward in your customizations, keep this in mind, also it is helpful to post a sample of what you have tried so that others can maybe suggest alternative approaches that won’t break :)