Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
For now can you use CSS specificity to override things?
Thread Starter
VM06
(@vm06)
Thanks for your answer @anevins, when I add CSS rules they are not considered as the CSS file located in wp-inludes/JS/tinymce/skins/wordpress/wp-content.css is loaded at last, on footer.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I think I understand. Can you provide an example of the CSS you’re trying to use for one element, compared to the CSS that is actually being taken from wp-content.css ?
Thread Starter
VM06
(@vm06)
Here is an example, the selector being #tinymce on admin page (editor container) :
`#tinymce,
body.wp-autoresize {
overflow-y: scroll !important;
height: 700px !important;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Is this something you can override with:
html #tinymce,
html body.wp-autoresize {
height: 900px !important;
}
Thread Starter
VM06
(@vm06)
Thanks for your answer, I will try it as I don’t have access to the website now and will let you know if it works.
Thanks again 🙂 .
Thread Starter
VM06
(@vm06)
Hello @anevins,
So I tried to raise the weight of selectors (which is a good idea) but unfortunately, it does not work. It seems that the instructions are not considered as, when I inspect the code, the instructions I wrote (in a custom CSS and even in custom CSS admin) do not appear.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thread Starter
VM06
(@vm06)
Thanks for the advise, I downloaded it but unfortunately, it does not work.
It seems that it is not possible to override default rules.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I would love to get to the bottom of this too. So, if you add a rule like:
body {
outline: 10px solid red;
}
Into the admin plugin’s CSS, does that work? If it doesn’t then there’s something fishy going on.
Thread Starter
VM06
(@vm06)
Yes, it works with the plugin. I also made some changes in my admin custom CSS and it worked too. But if I want to change the overflow in admin pages (selector : “#tinymce” or “body.wp-autoresize”), it does not work and I don’t know why. I tried to add some classes but it not enough.
Perhaps, the files added by default in wp-includes cannot be overridden.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thank you for explaining, could you also provide an example of the CSS you tried to use, like:
body.wp-autoresize {
height: 1px;
}
Thread Starter
VM06
(@vm06)
So, here is the code I would like to add :
#content_ifr {
height: 700px !important;
overflow-y: scroll !important;
}
html #tinymce .wp-autoresize {
overflow-y: scroll !important;
height: 700px !important;
}
It works with “#content_ifr” but not with html #tinymce .wp-autoresize. The default CSS content included in “wp-inludes/JS/tinymce/skins/wordpress/wp-content.css” which adds the following code overrides all other code:
body.wp-autoresize {
overflow: visible !important;
padding-top: 1px !important;
padding-bottom: 1px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Does this work for the wp-autoresize:
html #tinymce .wp-autoresize {
overflow: auto !important;
}
html #tinymce .wp-autoresize {
overflow-y: scroll !important;
height: 700px !important;
}
By “does it work”, I mean, does it show up properly in your browser’s developer toolbar where you’re looking at CSS? Or does the “overflow-y: scroll !important” show as crossed out?
Thread Starter
VM06
(@vm06)
It does not even appear. Nothing is showing up in the inspector
