Make BB-Code Toggler more visible

Make BB-Code Toggler more visible

Hoffi

Well-known member
Hoffi submitted a new resource:

Make BB-Code Toggler more visible - With this small change you can giver your BB-Code Toggler Buttom more attention.

So, you andyour members are struggeling with the BB-Code bar. Sometimes you are not sure if it's on or not?

Then you need to read more...

It wasfor me alway a mess. The Button is even on large screens not visible per default, and to be honest, also the brackets Icon is not clear to everyone.

As the first step you need to make the button alwys visible. Thats the easy part.

Just go to yourdomain.tld /admin.php?button-manager/edit&type=toolbarButtons

Open the menu on the right and...

Read more about this resource...
 

djbaxter

Well-known member
Your version worked on the Xenforo default style but not on a custom style (PixelExit).

@Russ suggested adding !important to the CSS lines and that worked.

So using your example, change it to:

CSS:
.fr-toolbar .fr-command.fr-btn[data-cmd="xfBbCode"]
{
    color: @xf-successColor !important;
    &.fr-active {
        color: @xf-errorColor !important;
    }
    i:before {
        content: "\f8e7";
    }
}
 

Hoffi

Well-known member
Your version worked on the Xenforo default style but not on a custom style (PixelExit).

@Russ suggested adding !important to the CSS lines and that worked.

So using your example, change it to:

CSS:
.fr-toolbar .fr-command.fr-btn[data-cmd="xfBbCode"]
{
    color: @xf-successColor !important;
    &.fr-active {
        color: @xf-errorColor !important;
    }
    i:before {
        content: "\f8e7";
    }
}
I never would recommend adding an !important. Better to find a more exact selector for the CSS. I don't know the style, but if I can see it somewhere in action I can find a more exact selector that it works there, too.
 

djbaxter

Well-known member
It's a Pixelexit style and the !important part was recommended by @Russ since the native style uses some of the same CSS elements. Thus the !important part was required to override other CSS references in the style.
 

Russ

Well-known member
I never would recommend adding an !important. Better to find a more exact selector for the CSS. I don't know the style, but if I can see it somewhere in action I can find a more exact selector that it works there, too.

I disagree, there are instances it's totally fine. In fact, search XF templates, it's used often in specific cases.

On this specific issue, a client contacted me to see why it wasn't working. A simple way of debugging it is to use the important tag rather than guessing a higher selector of the CSS.

Sure, you could do

Code:
.fr-box .fr-toolbar .fr-command.fr-btn[data-cmd="xfBbCode"]
{
    color: @xf-successColor;
    &.fr-active {
        color: @xf-errorColor;
    }
    i:before {
        content: "\f8e7";
    }
}

But in the end if this is for a single forum edit to fix colors on a specific style, I don't see the issue with an important.
 

Hoffi

Well-known member
The main issue for preventing !important is maintenance in a later state. You will search your ass off, why the new addition is not working. Sepcial if someone else is doing this. At the end you will be very angry that someone used this term, especially when it is not neccesary.
Sure, its a quick solution for the moment. But a bad solution for long term.

But, hey. Learn it on your own and don't listen to an old man.
 

djbaxter

Well-known member
It's working fine. And I've used it before and it has not interfered with any addons or upgrades to the PixelExit Flat Awesome + theme.

I would agree that if you have to have !important splashed all over your CSS files you may be looking for trouble down the line but used judiciously it is effective.
 
Top