Quick Links Widget - 4 Across?

It’s done with CSS that’s why. I had Gainsight help me replicate it awhile back. Details here: 

• What widget is this?

That’s what I thought too, but then came across @Kenneth R’s comment in this thread which makes it sound like the widget has been updated.

• Adjust Number of Quick Links in the row

Happy to make the change with CSS, but would prefer to use the default if I can!

Notes:

1. the widget default is still to roll up up into a “show more” button after six quick links (because it’s default setting is rows of 3). So this really only works for 1 row of 4, not two rows of 4. If you want two rows of 4, use two Quick Link widgets and apply the styling for each
2. The styling will apply for quick links tied to that index number on all customizable landing pages, so it could mess up styling you have elsewhere. An easy way around this is to add quick link widgets to those pages and just set the visibility setting to hide.

I’m just aiming for 4 across right now, but yes - noted! Thank you!

I also found this post 

• Adjust Number of Quick Links in the row

in which @Kenneth R recently pinned this comment: 

Just a quick note - since this topic was created, we’ve made it possible to create rows of Quicklinks with four links per row using the default widget in Customize mode (so no custom coding necessary if you want for links).  A nice example is on our homepage currently.  :)

But I’m not seeing that possible on my community. Maybe it was rolled-back. But it sounds like GS is close to making this a lot easier for us with customizable options within the widget itself. 

Edit: Jinx! Was posting this as you posted your comment above :) 

There is another way.  Custom HTML Widget!

The css solution didn’t work for me as I didn’t want to affect my homepage and it’s 3 button setup.
Bonus, I can use any size image and use mouse over effects.
 

HTML Code (replace [] with links and images):
<div style="overflow-x:auto;">
<table align="center" width="50%">
  <tbody><tr>
  <td>
      <a href="[link for button 1]" target="_blank"><img src="[image for button 1]" onmouseover="this.src='[image for button 1 mouseover]'" onmouseout="this.src='[image for button 1]'"></a>
    </td>
        <td>
      <a href="[link for button 2]" target="_blank"><img src="[image for button 2]" onmouseover="this.src='[image for button 2 mouseover]'" onmouseout="this.src='[image for button 2]'"></a>
    </td>
         <td>
      <a href="[link for button 3]" target="_blank"><img src="[image for button 3]" onmouseover="this.src='[image for button 3 mouseover]'" onmouseout="this.src='[image for button 3]'"></a>
    </td>
         <td>
      <a href="[link for button 4]" target="_blank"><img src="[image for button 4]" onmouseover="this.src='[image for button 4 mouseover]'" onmouseout="this.src='[image for button 4]'"></a>
    </td>
      </tr>
      
      </tbody>
      </table>
</div>

Thanks @DannyPancratz for the clarification - the native widget indeed only works for 1 row of 4.  I’ll update my other topic to make that more clear.  👍

@Kenneth R - Hi! How do you get the native widget to do a single row of 4 though? I can only get it to do 3. At 4, it breaks into 2 rows of 2.

I couldn’t get that to work either. Mine would auto delete the first one entered after 3 quick links when I tried to save it.

Oh my goodness, folks, this is awkward. I have good news and bad news.  😅 

First of all, the bad news is that I erroneously stated that our platform already natively supports more than 3 quicklinks per row.  I had to do some digging, and now realise that I do vividly remember it being designed and worked on, but that it didn’t make it to production.  So today, it does actually still require a bit of script.  I had double-checked our own CSS - but hadn’t checked out TPS which is where ours sits.  SORRY for the confusion folks! 

HOWEVER, here is the good news - we are working on the enhanced quicklinks widget in a near-term upcoming sprint and one of the enhancements wil be native options for more links per row.  So it is now on the way and coming soonish!

Thanks for the clarification @Kenneth R! I think we’re all just relieved to hear we hadn’t been missing anything obvious. And even more thrilled the actual widget is coming sometime soon.

Hi everyone, great news - we’ve just deployed the new Quicklinks widget that allows you to natively add more than 3 items per row.  :)

The new widget might not play nicely with some custom styling scripts, so if you see something funky with your Quicklinks today try commenting-out the custom CSS and enabling the new native setting instead.  

I’m using the new Quick Links widget and have two rows of five links set the way I want them. However, even with space available, I can’t get rid of the “Show 4 More” / “Show Less” button and have them display without collapsing. Do you have any suggestions so all of them show without the button?

 

Hey @Sam77 - you’re right, that is strange.  I’m going to ping our Product folks about that as it doesn’t make sense to me either.  I did play around on a test page and I think a workable immediate workaround is to have two separate quicklink widgets stacked on top of each other.  If the bottom one doesn’t have a title, it looks fairly clean - though I admit the padding isn’t perfect (a bit of custom CSS could probably fix that).  

Thanks, @Kenneth R!