Question

Quick Links Widget - 4 Across?

jillian.bejtlich
Rank
Userlevel 2

I think I’ve tried every change I can think of but just can’t get my Quick Links widget to do 4 across like Gainsight has on their home page here:

 

I can only get 3 across (with 3) or double stacked rows of 2.

What am I missing?

12 replies

DannyPancratz
Rank
Userlevel 6
Badge +5

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

 

jillian.bejtlich
Rank
Userlevel 2

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!

DannyPancratz
Rank
Userlevel 6
Badge +5

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.
jillian.bejtlich
Rank
Userlevel 2

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

DannyPancratz
Rank
Userlevel 6
Badge +5

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 :) 

juan.delrio
Rank
Userlevel 3
Badge

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>

Kenneth R
Rank
Userlevel 5
Badge +4

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

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.  👍

jillian.bejtlich
Rank
Userlevel 2

@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.

juan.delrio
Rank
Userlevel 3
Badge

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.

Kenneth R
Rank
Userlevel 5
Badge +4

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!

jillian.bejtlich
Rank
Userlevel 2

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.

Kenneth R
Rank
Userlevel 5
Badge +4

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.  

Reply


Terms & ConditionsCookie settings