+4
Does anyone have html code/css that would control the left or right margin for text on a widget on a custom page allowing you to have an image to the left or right of a box as shown in my mock up below?I don’t have extensive html/css skills but can cut and paste code into an HTML widget and I do know how to add custom styles to the configure branding and look area.
Best answer by Anders
View original
+2
hey Cindy,
I know it isn’t an answer to your question as I’m not that great with HTML / CSS and hopefully someone else can help you with that… however!
Isn’t the mockup you attached just a Custom Content Box widget with a fancy graphic for a background? (perhaps the text is also a part of the image) Even if it isn’t then I absolutely see the possibility of recreating something similar with it and it should be fairly easy 
I hope it helps - image of the custom content box widget below:
+4
Isn’t the mockup you attached just a Custom Content Box widget with a fancy graphic for a background? (perhaps the text is also a part of the image) Even if it isn’t then I absolutely see the possibility of recreating something similar with it and it should be fairly easy I hope it helps - image of the custom content box widget below:
+2
Sorry Cindy, I myself can’t help with that. For such stuff, we use some support from our IT department; however, I have one more recommendation that you might find useful.
Recently, we’ve started using a Comslider tool. It allows you to create cool, interactive and animated slideshows. I’m not sure if this is something that would be useful to you, but in our case, it works magic. It’s very easy and intuitive. You create it on their website and then just put it in Docebo using the code it generates.
It that doesn’t solve your issue, I hope somebody else will be able to answer you :)
+4
Wow
+8
I have worked quite a bit with HTML on Docebo and although it seems to accept certain HTML tags, once rendered some tags just don’t ‘stick’. That said, it never hurts to try but please do test, test, test to make sure you get the results you want. You might also try this tool to create code (Visual Studio Code https://code.visualstudio.com/) and check out this basic site if you have a certain comfort level with HTML coding (https://www.w3schools.com/html/default.asp).
to more directly answer your question, i haven't had any luck finding the specific tag that would add padding to the left/right margins. You might try working with a TABLE (centered) or by adding some borders...these tags seem to work ok.
+4
. I too have had the problem with the HTML “sticking” once you paste it into the widget but I haven’t tried using TABLE tag, so I’ll give that a go. I was hoping 
If some of you are interested in checking out how to step up your page design, I really like the courses and content in Docebo U that Andrea has done. Here’s a link to one of his courses.
+8
+4
Unfortunately my skill set doesn’t let me go off with wild abandon. That’s probably a good thing
+8
+4
Here's one way to do it:
<!DOCTYPE html>
<!-- First well make a division with the background color we want. We'll make it 100% wide, so the entire widget. -->
<div style="width: 100%; min-height: 500px; background-color: #4b98cb; ">
<!-- We put the left image in its own division. We use float: left to allow text to flow on the left of this image. -->
<div id="image" style="float: right; height: 500px;">
<img src="You need to put your own image file here" style="height: 100%;" />
</div>
<!-- Now we make a division for the right side. -->
<div>
<!-- We start with the corner image. I've manually set the height to 200px, becaused that looked OK -->
<img style="height: 200px; width: auto;" src="You need to put your own image file here" />
<!-- Here is a division for the text. It has a 20px margin. -->
<div id="text" style="margin: 20px; ">
<p style="font-size: 40px; color: white;">
No time for SEL? Check out these games and activities that teach important SEL skills in as little as 10 minutes.
</p>
<!-- The button is really just a link, but with fancy formatting. -->
<a style="
padding: 8px 16px;
margin: 20px 20px 20px 0;
line-height: 20px;
font-size: 14px;
font-weight: 700;
color: #ffffff;
background: #f37322;
text-decoration: none;
display: inline-block;"
href="" >
Browse
</a>
</div>
</div>
</div>I had to manually set the widget height to the same as the image (500px).
This might look different for you, depending on any custom styles set in Docebo. But here is what it looks like for me:
+8
Hey
+4
+1
Hi Cindy,
I had the same problem and this works for me, give it a try
<p><img src="#" alt="" width="672" height="250" align="left" style="padding: 10px"/></p> <p>Text</p>
<p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextText.</p> <p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextText.</p> <p>Text TextTextTextTextTextTextTextTextTextTextTextTextTextText.</p>
Hey
The code is included in my post. You might need to click something to see it.
+8
Hey
The code is included in my post. You might need to click something to see it.
Thanks Anders, I managed to figure it out with just the text portion which is mostly what I was looking for...your code looks great though...did you do that yourself or do you have someone who codes for you?
Hey
The code is included in my post. You might need to click something to see it.
Thanks Anders, I managed to figure it out with just the text portion which is mostly what I was looking for...your code looks great though...did you do that yourself or do you have someone who codes for you?
The button is something we already have in our custom styles in Docebo (just changed the color and tweaked some details). The rest I wrote just to see if I could solve the puzzle. 😄
+8
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.