4

I have a problem using Bootstrap and Wordpress admin panel.

Basically, I have some Bower components installed, and when I build my project, they all get concatenated together (for both CSS and JS).

The problem is: Bootstrap .hidden class uses !important

This is an issue for me as some elements on wordpress admin side look like this:

... class=".... hidden" style="display:none" ...>

They have both class .hidden and inline style.

Wordpress default .hidden class gets replaced by Bootstrap class, and so the inline style gets ignored as well as Bootsrap's!important prevent it to change from display: none to display: block.

Unfortunately, I need bootstrap on the backend for a lot of other stuff.

Is there any way I can replace that class? (i just want to get rid of !important keeping everything else the same)

Ideally, without changing bootstrap core css so that it's update-safe

ps: Will this be different on Bootstrap 4? I don't mind updating it if it solves this issue.

Thanks

Nick
  • 13,493
  • 8
  • 51
  • 98
  • 2
    they replace `.hidden` class from twitter-bootstrap-4 with `.hidden-xs-up` ([link](https://github.com/twbs/bootstrap/issues/19254)). – tmg Oct 31 '16 at 13:29
  • Thanks. I'll have a look into bootstrap 4 then – Nick Oct 31 '16 at 13:38
  • I tried using the new bootstrap4 alpha, but it's still there and still not working...any thoughts? – Nick Oct 31 '16 at 14:58

3 Answers3

1

At the end i decided to use http://getbootstrap.com/docs/3.3/customize/ and just create a theme that includes what i needed bootstrap for.

This way i can include a specific strip down version of bootstrap with only buttons and icons (which is what i needed on backend anyways) without having issues with class conflicts anymore.

Nick
  • 13,493
  • 8
  • 51
  • 98
0

You can use jQuery's $('the_CSS_Type_Selector').removeClass('TheClassToRemove'). and you can change attributes using .attr()

Ref- 1. Stack Answer 2. jQuery .removeClass

Community
  • 1
  • 1
Vishal Kumar Sahu
  • 1,232
  • 3
  • 15
  • 27
  • Thanks for the suggestion, but this means I have to search for eahc instance of that class in the whole admin section of wordpress. I was hoping for something a bit more generic to be honest – Nick Oct 31 '16 at 13:37
  • The inheritance and priority in CSS may also help you to come out. The more specific selector in CSS the more effective it is. Like `html {color: blue !important}` is overcome by `html.no-js{color: red !important}` – Vishal Kumar Sahu Oct 31 '16 at 18:49
  • If you could paste the situations (HTML code and the CSS on inspect element), then I can tell you specifically the way to select and overcome... – Vishal Kumar Sahu Oct 31 '16 at 18:50
  • Yes, I know that. Unfortunately I have various stuff to change the CSS, and using this method it's not an option as elements are variable and may even be a lot (also hundred s) – Nick Oct 31 '16 at 18:52
  • Try using `div.hidden{display: block !important}` as this is more specific than `.hidden` class – Vishal Kumar Sahu Oct 31 '16 at 18:52
  • And I would not suggest you to edit any core file. Better target with you code so that at any time you know the problem. – Vishal Kumar Sahu Oct 31 '16 at 19:01
  • Then try editing the core file but makke sure that they do not affect other things... – Vishal Kumar Sahu Oct 31 '16 at 19:43
0

You could delete the !important from the bootstrap css.

If you dont have the files loacally on your machine you have to download them though.

  • I use bower to install it, meaning that everytime I download bootstrap I need to apply the same change again and that's not really update-safe – Nick Oct 31 '16 at 13:38