Customize Share Options

Wishlist LinkedIn Feed
1

I am glad I came across this widget, it looks like exactly what I need! The only option I was surprised isn’t available is the ability to customize what platforms show up in the share menu. I don’t know if my company is going to want to show an option for sharing on X or telegram due to controversies associated with the platforms. I went to see if I could hide the options with CSS, but they do not have unique classes/ids.

1 Like
2

Hi @Edward_Bauer :wave:

I agree that it would be awesome to have this option right in the configurator. We’ll try to consider it in our future updates.

As for now, you can use this CSS code to hide Telegram and X:

.global-styles,
[class*='DropdownItem__ItemContainer-sc']:nth-child(5) {
  display: none;
}

.global-styles,
[class*='DropdownItem__ItemContainer-sc']:nth-child(7) {
  display: none;
}

You can change the number in the second line of the code to hide another button. To find the correct number of the button, just use its order number in the list and add 2. For example, Facebook is the 1st+2=3.

Check it out and let me know if it helped :slightly_smiling_face:

Also, our devs checked your widget noticed that you are using CSS codes with temporary classes. They suggested using these codes with the up-to-date classes instead:

[class*='CardLayout__Container-sc'] {
    box-shadow: 3px 3px 9px rgba(0, 0, 0, .16);
    min-height: 100%;
}

[class*='CardLayout__Block-sc'] [class*='CardLayout__OuterBlock-sc'] [class*='CardLayout__PreviewLinkBlock-sc'] [class*='CardMediaBlock__MediaBlock-sc'] {
    flex: 1;
}

[class*='CardMediaBlock__MediaBlock-sc'] {
    margin-top: 0 !important;
    border-top: 5px solid #a2d8ce;
    border-bottom: 5px solid #a2d8ce;
}

[class*='MediaContainer__Inner-sc'] {
  margin-top: 0 !important;
}

[class*='Text__Container-sc'] {
    font-family: 'poppins', 'arial', sans-serif;
}

[class*='ButtonBase__Overlay-sc'] {
    padding: 7px 15px !important;
    text-transform: uppercase;
    color: rgb(31, 31, 31);
    font-weight: 500;
    font-size: 1rem;
}

.es-load-more-button {
    border-width: 3px !important;
}
.es-load-more-button:hover,
.es-load-more-button:focus,
.es-load-more-button:active {
    background: #3c4d4f !important;
}
.es-load-more-button:hover span,
.es-load-more-button:focus span,
.es-load-more-button:active span{
    color: #fff !important;
}
3

Hi @Max,

Thank you for the fast reply! I had considered using the nth-of-type method as well but was trying to come up with an alternative in case the order of the items ever change in the future. I will go ahead and use it though, it seems like the best solution. Also, thank you for providing the suggestion on using wildcard selectors for the classes. I incorrectly assumed the characters that followed were pertaining to specific layout that was selected, not temporary designations.

4

You are always welcome :wink: