How to Add CSS Styling to Any Website Without Plugins (Chrome only)
Have you ever had a tool that you utilize regularly, but that has a couple of styling things that drive you crazy? Turns out it’s incredibly easy now in the Chrome browser to adjust these tiny annoyances.
Chrome Local Overrides
Chrome added a tool call “Local Overrides” that only takes a few steps to utilize.
- Right-Click on the page you’re looking to edit the CSS styling on.
- Choose the Sources panel.
- Choose the “Overrides tab”
- Select a folder on your computer for the overrides to reside in and then grant Chrome access to this folder.
- Then go to the PAGE, and find the file you want to add your styles to. Most will be under the assets folder, and I chose the “core” file.
- I added my styling to the top of their file for an easy way to edit in the future.
- Prosper!
My Edit: Trello Custom Fields
I utilize and actually really love the Trello project management system. Their calendar setup is my jam. However, with custom fields they always fill them with text. This makes it harder for me to see if I’ve added content or if it’s their placeholder.
As you can see from the screenshots below, the first version is difficult to see if content has been added. With my CSS change, you can quickly see exactly what is empty and what has my content.
The code I added is here:
.custom-field-detail-item input::placeholder { color:transparent !important; }
