Board Thread:Support Requests - Getting Technical/@comment-43707041-20200225182724

Alright, so I have been trying for a week before asking here, but here I am now. So what I am trying to do is create custom themes for shows that we cover, which I did do successfully based upon a show perimeter in the infoboxes. I used JavaScript like this:

//One of the shows here if( $('aside').hasClass('pi-theme-show') ) { $(document.body).addClass('show-Article'); } and I have the following that is worth mentioning also. //Default (to prevent the other background from loading first) - and add this class once JavaScript is loaded to try to prevent lag. if( $('body').hasClass('mediawiki') ) { $(document.body).addClass('myWiki-Body'); }

Which works as expected. (or at least how it should). But there is a lag when adding CSS to those new body tags, because JavaScript adds them a little bit later.

to remove those lags (and this worked - with 1 big error) /*Hide body during loading so elements don't visibly get overwritten*/ .mediawiki:not(.myWiki-Body){ visibility:hidden; } That works - the new elements displayed instantly (with zero lag). However the issue I discovered - is that with JavaScript disabled - the entire site is hidden. Which is expected because if it never loads the new classes it won't ever show the body again - remaining hidden. So what I want is something equivalent to     .mediawiki{ visibility:visible !important; } Things to note: Any help would be appreciated - thanks 
 * Any JavaScript solution is invalid because it would just revert back to square 1
 * I have tried, which has no effect - and I have no idea how it works.
 * I have tried transition, animations, different methods, etc.
 * The only real solution is another JavaScript method (which will load instantly), or a CSS method - because, not to my knowledge, can the html be edited at all.
 * The JavaScript is loaded in
 * The CSS is a file from an  at the top of.