Forum Discussion

phoneboy's avatar
phoneboy
Director
5 years ago

Customizing the display of community.widget.page-options

In several of my page layouts, the display of the "three dots" for the "show page options" menu takes up an entire line. I assume I can customize this with CSS somehow (e.g. make it smaller, make it...
  • Parshant's avatar
    Parshant
    5 years ago

    phoneboy,

    You can replace it with gear icon or other settings option icons available globally to represent, or you can also use as per branding of enterprise in community.

    Below are some classes which can be used to place icon or text:

    .default-menu-option:after{
width: 30px;
content: "";
height: 30px;
background: url("/html/assets/gearIcon.png");
background-position: 0 0;
}
.lia-js-menu-opener.default-menu-option:after{
width: 30px;
content: "";
height: 30px;
background: url("/html/assets/gearIcon.png");
background-position: 0 0; 
}

    You need to add these icons in this class using :after or :before property

phoneboy's avatar
phoneboy
Director

Except that places the icon AFTER the three dots, which still show in this case.
I don't want the three dots to show at all.
How do I accomplish this?

Parshant's avatar
Parshant
Boss
5 years ago

When you add background to before, it will override the existing icon there.

  • phoneboy's avatar
    phoneboy
    Director
    5 years ago

    Ok, that worked once I made the CSS a bit more specific.