.menu
.search
CHECKING STATUS
I AM LISTENING TO
|
  • ♩
  • ♪
  • ♫
  • ♬
  • ♩
  • ♪
  • ♫
  • ♬
HOME / BLOG

Vikunja – Style / Themed

13. July 2026
/ / / / / / /
.SHARE

Table of Contents

Spend a lot of time with Vikunja (cubicFUSION Vikunja Importer) lately, one thing that it is currently missing is an easy way to style the interface. Especially the task view is just one long page without any clear section separation.

LET’S TWEAK IT

Here a quick starting point to tweak the style quickly. You can use something like Super CSS Inject to apply your own style. You can also find some additional Userscript Injects here.

portalZINE.DE | portalzine nmn development meets creativity blog
portalZINE.DE | portalzine nmn development meets creativity blog 1

INJECT CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
/* ==========================================================
   cubicFUSION Brand Restyle for Vikunja
   Consolidated stylesheet — includes base theme, task detail
   page sections, comment cards, logo swap, and all reported fixes.
   ========================================================== */
 
:root {
  /* Logo image — tweak this one line to change the header logo */
  --cfcore-logo-url: url('https://your-domain.com/vikunja.svg');
 
  /* Bulma color system overrides (H/S/L split vars used by Bulma) */
  --primary-h: 50.8deg; --primary-s: 100%; --primary-l: 50%;
  --primary-invert: #000;
  --primary-light: hsla(50.8deg, 100%, 96%, 1);
  --primary-dark: hsla(50.8deg, 100%, 29%, 1);
  --link-h: 198deg; --link-s: 100%; --link-l: 44.5%; --link-invert: #fff;
  --info-h: 199.4deg; --info-s: 100%; --info-l: 33.3%; --info-invert: #fff;
  --success-h: 125.5deg; --success-s: 44%; --success-l: 49%; --success-invert: #fff;
  --warning-h: 43.5deg; --warning-s: 100%; --warning-l: 50%; --warning-invert: #000;
  --danger-h: 0deg; --danger-s: 70.8%; --danger-l: 52.9%; --danger-invert: #fff;
  --body-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 
  /* cubicFUSION brand tokens */
  --cfcore-primary: #FFD800;
  --cfcore-primary-hover: #e6c200;
  --cfcore-secondary: #009FE3;
  --cfcore-text-primary: #1d2327;
  --cfcore-text-secondary: #646970;
  --cfcore-border: #dcdcde;
  --cfcore-bg-main: #F8F9FA;
  --cfcore-radius: 6px;
  --cfcore-shadow-sm: 0 1px 3px rgba(0,0,0,0.10);
  --cfcore-shadow: 0 4px 6px -1px rgba(0,0,0,0.10);
}
 
body, #app { font-family: var(--body-family); }
 
