mirror of
https://github.com/wekan/wekan.git
synced 2025-09-22 01:50:48 +02:00
Reorganized Docs. In Progress.
This commit is contained in:
Lauri Ojansivu
parent
1961e22cbd
commit
ce89ff4833
202 changed files with 0 additions and 0 deletions
217
docs/Theme/Custom-CSS-themes.md
Normal file
217
docs/Theme/Custom-CSS-themes.md
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
Here is how to build wekan code and add your new theme with code changes and send as pull request:
|
||||
https://github.com/wekan/wekan/wiki/Emoji#how-you-could-add-another-plugin
|
||||
|
||||
Here is how some have sent previous themes to Wekan, what code changes they made:
|
||||
https://github.com/wekan/wekan/pulls?q=is%3Apr+is%3Aclosed+theme
|
||||
|
||||
After you have sent new theme as pull request, you see it as open pull request:
|
||||
https://github.com/wekan/wekan/pulls?q=is%3Apr+theme+is%3Aopen
|
||||
|
||||
And when I have merged it to Wekan, that theme will be in next Wekan release, listed at ChangeLog:
|
||||
https://github.com/wekan/wekan/blob/main/CHANGELOG.md
|
||||
|
||||
At Wekan Snap page you see with webpage reload, when new version has been released:
|
||||
https://snapcraft.io/wekan
|
||||
|
||||
Wekan Snap version gets updates automatically soon after new Wekan version has been released, or you can update manually immediately:
|
||||
https://github.com/wekan/wekan-snap/wiki/Automatic-update-schedule
|
||||
|
||||
***
|
||||
|
||||
Also see: [Dark Mode](Dark-Mode)
|
||||
|
||||
All Wekan themes are directly integrated to Wekan. You can add pull request to master branch to add custom theme, you can see from [from this commit](https://github.com/wekan/wekan/commit/34b2168d0dda253dedabbee47031873efa4ae446) required new color/theme name and changes to these files 3 files listed below. In that commit is also changes to other files, you don't need to change those files.
|
||||
- `wekan/client/components/boards/boardColors.styl`
|
||||
- `wekan/models/boards.js`
|
||||
- `wekan/server/migrations.js`
|
||||
|
||||
Alternatives for sending new theme as pull request:
|
||||
- If you would like to have some new theme, please add screenshot mockup to [new Wekan issue](https://github.com/wekan/wekan/issues).
|
||||
- If possible, you can also try to create those CSS changes with [Stylish browser extension](https://userstyles.org/) and add those to new issue too.
|
||||
|
||||
There are currently board color modes/themes, and these full themes:
|
||||
- Dark: modified from below by @lonix1 and more changes by xet7
|
||||
- Relax: Light green background that helps Wekan users to relax in company of Wekan contributor that sent theme CSS.
|
||||
|
||||
Upcoming full themes that will be added by xet7:
|
||||
- Corteza, that will be mostly-white theme, although different than example of white theme below
|
||||
- Octopus, that will have different colors and some Wekan features hidden
|
||||
|
||||
|
||||
|
||||
## Dark theme
|
||||
|
||||
[by @lonix1](https://github.com/wekan/wekan/issues/1149), could look a little like this screenshot mockup:
|
||||
|
||||
<!--
|
||||
|
||||
-->
|
||||
|
||||
lonix1 created some css overrides with Stylish. It's not complete but I'm happy with it. I work in swimlanes mode, so that is what I changed (not list mode or calendar mode).
|
||||
|
||||
Colors:
|
||||
- adds dark mode, I used vscode as a reference
|
||||
|
||||
Other:
|
||||
- hides various useless icons and things
|
||||
- hides "add card", "add swimlane", "add list" links, until hovered (I find these very "noisy")
|
||||
|
||||
```css
|
||||
/* HIDE PERMANENTLY -------------------------------------------------- */
|
||||
|
||||
/* various */
|
||||
.wekan-logo,
|
||||
.close-card-details { display:none; }
|
||||
|
||||
/* header text */
|
||||
#header-quick-access >ul >li:nth-child(1) >a { font-size:0; }
|
||||
#header-quick-access >ul >li:nth-child(1) >a >.fa-home{ font-size:12px; margin:0; }
|
||||
|
||||
/* popup menu titles (boards, swimlanes, lists, cards, labels) */
|
||||
.pop-over >.header { display:none; }
|
||||
|
||||
/* OPTIONAL
|
||||
card fields: received, start, due, end, members, requested, assigned
|
||||
I rarely use these... uncomment if you want to hide them */
|
||||
/*
|
||||
.card-details-item.card-details-item-received,
|
||||
.card-details-item.card-details-item-start,
|
||||
.card-details-item.card-details-item-due,
|
||||
.card-details-item.card-details-item-end,
|
||||
.card-details-item.card-details-item-members,
|
||||
.card-details-item.card-details-item-name { display:none; }
|
||||
.card-details-items:empty { display:none; }
|
||||
*/
|
||||
|
||||
/* HIDE UNTIL HOVER -------------------------------------------------- */
|
||||
|
||||
/* header "+" button */
|
||||
#header-quick-access .fa-plus { display:none; }
|
||||
#header-quick-access:hover .fa-plus { display:inherit; }
|
||||
|
||||
/* "add card" links (use visibility rather than display so items don't jump) */
|
||||
.open-minicard-composer { visibility:hidden; }
|
||||
.list.js-list:hover .open-minicard-composer { visibility:visible; }
|
||||
.list-header-menu { visibility:hidden; }
|
||||
.list.js-list:hover .list-header-menu { visibility:visible; }
|
||||
|
||||
/* "add list/swimlane" links (use visibility rather than display so items don't jump) */
|
||||
.list.js-list-composer >.list-header { visibility:hidden; }
|
||||
.list.js-list-composer:hover >.list-header { visibility:visible; }
|
||||
|
||||
/* DARK MODE -------------------------------------------------- */
|
||||
|
||||
/* headers */
|
||||
#header-quick-access, #header { background-color:rgba(0,0,0,.75) !important; }
|
||||
#header .board-header-btn:hover { background-color:rgba(255,255,255,0.3) !important; }
|
||||
|
||||
/* backgrounds: swimlanes, lists */
|
||||
.swimlane { background-color:rgba(0,0,0,1); }
|
||||
.swimlane >.swimlane-header-wrap,
|
||||
.swimlane >.list.js-list,
|
||||
.swimlane >.list-composer.js-list-composer { background-color:rgba(0,0,0,.9); }
|
||||
|
||||
/* foregrounds: swimlanes, lists */
|
||||
.list >.list-header, .swimlane-header { color:rgba(255,255,255,.7); }
|
||||
|
||||
/* minicards */
|
||||
.minicard { background-color:rgba(255,255,255,.4); }
|
||||
.minicard-wrapper.is-selected .minicard,
|
||||
.minicard:hover,
|
||||
.minicard-composer.js-composer,
|
||||
.open-minicard-composer:hover { background-color:rgba(255,255,255,.8) !important; color:#000; }
|
||||
.minicard, .minicard .badge { color:#fff; }
|
||||
.minicard:hover .badge, .minicard-wrapper.is-selected .badge { color:#000; }
|
||||
|
||||
/* cards */
|
||||
.card-details,
|
||||
.card-details .card-details-header { background-color:#ccc; }
|
||||
|
||||
/* sidebar */
|
||||
.sidebar-tongue, .sidebar-shadow { background-color:#666 !important; }
|
||||
.sidebar-content h3, .sidebar-content .activity-desc { color:rgba(255,255,255,.7) !important; }
|
||||
```
|
||||
|
||||
If anyone improves on this, please share here.
|
||||
|
||||
## White theme
|
||||
|
||||
[pravdomil](https://github.com/wekan/wekan/issues/1690) has created small script for tampermonkey to redesign wekan board.
|
||||
|
||||
|
||||
|
||||
script for tampermonkey
|
||||
```js
|
||||
// ==UserScript==
|
||||
// @name Kanban
|
||||
// @namespace https://pravdomil.com/
|
||||
// @version 0.1
|
||||
// @match https://wekan.indie.host/*
|
||||
// @grant none
|
||||
// ==/UserScript==
|
||||
|
||||
;(function() {
|
||||
const el = document.createElement("style")
|
||||
// language=CSS
|
||||
el.textContent = `
|
||||
/* white background */
|
||||
body { background-color: white; }
|
||||
|
||||
/* header bar next to top bar */
|
||||
#header #header-main-bar {
|
||||
position: absolute;
|
||||
right: 70px;
|
||||
left: 300px;
|
||||
top: -3px;
|
||||
padding: 0;
|
||||
height: calc(28px + 3px);
|
||||
}
|
||||
|
||||
/* swimlane white background, no borders, fix ellipsis */
|
||||
.swimlane { background-color: white; }
|
||||
.swimlane-header-wrap { border: 0 !important; }
|
||||
.swimlane-header { text-overflow: initial !important; }
|
||||
|
||||
/* column header only for first row */
|
||||
.swimlane .list-header { margin: 4px 12px 4px; }
|
||||
.swimlane .list-header-name { display: none; }
|
||||
div:nth-child(1 of .swimlane) .list-header { margin: 20px 12px 4px; }
|
||||
div:nth-child(1 of .swimlane) .list-header-name { display: inline; }
|
||||
|
||||
/* cells no borders, fix height, less padding, no add new card */
|
||||
.list { border: 0; background-color: white; flex: 300px 0 0; }
|
||||
.list .list-body { height: 160px; padding: 0 2px; }
|
||||
.list .open-minicard-composer { display: none; }
|
||||
.list .open-list-composer { opacity: 0; transition: opacity .2s; }
|
||||
.list .open-list-composer:hover { opacity: 1; }
|
||||
|
||||
/* card style */
|
||||
.minicard-wrapper { margin-bottom: 2px !important; }
|
||||
.minicard { box-shadow: 0 0 16px rgba(0,0,0,0.15) inset; }
|
||||
|
||||
/* card style for first and last column */
|
||||
.swimlane .list:nth-child(2) .minicard { opacity: .5 !important; }
|
||||
.swimlane .list:nth-last-child(2) .minicard { opacity: .1 !important; }
|
||||
|
||||
/* card details always center, menu items tweaks */
|
||||
.card-details {
|
||||
position: absolute;
|
||||
z-index: 10000 !important;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: calc(50% - 510px / 2);
|
||||
}
|
||||
.pop-over-list .js-labels { display: none }
|
||||
.pop-over-list .js-move-card-to-top { display: none }
|
||||
.pop-over-list .js-move-card-to-bottom { display: none }
|
||||
.pop-over-list .js-archive { color: darkred }
|
||||
|
||||
/* not needed */
|
||||
.wekan-logo, .js-member, .attachments-galery { display: none; }
|
||||
|
||||
`
|
||||
|
||||
document.body.appendChild(el)
|
||||
})()
|
||||
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue