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! 😊
Best answer by gstager
View originalI 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! 😊
Best answer by gstager
View originalCan 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.
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>
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!!
In the example below, I took the same widget and dropped it to 50% and centered it.
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.