I'm an experienced front-end developer and am well-acquainted with CSS. I skinned our TNEW v5 and v6 sites, and given the challenges of those versions and all their unfortunate inline styles, I've been so excited to dig into styling/skinning for TNEW v7.
Well, our Test site is now upgraded to TNEW v7, and I'm finding it maddening. I am certain I'm missing something in my setup, because I know that v7 has been designed to be easier and more flexible to style than previous versions. I built a Bootstrap template, and generally the site lays out pretty well as-is. Mostly the only things I need to change are colors, font sizes, nothing major. But there are a LOT of places where I need to change colors. Backgrounds, links, borders, active/focus and inactive/disabled, etc. Tons of color areas that need to match our brand. Should be no problem, I've got Chrome developer tools and I know how to write CSS rules. We host our own template, so I can just plug my TNEW styles in the template stylesheet after all my marketing site's styles. easy peasy!Except not. Although TNEW's main CSS file is loaded before my template's CSS, there are SCSS files being compiled AFTER my template's styles. Therefore those styles take precedence, being loaded last. The only way I can force my brand colors, fonts, and other styles to display is by using the "!important" trick, which I consider to be a hack and not good practice. I am certain this was not the intent with TNEW v7. For one thing, it's extra work, and for another, "!important" often causes the "cascade" of cascading styles to break, overriding more than just the intended element. It's like using a sledge hammer where a surgically precision instrument is required.
I've looked at TNEW v7 example sites and seen beautiful custom styles applied, and not a "!important" in sight. So what am I missing? How do I get my template stylesheet to be the last stylesheet to load?
Hi Christian Bisgard - Thanks for the post and calling out what you are seeing - you are correct that having to overlay "!important" directives is contrary to what we are trying to achieve with v7 - We are looking into what you've described below and will reply shortly when we have more info. Can you point us to where you have your TNEW template hosted so that we can have a look? Also, is the most current template applied to your Test site, and can we pull it up and look at it with v7 enabled in preview mode?
Many thanks,
Chris Szalaj
CC Nara Zitner
Hi Chris! Thanks so much for responding. I should tell you before you duplicate any work, that I do have an open ticket for our TNEW v7 upgrade that includes this question among other things (ticket #136913), but it hasn't been answered yet. I also posted here because I thought there might be someone on these forums with a quick answer, as well as because I wanted to share with the community. But if you are willing to take a quick look...
Our TNEW template designed for v7 is at https://www.pcs.org/tnew-test
And our Test site, which has technically already been upgraded to v7 (and also has preview mode enabled) is at https://test-na-prcs.tn.services/
At the moment I have removed the "!important" directives from my CSS, just to see which styles work without it and which ones don't. For the most part I'm having trouble applying our brand colors to backgrounds, links/buttons, borders, etc., but there are other aesthetic changes I would like to implement as well, once we can figure out how I should be doing it differently.
Thank you!
Christian Bisgard While we look into it, one thing that should resolve the issue quickly would be loading your stylesheet at the bottom of your template rather than in the <head> - this has no significant performance impact and would force your stylesheet to load last, after any other stylesheets. Its a little different than what's typical but should get you moving for now without the !Important directives.
CSS docs are render-blocking, so the the page load should be unaffected by the change, other than your stylesheet loading last.
Let me know how that works - Chris
Hey Chris Szalaj, moving my CSS link to the bottom worked, and I am able to continue skinning with this workaround. Thanks so much! Why didn't I think of that?