Last active
March 30, 2022 15:36
-
-
Save alexknowshtml/2a2fbd68f38767b634113ed847c12e03 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* After switching stackingthebricks.com to ConvertKit in the last few months, I found a handful of things */ | |
/* that seemed to slow me down/force additional scrolling, so I tried hiding them from the UI with these UserStyles */ | |
/* Obviously, these are without warrantee and could potentially break, so don't blame me if they do. */ | |
/* Also, I am not a designer so these may not make the UI better in _your_ eyes, but they make it better for me. 😅 */ | |
/* Hide the dashboard graph (not useful enough to be there taking up 3/4 of the screen real estate every time I log in) */ | |
.account-graph {display:none;} | |
.subscribers-index div[data-component='ReportsContainer'] { display:none;} | |
/* Widen the sidebar on the dashboard/subscriber page only to keep long tags + subscriber counts from wrapping */ | |
.subscribers-index .sidebar--index { width:50%} | |
/* Hide the visual automation workflow previews. They are pretty but in terms of info density, */ | |
/* they take up a ton of screen real estate and make it slow to find the automation I want to view. */ | |
.workflow-card__content {display:none;} | |
/* Tweak to the sequence "cards" to remove the stats and increase the info density on this screen. */ | |
/* Stat styling by Dave Ceddia (https://daveceddia.com). */ | |
.courses-index .content-wrap { | |
display:block; | |
margin-top:75px; | |
} | |
.courses-index .content-wrap .sequence-item { | |
flex-direction: row; | |
width:100%; | |
border:none; | |
box-shadow:none; | |
padding: 5px; | |
margin:0; | |
background:none; | |
} | |
.courses-index .sequence-item__title::before { | |
display:none !important; | |
} | |
.courses-index .content-wrap .sequence-item span { | |
font-size:16px; | |
} | |
.courses-index .content-wrap .sequence-item strong { | |
font-size: 16px; | |
} | |
/* Hide the stats labels... */ | |
.courses-index .content-wrap .sequence-item strong + span { | |
display: none !important; | |
} | |
/* ... but show the first set of labels as headings */ | |
.courses-index .content-wrap .sequence-item:first-child strong + span { | |
display: block !important; | |
} | |
/* ... and then hide the Unsubscribes column because they aren't actually */ | |
/* unsubscribes, just people who completed that sequence, and that's not really useful data */ | |
/* this bit contributed by Taylor Bell (https://github.com/tayiorbeii) */ | |
.sequence-item__stats > span.sequence-item__stat--conversions:last-child { display: none } | |
.courses-index .content-wrap .sequence-item .sequence-item__title { | |
padding-left: 5px; | |
flex-basis: 350px; | |
display: flex; | |
vertical-align: bottom; | |
align-items: flex-end; | |
} | |
.courses-index .content-wrap .sequence-item .subtitle {display:none !important;} | |
.courses-index .content-wrap .sequence-item span.sequence-item__stats { | |
float:right; | |
padding:0; | |
flex: 1; | |
} | |
.sequence-item__stats > .sequence-item__stat { | |
display: flex; | |
flex-direction: column; | |
flex: 1; | |
} | |
.sequence-item:first-child .sequence-item__stats > .sequence-item__stat span { | |
order: -1; | |
flex-basis: 3em; | |
color: #484848; | |
font-size: 14px; | |
font-weight: 600; | |
} | |
.sequence-item .sequence-item__space { | |
display: none; | |
} | |
.sequence-item__stats { | |
justify-content: flex-start; | |
border-top: none; | |
} | |
.sequence-item-wrap { | |
max-width: 850px; | |
margin: 0 auto; | |
} | |
.courses-index .content-wrap a.sequence-item:hover { | |
background: #dbe5f1; | |
transition: none; | |
} |
I had an empty div with an inline min-height
around the account-graph which took up space:
.subscribers-index div[data-component='ReportsContainer'] { display:none;}
If you want to keep the sidebar size on other pages (e.g. Broadcasts) you can keep the default sizes except for the subscribers page with:
.subscribers-index .sidebar--index { width:50%}
The Sequences page has been renamed so there's no .courses-*
anymore and no specific IDs/classes I can see so those styles won't apply anymore (2020-08).
Thanks Eric - I added your style updates to my gist and will make some tweaks to the article since ConvertKit has made some UI improvements that make my sequence styles a lot less useful.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's an alternative-alternative style for the sequences. It's restyled to look like a table, with columns for the stats.