About the CSS Customisation category

You can customise Checkvist appearance with CSS (if you have a PRO account). We have collected some popular CSS snippets in a public list, https://checkvist.com/checklists/486715-checkvist-customization-css-samples

But if the customisation you want is not there, or if you are not sure how to use CSS, we’ll gladly help you. Please, post your question here :sunglasses:

As a side note to replacing/adding icons to tags here’s an interesting fact: you can use emoji in list names but you can’t in tags!

At least I couldn’t.

When I create a tag, like #prj-:soccer: it is not converted to a tag.

Hi @schultzter ,

sorry, tag names do not support emojis to do some technical issues. Not a trivial thing to fix due to some technical issues.

Cheers,

I’m a beginner who needs step by step instructions on how to add css to checkvist in order to change the font, numbering style, color, and spacing (UI) of my list. I see the snippets I need, but I have no idea how to begin adding them. Help please.

Hello,

Welcome!

CSS customisation is done at the bottom of this page: https://checkvist.com/auth/profile#appearance

After adding/editing the CSS in the textarea, press “Save all” and you should be able to see the effect in your lists.

Hope this helps :slight_smile:
KIR

Hi,

Please, can you help me: how can I increase size of this window (SHIFT, SHIFT) via CSS?

Hi,

Try

.searchEverywhere {
  max-width: 550px;
}

Best regards,
KIR

1 Like

Hi KIR,

It’s done, thanks. It’s working fine.

I’d like to change the window size of Duedate. I tried it via .dueDate and .dueDateForm, but I cannot change the size of the due date window.

If you have time, please provide me with a solution to change the size of the due date window.

The reason is simple: my PC’s monitor is too large, and the small window is not the best for my eyes.

Many thanks for your help, and I wish you a nice Monday.

Hello,

Unfortunately, at the moment it is not possible to change the size of the due date popup with CSS. It has a hard-coded in Javascript code width.

Hope, it is not a big problem.

Kind regards,
KIR

Hi,

It’s okay, it’s not a problem if the window can’t be resized, I’ll get used to it.

Hi,

I tried searching, but couldn’t find the solution. Could you please guide me on how to change the size of the Expand & collapse window using CSS code?

Hi,

I tried searching, but couldn’t find the solution. Could you please guide me on how to change the size of the Settings window using CSS code?

Hello @christianhodek,

It was not possible to change widths for these popups with CSS, but we’ve made it possible now.

The fix is deployed to our beta site, https://beta.checkvist.com (same login and password)
We will update the main production site later.

To change widths, try using these CSS selectors (here are the default values):


.profileMenu { min-width: 180px; }

.expandPopupData { min-width: 370px; }


.dueDatePopup { min-width: 265px; }
:root {
  --due_data_width: 224px;
}


Hope, this will work for you,

Kind regards,
KIR

1 Like

Hi KIR,

All CSS works correctly, many thanks for your help.

Hi,

I tried a lot of things to change windows (on NOT beta site) via CSS but nothing happens. Please, how can I change the following with CSS code:

  1. I want the checkbox and the text to be on the same line. Now the checkbox is offset from the text, because I oversized the checkbox. How can I neatly arrange the text in one row with the big checkbox?

  2. How can I increase size of windows on BETA site:

02/01: Never miss an edit or a dute date

02/02: Repeating due tasks

02/03: List view option

02/04: Print, open in a new tab window





Hello Christian,

I hope, now the checkboxes on beta would be aligned better (no pun intended :slight_smile: )

Also, please try the following on the beta:

.notifyPopup {
  min-width: 450px;
}

.compactModePopup {
  min-width: 260px;
}

.listOptionsPopup {
  min-width: 310px;
}

table.repeat_table {
  min-width: 430px;
}

Thank you for your help, dear KIR.

You know, I’ve used a lot of software over the past few years. But I’ve already written this to you.

I started with a software called Things. That was back when the iPad Air 2 tablet was released. Well, that wasn’t yesterday either. I tried other software too, and then I switched to online software.

I practiced with each software for at least 100 hours. Before my 100 hours of practice, I read everything. I watched all the instructional videos and tutorials. On top of that, there were the 100 hours I spent practicing. I didn’t practice a total of 100 hours; I spent 100 hours practicing with each software separately. I used various software during my practice, such as Wrike, Smartsheet, TeamGantt, Ganttpro, monday.com, Paymo, Smartsuite, Clickup, etc.

