1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Floating notices styling.

Discussion in 'Styling and Customization Questions' started by gavpeds, Aug 28, 2015.

  1. gavpeds

    gavpeds Active Member

    How do i style these? i have tried adding this to my extra.css and adding "floatingItem customfloat" to the custom css class name part of the notice but nothing changes.

    color: #000;
    background: white;
    border-color: #052E40;
    otto likes this.
  2. Chris D

    Chris D XenForo Developer Staff Member

    The custom css class should just be "customfloat", "floatingItem" is added automatically.

    Either way, those CSS selectors are correct, however you would likely need to use !important or have some higher specificity to those selectors to override the default styling.
    gavpeds likes this.
  3. gavpeds

    gavpeds Active Member

    Where would i put !important within this?
  4. Brogan

    Brogan XenForo Moderator Staff Member

    For example, color: #000 !important;
    otto, Chris D and gavpeds like this.
  5. gavpeds

    gavpeds Active Member

    Great thank you, that did the trick.
  6. Martok

    Martok Well-Known Member

    In my CSS I'm using

    .FloatingContainer .floatingItem.mycustomclass

    Is this the sort of thing that you mean by higher specificity? I'm not using !important anywhere and they all seem to work.
    otto likes this.
  7. Chris D

    Chris D XenForo Developer Staff Member

    Yes, that's a good example of using higher specificity - which is much better practice than using !important.
    otto and Martok like this.
  8. Amaury

    Amaury Well-Known Member

    This is what I used, which I guess is essentially the same as the above:

    /* Notices */
    .KHFlare .FloatingContainer .floatingItem.primary {
        color: @secondaryDarker;
        background-color: @secondaryLighter;
        border-color: @secondaryLighter;
    /* Notices */
    Replace .KHFlare with your custom class and style it to suit.

    otto likes this.
  9. Chris D

    Chris D XenForo Developer Staff Member

    Not sure where the KHFlare class would be coming from in this case, unless it's something you've added yourselves.

    Martok's example is the one that is likely to work in most cases.
    Amaury likes this.
  10. Amaury

    Amaury Well-Known Member

    It's a custom class I added to PAGE_CONTAINER so I don't have to worry about looking for specificity when CSS doesn't work without !important. While body would work as well, .KHFlare just makes be able to be identified easier.

    Thanks to Steve for that:

  11. Chris D

    Chris D XenForo Developer Staff Member

    That's fair enough and a good way to do things.

    That said - most people won't have this (or it will at least vary wildly from style to style) so Martok's post should be plenty sufficient.
    otto, Martok and Amaury like this.

Share This Page