Title: CSS loading order Last modified: August 24, 2018 --- # CSS loading order * [VM06](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/) * Hello, I would like to make some changes on admin pages like reordering some block containers, adding an overflow scroll on editor block…. The problem is that the admin files are located in wp-includes folder, so those files are loaded lastly on the site. So every changes that are made are not considered, as they are loaded before. Even if I set a max priority on add action, they are loaded before. Do you have any idea on how we can makes some changes on that admin area? Thanks. Viewing 15 replies - 1 through 15 (of 15 total) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10621187) * For now can you use CSS specificity to override things? * Thread Starter [VM06](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10621221) * Thanks for your answer [@anevins](https://wordpress.org/support/users/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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10621234) * 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](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10621295) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10621319) * Is this something you can override with: * ``` html #tinymce, html body.wp-autoresize { height: 900px !important; } ``` - This reply was modified 7 years, 7 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). - This reply was modified 7 years, 7 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). * Thread Starter [VM06](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10621949) * 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](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10628894) * Hello [@anevins](https://wordpress.org/support/users/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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10629033) * Ah try a plugin for that like : [https://wordpress.org/plugins/admin-css-mu/](https://wordpress.org/plugins/admin-css-mu/) * Thread Starter [VM06](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10631287) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10631850) * 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](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10631960) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10632155) * 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](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10632372) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10632407) * 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](https://wordpress.org/support/users/vm06/) * (@vm06) * [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10632469) * It does not even appear. Nothing is showing up in the inspector Viewing 15 replies - 1 through 15 (of 15 total) The topic ‘CSS loading order’ is closed to new replies. * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 15 replies * 2 participants * Last reply from: [VM06](https://wordpress.org/support/users/vm06/) * Last activity: [7 years, 7 months ago](https://wordpress.org/support/topic/css-loading-order/#post-10632469) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics