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?
We just finished templating our TNEW v7 site (not live yet as of typing this) and I found this to be a problem with a simple solution. In the injected header we wrap everything in something like <div id="tnew-v7"> and close it in the footer. In the CSS file, everything has #tnew-v7 as a parent ID which is more specific than that scss file. This is easy enough to accomplish if you build your style sheet in scss with a compiler and you wrap the whole document in #tnew-v7 { [all styles go here] }. I hope you've already solved this problem, but maybe this will help someone who gets lost in the forums.
Hi Chaz Stuart. Wow, this is a perfect, elegant solution. I can't believe I didn't think of it. I have implemented this on our site, and it works like a charm. Thank you!