Make BB-Code Toggler more visible

Make BB-Code Toggler more visible

Overview Discussion
Hoffi

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...
Click to expand...

Read more about this resource...
 
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";
    }
}
 
djbaxter said:
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";
    }
}
Click to expand...
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.
 
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.
 
Hoffi said:
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.
Click to expand...

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.
 
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.
 
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.
 
You must log in or register to reply here.
Back
Top Bottom