XF 1.5 Floating notices styling.

[gavpeds]

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.

.floatingItem.customfloat
{
color: #000;
background: white;
border-color: #052E40;
}

 

[Chris D]

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]

Where would i put !important within this?

 

[Paul B]

For example, color: #000 !important;

 

[gavpeds]

Great thank you, that did the trick.

 

[Martok]

some higher specificity to those selectors to override the default styling.

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.

 

[Chris D]

Yes, that's a good example of using higher specificity - which is much better practice than using !important.

 

[Amaury]

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.

 

[Chris D]

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]

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:

@Amaury

Are you working from a already customized style? The reason I ask, is if you want to farther down the road have a different type of layout than what your parent (framework) has then you will be working backwards. I would definitely suggest starting with an unedited style to start your framework.

Also something I found useful for things such as this example. You make a property to control an area that doesn't already have a property you have problems of not all of the CSS being applied as it gets overwritten with the original CSS. What we have done to remedy this is to add a new selector to the html so we can target that and be more specific.

It just makes it easier to remember and always something you can reference in your CSS instead of searching through for specifics.

.XenBase .AvatarEditor .avatarOption {
    background-color: @primaryLightest;
    border-color: @primaryLight;
}

 

[Chris D]

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.