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
Hey Chris & team, I'm just checking in on this issue after several weeks of running v7 on our production site, to follow up about the custom CSS issue. While putting our custom CSS link at the bottom of our template has been a good enough workaround, it isn't perfect. For one thing, often on almost every page load there is a moment where the default styles are visible before the custom styles take over. Since you said CSS should be render-blocking (and I have also read this in places like W3schools), I thought this would not happen. But that does not appear to be the case with our site, and I am wondering why. Or maybe I have misunderstood. But we can clearly see the default TNEW styles as the page loads (the blue background is very clear, as we don't have blue in our branding colors for the purchase path). In fact, once in a while, the custom CSS doesn't load at all, and the page appears without any of our branding, although I have a hard time reliably recreating that issue as it is very intermittent. Any idea what we can do to improve this? Is there any plan to change the way custom CSS is processed by TNEW v7?
Here is our stylesheet link, which is just a few lines from the bottom of our TNEW template:
<link rel="stylesheet" type="text/css" href="">www.pcs.org/.../TNEW7.css
EDIT: Well, I can't figure out how to paste code here without it getting reformatted, but hopefully you get the idea.
Hi Christian Bisgard, thanks for following up on this. You are correct, moving your stylesheet to the bottom of the body will load it after the page has rendered leaving a period of time where the default styles are shown. I'm glad this has worked for the short term but I'd like to follow up with the team on a longer term solution. Just throwing out ideas here, but what would be most helpful to you? Would it be helpful if there was a way, say through an attribute, to tell TNEW what style sheet(s) to load after it does its stuff? Or, perhaps, would you want to see a text area in the Admin where you plug in overrides like many popular CMSs? Again, just brainstorming on my own here but would love to hear what ideas you or anyone else have.
Hi Josh TerAvest! Thanks for your reply. I think for my own preference, I would still like to be able to edit my own custom style sheet, but just be able to have TNEW load or compile it at run time with the other dynamic TNEW styles, so that it loads last among styles but before full page render. Do I sound like I know what I'm talking about? I only half understand what I'm saying, but basically if there's any way to still specify our self-hosted custom style sheet and have it load last but not after the page has already appeared with default styles, that would be the goal.The concept of going through the Admin tool to plug in overrides is not a bad one, I just tend to be more hands-on with CSS and like to control it to a fine granular level wherever possible. There are probably other orgs who would love the option to just update colors and fonts and such with a text area in the Admin tool. Or if that were a place to put a whole lot of style overrides with pretty much any selectors and styles being fair game, then I guess it would serve the same purpose as a separate self-hosted style sheet.So... I guess either one! haha.I will just say that since posting my update to this thread earlier today, I have not seen page loads that revealed the default styles. So maybe this is less of a problem most of the time than I think it is. However, I also read about and am employing a little workaround that I like. Since our TNEW template loads our marketing site's main CSS file at the top, I am now using a declaration in that style sheet of "display:none" on a DIV that wraps around the TNEW content tag, and then a little javascript at the bottom of the template to add an inline style of "display:inline" on that same DIV. So it just hides the TNEW content until the DOM is loaded. That might be unnecessary, or it might be working. I can't really tell, but either way, the page loads look better at the moment so I'm happy.
Thanks, Christian Bisgard. This is really helpful information which I'll bring back to the team. Thanks again!