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 display something other than 3 dots).
Precisely what classes control the display of this and where can I customize them in Studio?

  • 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

4 Replies

Sort By
  • Parshant's avatar
    Parshant
    Boss
    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
    5 years ago

    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.