Skip to main content
Rhonda
Contributor ⭐️⭐️⭐️
January 22, 2024
Solved

What widget is this?

  • January 22, 2024
  • 4 replies
  • 170 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

Best answer by DannyPancratz

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. 

 

4 replies

DannyPancratz
VIP ⭐️⭐️⭐️⭐️⭐️
January 22, 2024

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. 

 

FYI: I am no longer active in this community
DannyPancratz
VIP ⭐️⭐️⭐️⭐️⭐️
January 22, 2024

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. 

FYI: I am no longer active in this community
Rhonda
RhondaAuthor
Contributor ⭐️⭐️⭐️
January 22, 2024

Awesome @DannyPancratz I appreciate it. 

why are there signatures at the end of every post?
Alistair FIeld
Expert ⭐️
January 26, 2024

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.

The needs of the many, outweigh the needs of the few. 🖖