Best Answer

Modifying # of Columns?

  • 4 August 2023
  • 8 replies
  • 98 views
jcellitti
Rank
Userlevel 1
Badge

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! 😊

icon

Best answer by gstager 4 August 2023, 23:12

View original

8 replies

gstager
Rank
Userlevel 7
Badge +5

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.

Greg
jcellitti
Rank
Userlevel 1
Badge

Yes! Exactly that. How do you divide up a row into 4, 6 or 8? 

gstager
Rank
Userlevel 7
Badge +5

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

Greg
jcellitti
Rank
Userlevel 1
Badge

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>

 

gstager
Rank
Userlevel 7
Badge +5

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>

 

Greg
jcellitti
Rank
Userlevel 1
Badge

Amazing!!! Thank you, Greg. Much appreciated! 🤗 

jcellitti
Rank
Userlevel 1
Badge

@gstager a few more questions!

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!!

gstager
Rank
Userlevel 7
Badge +5

@jcellitti -- So what I had done was to generate several columns within the single - full row - widget.

  1.  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.

 

  1. 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.

 

Greg

Reply


Terms & ConditionsCookie settings