/* Header / nav */
header.navbar { border-bottom: 4px solid var(--cfcore-primary); background: #000 !important; }
header.navbar, header.navbar a, header.navbar button, header.navbar .project-title { color: #fff !important; }
header.navbar svg, header.navbar img:not(.avatar) { filter: brightness(0) invert(1); }
header.navbar .project-title { font-weight: 700; }
 
/* Header dropdowns (fix #3: white-on-white) */
header.navbar .dropdown-menu, header.navbar .dropdown-content { background: #fff !important; }
header.navbar .dropdown-menu, header.navbar .dropdown-content, header.navbar .dropdown-item,
header.navbar .dropdown-menu a, header.navbar .dropdown-menu button,
header.navbar .dropdown-content a, header.navbar .dropdown-content button { color: var(--cfcore-text-primary, #1d2327) !important; }
header.navbar .dropdown-menu svg, header.navbar .dropdown-content svg,
header.navbar .dropdown-menu img, header.navbar .dropdown-content img { filter: none !important; }
header.navbar .dropdown-item:hover, header.navbar .dropdown-menu a:hover, header.navbar .dropdown-menu button:hover {
  background: var(--cfcore-bg-main, #F8F9FA) !important; color: var(--cfcore-text-primary, #1d2327) !important;
}
 
/* Sidebar */
aside.menu-container { background: #fff; border-right: 1px solid var(--cfcore-border); }
aside .base-button.list-menu-link.router-link-exact-active,
aside .base-button.list-menu-link.router-link-active {
  border-left: 4px solid var(--cfcore-primary); background: rgba(255,216,0,0.08); font-weight: 600;
}
 
/* View-switch tabs (fix #1 v2: hover contrast on all states) */
.switch-view-button.is-active, .router-link-exact-active.switch-view-button {
  font-weight: 700; border-bottom: 3px solid var(--cfcore-primary) !important; color: var(--cfcore-text-primary) !important;
}
.switch-view-button:hover, .switch-view-button.is-active:hover, .router-link-exact-active.switch-view-button:hover {
  color: var(--cfcore-text-primary, #1d2327) !important;
}
 
/* Buttons */
.button.is-primary, .base-button.button.is-primary {
  font-weight: 600; background: var(--cfcore-primary) !important; border-color: var(--cfcore-primary-hover) !important; color: #000 !important;
}
.button.is-primary:hover, .base-button.button.is-primary:hover {
  background: var(--cfcore-primary-hover) !important; color: #000 !important;
}
 
/* Kanban */
.kanban .bucket { background: var(--cfcore-bg-main); border-radius: var(--cfcore-radius); box-shadow: var(--cfcore-shadow-sm); }
.kanban .bucket .bucket-header { border-left: 4px solid var(--cfcore-primary); padding-left: 8px; } /* fix #4: border only on header, not h2/h3 */
.kanban .bucket .bucket-header h2, .kanban .bucket .bucket-header h3 { font-weight: 700; }
.kanban .task, .kanban .ticket { border-radius: var(--cfcore-radius); box-shadow: var(--cfcore-shadow-sm); transition: box-shadow 0.2s, transform 0.2s; }
.kanban .task:hover, .kanban .ticket:hover { box-shadow: var(--cfcore-shadow); transform: translateY(-2px); }
 
.filter-container { border-radius: var(--cfcore-radius); }
 
/* Task detail page — section separation */
main[class*="task.detail"] { padding-bottom: 30px; }
.columns.details {
  background: var(--cfcore-bg-main, #F8F9FA); border: 1px solid var(--cfcore-border, #dcdcde);
  border-radius: var(--cfcore-radius, 6px); padding: 16px 16px 4px;
  box-shadow: var(--cfcore-shadow, 0 4px 6px -1px rgba(0,0,0,0.10)); margin: 0 0 28px !important;
}
.detail-content > .details.content.description,
.detail-content > .content.attachments,
.detail-content > .content.details.comments-container,
.detail-content > .details.content.comments-container {
  background: #fff; border: 1px solid var(--cfcore-border, #dcdcde); border-radius: var(--cfcore-radius, 6px);
  box-shadow: var(--cfcore-shadow, 0 4px 6px -1px rgba(0,0,0,0.10)); padding: 20px; margin-bottom: 28px !important;
}
.detail-content h3 {
  font-size: 16px; font-weight: 700; color: var(--cfcore-text-primary, #1d2327);
  border-left: 4px solid var(--cfcore-primary, #FFD800); padding-left: 10px; margin: 0 0 16px !important;
}
.action-buttons {
  background: #fff; border: 1px solid var(--cfcore-border, #dcdcde); border-radius: var(--cfcore-radius, 6px);
  box-shadow: var(--cfcore-shadow, 0 4px 6px -1px rgba(0,0,0,0.10)); padding: 16px;
}
.action-buttons .action-heading {
  display: block; margin: 20px 0 8px; padding-top: 16px; border-top: 1px solid var(--cfcore-border, #dcdcde);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cfcore-text-secondary, #646970);
}
.action-buttons .action-heading:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; }
 
/* Comments as cards */
.comments-container .comment {
  background: var(--cfcore-bg-main, #F8F9FA); border: 1px solid var(--cfcore-border, #dcdcde);
  border-radius: var(--cfcore-radius, 6px); padding: 14px 16px; margin-bottom: 16px !important;
}
.comments-container .comment:last-child { margin-bottom: 0 !important; }
.comments-container .comment .media-left { margin-right: 14px; }
.comments-container .comment .media-left img.image.is-avatar { border-radius: 50%; box-shadow: var(--cfcore-shadow-sm, 0 1px 3px rgba(0,0,0,0.10)); }
.comments-container .comment .media-content .name,
.comments-container .comment .media-content .comment-info,
.comments-container .comment .media-content > small {
  display: block; margin-bottom: 8px; font-weight: 600; color: var(--cfcore-text-primary, #1d2327);
}
 
/* Logo swap — pure CSS, controlled by --cfcore-logo-url above */
.logo-link > div { position: relative; }
.logo-link > div svg.logo { visibility: hidden; }
.logo-link > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cfcore-logo-url);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
 
/* Back-to-project button styling */
.back-button {
  color: var(--cfcore-text-secondary, #646970) !important;
  font-weight: 600;
  transition: color 0.15s ease;
}
.back-button:hover {
  color: var(--cfcore-secondary, #009FE3) !important;
}
.back-button svg {
  margin-right: 4px;
  transition: transform 0.15s ease;
}
.back-button:hover svg {
  transform: translateX(-3px);
}
 
/* Task heading — make it pop */
.heading .title.task-id {
  color: var(--cfcore-text-secondary, #646970) !important;
  font-weight: 700;
  background: var(--cfcore-bg-main, #F8F9FA);
  border-radius: var(--cfcore-radius, 6px);
  padding: 2px 10px;
  font-size: 0.85em;
}
.heading h1.title.input {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--cfcore-text-primary, #1d2327) !important;
  border-left: 5px solid var(--cfcore-primary, #FFD800);
  padding-left: 14px;
  margin-top: 10px !important;
}
 
.heading .title.task-id {
  background: var(--cfcore-bg-main, #F8F9FA);
  border-radius: var(--cfcore-radius, 6px);
  padding: 2px 10px;
  color: var(--cfcore-text-secondary, #646970) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
 

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

RELATED POSTS

READ ABOUT IT
 PROJECT

cubicFUSION Elementor Menu

/ /

WHAT? cubicFUSION’s Elementor Menu turns WordPress nav menus into design surfaces. Six widgets cover the range — a mega menu that drops full Elementor templates into any item, a hamburger menu with five panel layouts from a simple slide-out to a modal-style fullscreen overlay and an off-canvas mode that scales the page back into a […]

READ ABOUT IT

Day 51: Penpot – Self-Hosted Open-Source Design & Prototyping – 7 Days of Docker

/ / / / /

Design tools have quietly become one of the most locked-in parts of a modern team’s workflow. The files live in someone else’s cloud, access is billed per editor seat, and the moment you stop paying, the door to your own work can close behind you. For a small studio or an internal team, that model […]

READ ABOUT IT

Why Your Penpot Animated GIF Freezes in Chrome — and the SVG Trick That Wakes It Up

/ / / /

Last update: 25.07. I know a lot of text, but that is how I process ideas and iterate fast! You add an animated GIF to a Penpot prototype, open it in Google Chrome, and… nothing. The GIF sits there like it’s waiting for written permission to move. Then you wiggle the cursor or interact with […]

Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs


I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.

.series

.highlights

.PROJECT - LEAD
.PROJECTS - I LOVE

PORTALZINE® NMN
Alexander Gräf
Stettiner Str. Nord 20
DE-49624 Löningen

PUSH THE BOUNDARIES OF YOUR PROJECT.