Trello Hack – Write your own CSS and deploy with Stylebot Chrome Extension

Screenshot 2016-03-27 16.37.46

Trello is a pretty awesome Tool, but I just could’t live with their Design. So I started looking around for a couple options to change that. Here is what i found:

You can layer your own CSS Code over the Trello page with a Chrome Browser Extension called „Stylebot“. It’s as simple as that. Go to the Chrome Webstore, install the extension and go to trello.com/yourdashboard (or any other site you want to style).

Click on the small „CSS“ icon next to the URL bar and the Stylebot Menu will open up. Choose the „Open Stylebot“ option and the editor will open.

You can automatically select CSS classes with the pointer tool, integrated in Stylebot. Switch over to advanced editing mode and write your custom code for that class here. You can also import my Ready-to-use CSS if you like it. Just copy the code below and paste it in the import section of the Stylebot options. Thats it, you are done!

{"trello.com":{"_enabled":true,"_rules":{"#header":{"background-color":"#000"},"a.header-btn.header-boards.js-boards-menu":{"background-color":"rgba(0, 0, 0, 0.2)"},"div.board-header.u-clearfix.js-board-header":{"background":"radial-gradient(circle, #858585, #5a5959, #222222)","background-color":"#000","box-shadow":"10px 10px grey"},"div.js-add-list.list-wrapper.mod-add":{"margin-top":"40px"},"div.js-add-list.list-wrapper.mod-add.is-idle":{"margin-top":"20px"},"div.js-list.list-wrapper":{"margin":"40px"},"div.list-card-details":{"border-color":"#ffffff","border-style":"solid","border-width":"5px","padding":"20px"},"div.list-card-members.js-list-card-members":{"border-radius":"150px"},"div.list-cards.u-fancy-scrollbar.u-clearfix.js-list-cards.js-sortable.ui-sortable":{"border-radius":"0px","margin-left":"0px"},"div.member.js-member-on-card-menu":{"border-radius":"150px"},"div.u-fancy-scrollbar.js-no-higher-edits.js-list-sortable.ui-sortable":{"background-color":"#000","background-image":"url(https://d3ui957tjb5bqd.cloudfront.net/images/screenshots/products/85/851/851025/poly-background-white-o.jpg?1450172776)","background-position":"top","margin-bottom":"-0px"},"div.window":{"border-color":"#fff","border-radius":"0px","border-style":"solid","border-width":"20px"},"img.board-header-btn-name-org-logo":{"display":"none"},"img.member-avatar":{"border-radius":"150px"},"input.header-search-input.js-search-input.js-disable-on-dialog":{"background-color":"rgba(0, 0, 0, 0.2)"},"input.header-search-input.js-search-input.js-disable-on-dialog.disabled-for-dialog":{"background-color":"rgba(0, 0, 0, 0.2)"},"span.header-btn-text.js-member-name":{"color":"#fff"},"span.header-logo-default":{"color":"#fff"},"span.header-search-icon.icon-lg.icon-search.light.js-search-icon.js-search-focus":{"color":"#000"},"span.placeholder.js-open-add-list":{"padding":"20px"},"div.list-header.js-list-header.non-empty.u-clearfix.editable":{"background-color":"#fff","border-bottom-style":"solid","border-color":"#be4747","border-radius":"0px","border-width":"7px","margin-bottom":"20px"},"div.pop-over.mod-notifications.is-shown div":{"background-color":"#fff"},"div.pop-over.mod-notifications.is-shown":{"left":"10px","width":"99%","top":"45px"},"span.icon-lg.icon-clock":{"color":"#C67171"},"div.phenom.mod-due-soon":{"padding":"20px"},"span.rel-date":{"background-color":"#C67171","font-size":"15px","padding":"10px","font-weight":"bold","color":"#fff","border-radius":"150px"},"div.is-due-now.badge":{"border-radius":"0px","padding":"10px"},"div.list.js-list-content":{"background-color":"rgba(0, 0, 0, 0.2)","border-radius":"0px","margin":"-20px","margin-bottom":"-40px","padding":"20px"},"div.is-due-soon.badge":{"border-radius":"0px","padding":"10px"},"div.is-due-past.badge":{"padding":"10px","font-weight":"bold","border-radius":"0px"}}}}

leopoldkoch
leopoldkoch
Working in Online Marketing (Programmatic Marketing), but I also love to code as well!
Recent Posts

Leave a Comment