Each of them is excellent in terms of functionality. Well, in terms of features. Because otherwise, these software don’t work. I couldn’t work with these software because they are faulty, meaning they don’t function. And that was the least of my problems. I could have learned to live with the errors. But I couldn’t live with the fact that there was no support anywhere. I mean, real support was nowhere to be found. Being a “beta tester” and reporting software bugs every day is not support! Reporting bugs for developers by me is not support. And that’s what I got everywhere.

Then I discovered the world of Outliner software because I couldn’t work with any of the other software. Things started to go better for me here, but many features were still missing.

Nevertheless, I thought I was using the best software at that time. However, it turned out that I hadn’t even known the concept of the best software. This software was from the Omnigroup company. The software was good, but there was no support, and it only worked on the iPad. That means I couldn’t collaborate in real-time with others. I would have tolerated even this issue, but Omnigroup had no support. What Omnigroup calls support is not support.

But I kept searching. I didn’t give up! I knew that in life, planning is the most important thing. So, I continued looking for the best project management tool. However, the same thing always happened. Only software that, at best, were in beta versions were on the market.

Among project management software, I couldn’t find one that I could work with. Of course, there might be good project management software out there. But I didn’t find any good software. I only found expensive and poor-quality software.

At this point, I knew that Outliner software would be my solution. Unfortunately, the Omnigroup as a company did not meet my minimal expectations at all. And my expectations were minimal. All I wanted was to be able to use the software for work, to work with the software. I just wanted the software I selected to function. I wanted to work with the software I chose. But I couldn’t work with any of the software. Because I always had some bugs with the software. Something was always malfunctioning everywhere.

Then I embarked on another search. I searched for a long time, but I didn’t find any usable software.

Then I found a software called Checkvist. I reached out to the chat support, but no one responded. I sent a few emails, but the server returned, saying the recipient was not available. I became very frustrated because Checkvist seemed promising.

Then I found another email address and sent another email. A very kind woman responded, with whom I received detailed assistance in Czech and Slovak. I also read the Checkvist forum. I read everything and registered on the forum.

I subscribed to Checkvist software, and it was one of the best decisions of my life! Checkvist software is available at the best price. If the annual subscription for Checkvist were ten times the price, I would still pay for it.

Why? There are several reasons for this. The most important one is this: KIR solves private issues for me that are NOT PART OF THE SOFTWARE. That is, KIR provides solutions to my private problems! Nowhere else have I experienced this. I have only experienced that the software doesn’t work, let alone help with private issues from the software manufacturer!

Checkvist is my right hand. I use this software non-stop. I have now practiced with the Checkvist software for over 100 hours, so I already know it a bit.

Why do I use Checkvist, and why do I stick with this software? Well, here’s why:

The support is perfect! The support helps me with things that no other company would ever help me with, even for money!

Working with Checkvist is 100% keyboard-friendly! This made me fall in love with Checkvist at first sight.

CSS: I can customize everything with CSS codes! Even though I can only write a little bit of CSS, what I managed to achieve in CSS is thanks to KIR, my diligence, and perseverance. Because I can’t code, but KIR always helps me, and that’s a huge confidence boost for me.

Real-time working: In other software companies, you need a separate subscriber account to edit a document with someone I shared writing rights. Here in Checkvist, I can do this without a separate paid subscriber account.

And I want to say one more thing: Checkvist is my right hand.

The iPad Air 2 was released in 2014. Since then, I’ve been searching for the best project management tool. It took me 9 years to find the perfect project management software. That software is Checkvist.

Dear KIR and Sashika,

I thank you for creating perfect software.

I’m sure you’ve experienced the horror that I went through with other software. And it’s precisely for that reason that the two of you created perfect software.

I am very grateful that Checkvist exists!

I am very thankful that in changing my life, Checkvist is my most loyal friend.

1 Like

Hi,

I tried a lot of methods to find the CSS code, but I didn’t find it. Please, how can I change the width for the window shortcut?

Hi,

Please, could you tell me how I can permanently remove the “MORE” caption, but I would like to always see what I see after pressing the “MORE” button?

Hello Chrisitan,

On beta, you can now use:

.sortPopupList {
  min-width: 160px;
}

Hope this helps :slight_smile:
KIR

1 Like