3 Users — 5 GitLab Board Styles
I asked 3 users of GitLab Board Better how do they use the Custom Style CSS feature. I would like to share with you what they said so you maybe it will be useful for you too…
Focus Mode
“I have one tab which is always open with the GitLab Board” he said, “I don’t want to see the header or the sidebar by default”. There is such option in GitLab Board, but one of the users said that he made it by default. Nice!
.page-with-contextual-sidebar {
padding-left: 0px;
}
.nav-sidebar {
display: none;
}
.content-wrapper {
margin-top: 0px;
}
body.ui-indigo .navbar-gitlab {
display: none;
}
.breadcrumbs {
display: none;
}
List Width
If you want to see all the lists in one screen-view without the need of scrolling to the side, you can simply add the following code. You may need to change the percentage, based on the amount of lists you have.
.board {
width: 25%;
}
Bigger Avatar
Do you also think the Avatars are too small? Or maybe too big? You can easily customize them!
.user-avatar-link span img
{
width: 40px !important;
height: 40px !important;
}
Add Issue Button Color
One of the users I asked is a designer. He said that it doesn’t make sense that “Add issues” button is green but the Plus icon in every list is not. So he changed it:
.issue-count-badge-add-button
{
background-color: #2ea22e;
color: #fff;
}.issue-count-badge-add-button:hover
{
background-color: #39c139;
color: #fff;
}
No Tag Colors
That was my favorite. One of the users said “We use many tags but the colors disturbs me, so I removed them”.
GitLab allows you to pick your own colors for each tag, but it will affect everybody. If you don’t want to see all the colors, you have such option:
.board-card-title a {
color: #393982;
}
.board-card .badge{
background-color: #fafafa !important;
color: #707475!important;
border: 1px solid #e0e0e0!important;
border-radius: 5px;
}
If you have more ideas or you would like to share your custom styles, feel free to share it in the comments :)
The End
- Get GitLab Board Better extension from the Chrome Web Store
- Follow/talk with me on Twitter
- Be my friend on Linkedin
- Or just give me here some claps…
