How to Add CSS Styling to Any Website Without Plugins (Chrome only)

July 18, 2023

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.

  1. Right-Click on the page you’re looking to edit the CSS styling on.
  2. Choose the Sources panel.
  3. Choose the “Overrides tab”
    OverRides panel in Chrome
  4. Select a folder on your computer for the overrides to reside in and then grant Chrome access to this folder.
  5. 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.
  6. I added my styling to the top of their file for an easy way to edit in the future. Chrome Sources Panel
  7. 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; }
Before After









Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>