CSS designator that controls this

  • What are the CSS designators that control the opacity/color selection in the notifications (and any of the other associated drop downs) as shown in this example image


    I'm specifically referring to the one that is opaque currently in the above image. I found the one that changes for the white color (I think).

    • Official Post

    That's nothing built-in but caused by the style used by you, I recommend just firing up the inspector of your browser, it will provide you with all CSS selectors and properties affecting that element. Usually you can just right-click and chose Inspect (phrasing may vary) from the context menu to get there quickly.

  • That's nothing built-in but caused by the style used by you, I recommend just firing up the inspector of your browser, it will provide you with all CSS selectors an

    Actually, it is controlled by some of the standard WBB css designators.
    The one that controls the white background appears to be

    CSS
    .interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li


    The problem I'm having is catching the one that controls the color when you hover over it... and example is here (from this site)
    ]


    specifically the blue color background that shows your reply. :D
    Once I know the CSS designator, I can change it via the !important tag (if necessary) or find it in my paid style and modify it there.

  • Guess Chrome on my Mac is a little different.. because I can't find where to see where it changes at when I go back and hover. the Developer Tools (when looking in the "Styles" and "Computed" tabs) never change when I hover. I realize that the style has changed it.. what I'm needing is the CSS for the transition that is performed in the HOVER status - which the Mac is not showing (or I can't find where to do find it at on Chrome/OS X).
    I'll just wait on the style author to hopefully reply on their support site to give me the specific CSS designator that is used for the hover color (which is probably the standard one as used in all other styles).
    Never new getting a simple CSS designator was going to be so difficult. :(

  • Maybe @Cr@@gle can help

    I've got a post in over on the support site.
    I think the normal CSS designator is the

    CSS
    .interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li:not(.loading):not(.noItems).interactiveDropdownItemOutstanding

    but not really sure - that might only be for the new ones (which looking more at it I think it is).. the CSS designator should be the same for any of them since it's controlled by the the core script (or should be).

    • Official Post

    Actually the option for the hover state is hidden behind a meaningless icon, I'm so used to it I didn't recognized it as being super stressful to find.



    Regarding your selector this is all right, but there is a second rule that kicks-in when the element in the outstanding state (the selector above) is hovered. This one gets revealed when clicking on the element in question in the inspector and then toggle the :hover state which will cause new rules to pop up.

  • uestion in the inspector and then toggle the :hover state which will cause new rules to pop up.

    Code
    .interactiveDropdown > .interactiveDropdownItemsContainer > .interactiveDropdownItems > li:not(.loading):not(.noItems):hover {
        background-color: rgba(204,204,204,0.55);
    }

    is the specific code.. thanks for pointing the push pin and its function out.... never knew that one!