Quick Links Widget - 4 Across?

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

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.

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 

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!