Solved

What widget is this?

  • 22 January 2024
  • 4 replies
  • 78 views

Hi Community :-)

What widget is this on the homepage or is it custom HTLM?

I can’t get the Quick Links widget to stack 4 in a row like this

icon

Best answer by DannyPancratz 22 January 2024, 21:29

View original

4 replies

Userlevel 6
Badge +7

UPDATE - April 10, 2024: The quick links widget has been enhanced with this funtionality and you no longer need the solution below. 

Simply edit the Layout settings in customize mode. 

Old answer in the spoiler below

 it’s custom CSS to change the size of the quick links widget.

I asked about it awhile back and support was able to help me with this

/* start quicklinks view 4 tiles for Community Forums*/
@media (min-width: 1240px) {
.widget-container--index-6 {
justify-content: space-between;
}

.widget-container--index-6 article.quicklink-image div.quicklink__title{
padding:16px 8px;
}

.widget-container--index-6 article.quicklink-icon, article.quicklink-image{
text-align:center !important;
}

.widget-container--index-6 .quicklink__box {
grid-column: auto / span 3 !important;
}
/* end quicklinks view 4 tiles*/

the index # is going to change depending on where on the page (order of widgets from top to bottom), i believe. So if you move the widget up/down after setting this up, it could break. But I’ve found hidden widgets count in the index, so I just hide/unhide to keep it working. 

 

Userlevel 6
Badge +7

Note 1: the quicklinks widget is built with the default to 3 in a row, so after 6 (two rows nomally, but only 1.5 with this style applied) it auto hides widgets 7+ in a view more button. And that looks weird with a row and half in this layout of 4 across. 

So i don’t recommend using this style for anything more than 4 quicklinks in a widget. If you need to go to 8, add another quick link widget and apply the style again. 

Note 2: This custom CSS applies to every place where quick links are used. So if you have it on a community overview page or knowledge base overview page or Ideation page or custom page…

The hide/unhide solution is helpful there too. You can have quick links widgets to satisfy the index number and hide/unhide them if you want the style to be 3 across or 4 across. 

Awesome @DannyPancratz I appreciate it. 

Userlevel 3
Badge +2

Here is an article on how to adjust the number of quicklink in a row I wrote a while back.

Could also be of use.

Reply