• 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.

gavpeds

Active member
#1
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

XenForo developer
Staff member
#2
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.
 

Martok

Well-known member
#6
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.
 

Amaury

Well-known member
#8
This is what I used, which I guess is essentially the same as the above:

Code:
/* 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.

upload_2015-8-28_8-1-8.png
 

Chris D

XenForo developer
Staff member
#9
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

Well-known member
#10
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.


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