Skip to content

Instantly share code, notes, and snippets.

@alexknowshtml
Last active March 30, 2022 15:36
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save alexknowshtml/2a2fbd68f38767b634113ed847c12e03 to your computer and use it in GitHub Desktop.
Save alexknowshtml/2a2fbd68f38767b634113ed847c12e03 to your computer and use it in GitHub Desktop.
/* 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;
}
@dceddia
Copy link

dceddia commented Mar 20, 2019

Here's an alternative-alternative style for the sequences. It's restyled to look like a table, with columns for the stats.

/* Alternative to the sequence item styles. */
/* This version displays the list of sequences as a list, with stats, and a hover background for the rows. */

.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;
}
.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;
}

@edavis10
Copy link

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).

@alexknowshtml
Copy link
Author

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.

@edavis10
Copy link

Looks like they now include a table-based Sequences too now. I missed the UI for it, icons by the red New Sequence button.
Selection-51744ec6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment