Skip to content

Instantly share code, notes, and snippets.

@chrisblakley
Last active September 23, 2018 16:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chrisblakley/6a61e730f6e8a95b84ca to your computer and use it in GitHub Desktop.
Save chrisblakley/6a61e730f6e8a95b84ca to your computer and use it in GitHub Desktop.
Custom CSS to enchance Trello.
/* Show the move cursor to demonstrate drag/drop scrolling on the interface. */
#board {
cursor: move;
}
#board .list {
cursor: default;
}
/* Change the background to a texture while maintaining board color. */
.body-board-view {
background-image: url(http://www.transparenttextures.com/patterns/black-linen.png);
background-size: initial;
}
/* Prevent cards with images from taking up too much vertical real estate. */
.list {
-moz-transition: all 0.25s ease 0s;
-o-transition: all 0.25s ease 0s;
-webkit-transition: all 0.25s ease 0s;
background: rgba(255,255,255,.4);
color: #fff;
transition: all 0.25s ease 0s;
width: 250px;
}
.list a.open-card-composer {
background: none;
color: #ffffff;
}
.list-card-cover {
-moz-transition: all 0.25s ease 0s;
-o-transition: all 0.25s ease 0s;
-webkit-transition: all 0.25s ease 0s;
/* height: 30px; */ /* Trello updated to have this class on all cards- not just ones with pictures. */
max-height: 150px;
transition: all 0.25s ease 0s;
}
.list-card.has-stickers .list-card-details {
margin-top: 0;
}
/* Expand to show the cover image of the card when hovering. */
/*
.list-card:hover .list-card-cover {
height: 150px ;
}
*/
.list-header {
border-radius: 3px 3px 0 0;
}
.list-header-num-cards {
color: rgba(255,255,255,0.6);
font-size: 12px;
}
/* Colorize the headers of each column. Add more as needed. */
.list:nth-of-type(1) .list-header {
background: rgb(100,200,210);
}
.list:nth-of-type(1):hover {
background: rgb(100,200,210);
}
.list:nth-of-type(2) .list-header {
background: rgb(160,110,60);
}
.list:nth-of-type(2):hover {
background: rgb(160,110,60);
}
.list:nth-of-type(3) .list-header {
background: rgb(140,70,160);
}
.list:nth-of-type(3):hover {
background: rgb(140,70,160);
}
.list:nth-of-type(4) .list-header {
background: rgb(170,70,70);
}
.list:nth-of-type(4):hover {
background: rgb(170,70,70);
}
.list:nth-of-type(5) .list-header {
background: rgb(200,200,90);
}
.list:nth-of-type(5):hover {
background: rgb(200,200,90);
}
.list:nth-of-type(6) .list-header {
background: rgb(100,160,110);
}
.list:nth-of-type(6):hover {
background: rgb(100,160,110);
}
/* This hides the sidebar button. */
.sidebar-hide-btn {
display: none;
}
/* This hides all stickers. */
.sticker, .stickers, .window-cover-stickers-only {
display: none;
}
.window-cover, .list-card-cover {
background-size: cover ;
background-position: top center;
}
/* These can be used to further demonstrate drag/drop. However, JS injection would nbe needed.
#board {
cursor: -webkit-grabbing;
}
#board {
cursor: -webkit-grab;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment