I have read SO many posts on here but haven’t been able to track down any CSS/html that allows you to edit the number of available containers. I know it is possible, just looking for someone willing to share!
Can you be more specific?
Columns where?
Generically speaking - you could take a single full row HTML/WYSIWYG widget and craft up several columns if you want more than the 1/3 - 1/3 - 1/3 or perhaps want them in different proportions than even thirds.
Yes! Exactly that. How do you divide up a row into 4, 6 or 8?
You’ll want some CSS to define your column sizes. This goes in the Branding and Look section
Example
Make additional rules for other column widths. Just take 100 divided by the number of columns you want for the percentage. This example is six.
.myRow{
float:left;width:100%
}
.myRow.sixth{
width:16.66666%
}
Then some HTML that calls on the CSS in your widget
Example
<div class="myRow">
<div class="myRow sixth" style="background-color:#B0E0E6;"><p>Section 1</p></div>
<div class="myRow sixth" style="background-color:#0000FF;color:#FFFFFF;"><p>Section 2</p></div>
<div class="myRow sixth" style="background-color:#FF0000;"><p>Section 3</p></div>
<div class="myRow sixth" style="background-color:#008000;"><p>Section 4</p></div>
<div class="myRow sixth" style="background-color:#FFFF00;"><p>Section 5</p></div>
<div class="myRow sixth" style="background-color:#808080;"><p>Section 6</p></div>
</div>
This is very basic but it may help you start monkeying around
thank you!! obviously just learning how to leverage html for our site.
so if i wanted to add an image or image with a link i would then insert either
<img src="path_to_your_image.jpg" alt="Image description" width="300" height="200" style="border: 2px solid black;">
<a href="https://www.example.com">
<img src="path_to_your_image.jpg" alt="Image description">
</a>
into this area??
<div class="myRow sixth" style="background-color:#B0E0E6;"><p>Section 1</p></div>
That is the idea. No additional CSS is needed to add the images unless you need to style the images a certain way or customize the link decoration.
Should look similar to this.
Tweak as desired to achieve desired look. Section 5 has the link.
<div class="myRow">
<div class="myRow sixth" style="background-color:#b0e0e6;">
<p>Section 1</p>
</div>
<div class="myRow sixth" style="background-color:#0000ff;color:#ffffff;">
<p>Section 2</p>
</div>
<div class="myRow sixth" style="background-color:#ff0000;">
<p>Section 3</p>
<p> </p>
<p><img style="display:block;margin-left:auto;margin-right:auto;" src="https://path/to/image.png" alt="" width="200" height="200" /></p>
<p> </p>
<p> </p>
</div>
<div class="myRow sixth" style="background-color:#008000;">
<p>Section 4</p>
</div>
<div class="myRow sixth" style="background-color:#ffff00;">
<p>Section 5</p>
<p><a href="https://www.docebo.com">
<img style="display:block;margin-left:auto;margin-right:auto;" src="https://path/to/image.png" alt="" width="200" height="200" /></a></p>
<p> </p>
</div>
<div class="myRow sixth" style="background-color:#808080;">
<p>Section 6</p>
</div>
</div>
Amazing!!! Thank you, Greg. Much appreciated!
1 - is there a simple way to manipulate the size of a single widget using the custom content box; i.e. smaller in width and centered within the widget container
2 - I found the W3.CSS templates you shared in another post - thanks for that! question: is there a way to change CSS without adjusting our current site? we want to play around with css templates but we do have users on our site that we don’t want impacted while we work on the revamp.
thanks!!
- You want to adjust the size of the widget itself? Like so…?
In the example below, I took the same widget and dropped it to 50% and centered it.
- I personally created a test page that only superadmins can access and no one else can see it. I utilize CSS classes and IDs to make sure that nothing else on the platform has the same class or ID so that what the user sees remains the same.
Otherwise, there is a sandbox tool that I believe you can play with but I understand that to be an additional expense through Docebo. We do not have this option so I cannot speak about it much more than that.
Reply
Log in to Docebo Community
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Docebo Employee Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.