Skip to main content
Rhonda
Rhonda
Contributor ⭐️⭐️⭐️
Jan 22, 2024 7:41 PM UTC
Solved

What widget is this?

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

    DannyPancratz
    DannyPancratzAnswer
    VIP ⭐️⭐️⭐️⭐️⭐️
    Jan 22, 2024 8:29 PM UTC

    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
    View in thread

    4 replies

    DannyPancratz
    DannyPancratzAnswer
    VIP ⭐️⭐️⭐️⭐️⭐️
    Jan 22, 2024 8:29 PM UTC

    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. 

     

    Translate
    FYI: I am no longer active in this community
      DannyPancratz
      DannyPancratz
      VIP ⭐️⭐️⭐️⭐️⭐️
      Jan 22, 2024 8:32 PM UTC

      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. 

      Translate
      FYI: I am no longer active in this community
        Rhonda
        RhondaAuthor
        Contributor ⭐️⭐️⭐️
        Jan 22, 2024 10:03 PM UTC

        Awesome @DannyPancratz I appreciate it. 

        Translate
        why are there signatures at the end of every post?
        Alistair FIeld
        Alistair FIeld
        Expert ⭐️
        Jan 26, 2024 6:05 AM UTC

        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.

        Translate
        The needs of the many, outweigh the needs of the few. 🖖
          Terms & ConditionsAccessibility statement