Enhance Google Ads UI with custom CSS

Update [Oct 28, 2024]: Check out Google Ads Enhancer, my Chrome extension that allows you to add custom background and text colors to the Google Ads interface without any CSS manipulations.

Generally, I’m not a huge fan of any customizations. Whatever I’m using, I try to tweak as little as possible. It’s a part of my minimalist mindset: use anything the way it was initially designed. However, some things need to be improved so desperately that I just can’t stop myself.

I’ve already written a post on how you can improve YouTube Theater Mode with a few lines of CSS, and now I’m going to share how I leveled up my Google Ads interface.

What’s wrong with the default columns

Across all my accounts, I use a rather small set of columns, about 10. So it’s relatively comfortable to navigate across the account and check the most important numbers. However, even with such a lean column set, it is still easy to confuse Avg. CPC with Cost/Conv or CTR with Conv. Rate, especially when the column order occasionally resets.

My solution

I am familiar with CSS, and the Google Ads table HTML layout conveniently has all the necessary classes to do the trick. Compare before/after:

I’m using green color for money-related metrics, blue color for conversion-related ones, and red for the most important one. The percentage metrics are in italics for distinguishability.

Here is the code to make it all work:

:root {
    --red: #D93024;
    --green: #1F8E3E;
    --blue: #1A73E8;
    --orange: #F9AB00;
    --red-light: #fdf3f2;
    --green-light: #f1f8f3;
    --blue-light: #f1f7fe;
    --orange-light: #fffaf0;
    --yellow-light: #FEF7E0;
}

.particle-table-header {
    border-width: 1px !important;
    border-color: #5F6368 !important;
}

.particle-table-row.active-row:not(.particle-row-selected) {
    background: var(--yellow-light) !important;
}

/* grey columns - Clicks */
.particle-table-row:not(.active-row) *[essfield="stats.impressions"],
.particle-table-header *[essfield="stats.impressions"],
.particle-table-row:not(.active-row) *[essfield="stats.clicks"],
.particle-table-header *[essfield="stats.clicks"],
.particle-table-row:not(.active-row) *[essfield="stats.click_through_rate"],
.particle-table-header *[essfield="stats.click_through_rate"] {
    background-color: #F8F9FA !important;
}

/* green columns - Costs */
.particle-table-row:not(.active-row) *[essfield="stats.cost"],
.particle-table-header *[essfield="stats.cost"],
.particle-table-row:not(.active-row) *[essfield="stats.cost_per_click"],
.particle-table-header *[essfield="stats.cost_per_click"] {
    background-color: var(--green-light) !important;
}

*[essfield="stats.cost"],
*[essfield="stats.cost"] *,
*[essfield="stats.cost_per_click"],
*[essfield="stats.cost_per_click"] * {
    color: var(--green) !important;
}

/* blue columns - Conversions */
.particle-table-row:not(.active-row) *[essfield="stats.conversions"],
.particle-table-header *[essfield="stats.conversions"],
.particle-table-row:not(.active-row) *[essfield="stats.cost_per_conversion"],
.particle-table-header *[essfield="stats.cost_per_conversion"],
.particle-table-row:not(.active-row) *[essfield="stats.conversion_rate"],
.particle-table-header *[essfield="stats.conversion_rate"],
.particle-table-row:not(.active-row) *[essfield="stats.conversion_value"],
.particle-table-header *[essfield="stats.conversion_value"],
.particle-table-row:not(.active-row) *[essfield="stats.conversion_value_per_cost"],
.particle-table-header *[essfield="stats.conversion_value_per_cost"] {
    background-color: var(--blue-light) !important;
}

*[essfield="stats.conversions"],
*[essfield="stats.conversions"] *,
*[essfield="stats.conversion_rate"],
*[essfield="stats.conversion_rate"] * {
    color: var(--blue) !important;
}

*[essfield="stats.cost_per_conversion"],
*[essfield="stats.cost_per_conversion"] *,
*[essfield="stats.conversion_value_per_cost"],
*[essfield="stats.conversion_value_per_cost"] *{
    color: var(--red) !important;
}

*[essfield="stats.conversion_value"],
*[essfield="stats.conversion_value"] *{
    color: var(--green) !important;
}

/* grey columns - SIS */
.particle-table-row:not(.active-row) *[essfield*="impression_share"],
.particle-table-header *[essfield*="impression_share"] {
    background-color: #F8F9FA !important;
}

*[essfield="stats.click_through_rate"] .ess-cell-ellipsis,
*[essfield="stats.conversion_rate"] .ess-cell-ellipsis,
*[essfield*="impression_share"] .ess-cell-ellipsis {
    font-style: italic;
}

*[essfield="stats.conversions"], *[essfield="stats.conversions"] *,
*[essfield="stats.cost"], *[essfield="stats.cost"] *,
*[essfield="stats.cost_per_conversion"], *[essfield="stats.cost_per_conversion"] * {
    font-weight: 500;
}

/* col width */
*[essfield="name"] {
    /*width: 300px !important;*/
}

/* Hide recent accounts */
awsm-mcc-recent-customers {
    display: none !important;
}

/* Hide redundant titles */
awsm-customer-tree div.section.tree div.border-top,
awsm-customer-item.root-customer-item {
    display: none !important;
}

If you have a grasp of CSS, it should be fairly easy for you to get the idea and tweak the code to your needs. In order to add custom CSS to your browser you can check out:

• Cascadea for Safari (available on the Mac App Store)
• Stylish for Chromium-based browsers

I personally use Arc, which have custom styling as a built-in feature. If you do too, here’s a link to my boost: https://arc.net/boost/5EE689CA-A46B-4084-8713-23479C9960CC.

And as I was writing this post, I realized that my style also hides recent accounts in the MCC account selector. Check before: