Hey friends! Are you the kind of front-end developer who loves to tweak CSS until it's exactly how you like it? If so, read on. If not... you might want to skip this geeky post. :) I am sure the last thing the TNEW devs have time to work on is improving the TNEW Admin interface styles. But one small nitpick I have is that in the ever-growing lists of content fields and control options at all Site Data levels, my eyes tend to blur as I scroll down the list looking for a particular item. Yes, the "find in page" feature of your browser is an essential tool for this task, but sometimes I don't know the exact field name and am not sure how to look for it in the documentation.
For my own sanity, I have started using a Chrome extension called User CSS that allows me to override styles on any site I visit. I've done this for our TNEW Admin site, and it's been super helpful. Here is a before and after of a TNEW product editor screen (my custom styles are applied on the right side):
If anyone is interested, the custom styles I wrote to accomplish the minor changes above are as follows: form.tn-component-fields-form>fieldset { padding-top: 2em;}form.tn-component-fields-form>fieldset>.form-group { padding-top: 0.5em;}form.tn-component-fields-form>fieldset>.form-group>label.control-label { color: #333; font-size: 120%; font-style: normal;}form.tn-component-fields-form>fieldset>.form-group>div { margin-left: 1.5em; font-weight: bold; color: #2f8fff;}form.tn-component-fields-form>fieldset>.form-group>div>label { color: #666; font-style: italic; font-weight: normal;}
This is incredible. Thanks for sharing!
Thank you! :)