Disable the Read More button to display all of the list item content

Ask the Community Customization
1

  • Issue description: The page linked to below has the LinkedIn feed in the News section. The ‘hero’ item on the left uses the List layout but only shows one item. I would like it so that the Read More button is not being used so that the whole of the item’s content is on display as the default. Is it possible to do this? And if so, how?

  • Link to the page with the widget in question: About Us

2 Likes
3

Hi there, @user28148 and welcome aboard :waving_hand:

Happy to say that it’s possible to achieve this! I’ve shared your request with the dev team and will update you once the solution is ready :slightly_smiling_face:

1 Like
4

Here is a code to hide the Read More button and display a full post - Remove Read More button and display full text.

We’ve also noticed that you’re using temporary classed in the Custom CSS section, which may change and stop working after the widget updates.

I’ve asked the devs, and they’ve shared the adjusted solutions with the static classes.

Here is a code for your Hero post widget:

.es-text-shortener {
  width: 100%;
  height: 100%;
  display: block;
}

.es-text-shortener > div {
  display: block;
  float: right;
  width: 50%;
}

.es-text-shortener > div:first-of-type {
  padding-left: 20px;
}

[class*="MediaImage__Container-sc"] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

[class*="CardContainer-sc"] > :first-child {
  padding-top: 0;
}
    
[class*="User__Caption-sc"] {
  opacity: 1;
}

[class*="CardUserBlock__StyledUser-sc"] {
  font-size: 16px;
  font-family: Proximanova-Normal, sans-serif;
}

.es-text-shortener {
  color: #ffffff;
  font-family: Proximanova-Normal, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 45px;
}

[class*="Popup__PopupContent-sc"] .es-text-shortener {
  font-family: Proximanova-Normal, sans-serif;
}

@media (max-width: 479px) {
 .es-text-shortener > div {
    display: block;
    float: left;
    width: 100%;
  }
  
  .es-text-shortener > div:first-of-type {
    padding-left: 0px;
  }
  
  .es-text-shortener {
    font-size: 25px;
  }
}

[class*="CardUserBlock__StyledUser-sc"],
[class*="Popup__PopupContent-sc"] .es-text-shortener,
[class*="Text__Container-sc"] a {
  color: #2c2c2c;
}

/* DISPALY THE HIDDEN TEXT */

/* Force the full text to always show */

[class*="Main__Inner-sc"] {
  pointer-events: none;
}

.es-text-shortener {
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  height: auto !important;
  white-space: normal !important;
}

/* Hide both "Read more" and "Hide" toggle buttons */

.es-text-shortener-control-open {
  display: none;
}

And this is a code for the LinkedIn Feed - side panel:

[class*="WidgetTitle__Header-sc"] {
  font-family: Proximanova-Bold, sans-serif; 
  font-weight: 500;
}

[class*="CardMediaBlock__MediaBlock-sc"] {
  display: none;
}

.es-text-shortener {
  font-family: Proximanova-Normal, sans-serif; 
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #14c0be;
}

.es-text-shortener:hover {
  color: #fff;
}

[class*="Popup__PopupContent-sc"] .es-text-shortener:hover,
[class*="Popup__PopupContent-sc"] .es-text-shortener {
  font-family: Proximanova-Normal, sans-serif; 
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: revert;
}

.es-load-more-button {
  font-family: Proximanova-Normal, sans-serif !important;
  font-weight: 400;
  width: 100%;
}

/* hide the very first LinkedIn item so that the Hero Widget can output it */

.es-list-layout > :first-child {
  display: none;
}

[class*="ButtonBase__Overlay-sc"] {
  outline-offset: -4px;
  outline: 1px dashed #fff;
}

/* Hide Read More as it displays uncontrolled text font-size */

.es-text-shortener-control-open {
  display: none;
}

[class*="CardUserBlock__StyledUser-sc"] {
  font-family: Proximanova-Normal, sans-serif; 
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
}

[class*="Counters__Counter-sc"],
[class*="ShareButton__Button-sc"] {
  font-family: Proximanova-Normal, sans-serif;
}

Please try it out and let me know how it worked :slightly_smiling_face:

2 Likes
5

Fantastic!! Great, thank you, that’s worked perfectly.
https://www.flipview.co/about-us-copy

Cheers

3 Likes
6

Awesome, you’re always welcome!

By the way, we’d like to invite you to participate in our August Contest, where you can win a 6-month extension for your subscription - August Contest: Celebrate 100K Users with us and win 6 FREE Months! :wrapped_gift:

Check the details and join in :wink:

1 Like