# Checkvist customization (CSS samples) #

_Sometimes we need to customize a list for specific needs or preferences. You can do it with CSS (both screen and print versions) on [your profile page](https://checkvist.com/auth/profile#appearance). It is a PRO feature, so you might want to [start a free trial](https://checkvist.com/auth/profile#pro)._

-----

### Styling with tags

_You can control the list item's styles with tags. When you add a tag to a list item, we add that tag's name to the class attribute. If you reference that class afterwards in your CSS, you can style the tagged item as you like._

Say, you have a tag called **important** and you want the tagged list item to stand out #important

```css
.tag_important  .userContent {
  font-weight: 500; /* Bolder text */
}

.tag_important  .userContent:before {
  content: "\F06A"; /* An icon from the Font Awesome library */
  font-family: var(--fa-family);
  font-weight: 500;
  color: darkorange; /* Brighter color */ 
  font-size: 14px;
  padding-right: 5px;
}

/* The following section is required to fix case when icon is used with numbered lists */
.numberedList .tag_important .userContent:before {
    content: counters(section, ".") ". \F06A"; /* Same icon code as in previous section */
}
```
```

#### How to add icons

1. **Open the [Font Awesome icon library](https://fontawesome.com/icons)**
   1. Click the icon you want to use in your list
   1. On the icon's page [for instance, the exclamation sign](https://fontawesome.com/icons/exclamation-circle), copy its **Unicode**
1. **When you write CSS, don't forget**
   1. To precede the Unicode with **\\**
   1. To mention the font-family: `font-family: var(--fa-family)`
   1. To set right padding for your icon, depending on its size

**You can set color and size for your icons, just like you would do for text**

- I am not sure we'll be doing that #discuss
- Mary Ann's contact details #contact

#### Invisible tags #invisible

_If you want to use tags only as triggers for the icons and hide them afterwards, use this code (the example hides the tag **#invisible**)_

```css
.topLevel .tag.tag_invisible {
   display:none;  /* Hides the tag #important, leaving only the styling */
}
```

#### CSS Sample for replacing tags with meaningful icons

Such css allow to have **several** icons for a single list item
```css
/* Hide styled tags text */
.topLevel .tag.tag_analysis,
.topLevel .tag.tag_test,
.topLevel .tag.tag_design,
.topLevel .tag.tag_code,
.topLevel .tag.tag_notes,
.topLevel .tag.tag_wireframe,
.topLevel .tag.tag_question,
.topLevel .tag.tag_mockup,
.topLevel .tag.tag_research,
.topLevel .tag.tag_answer,
.topLevel .tag.tag_done,
.topLevel .tag.tag_future
{ 
  visibility:hidden;
  width: 5px;
}

.tag.tag_notes:before,
.tag.tag_question:before,
.tag.tag_answer:before,
.tag.tag_research:before,
.tag.tag_wireframe:before,
.tag.tag_mockup:before,
.tag.tag_future:before,
.tag.tag_done:before {
  font-family: var(--fa-family);
  font-weight: 300;
  font-size: 1em;
  visibility: visible;
}

.tag.tag_notes:before {content:"\f15c";}
.tag.tag_question:before {content:"\f059";}
.tag.tag_answer:before {content:"\f0eb";}
.tag.tag_research:before {content:"\f002";}
.tag.tag_wireframe:before {content:"\f044";}
.tag.tag_mockup:before {content:"\f1fc";}
.tag.tag_future:before {content:"\f04e";}
.tag.tag_done:before {content:"\f00c";}

```

### Font size

**Same font size for all levels**

- _With [Markdown](http://daringfireball.net/projects/markdown/) it's so easy to set headers <kbd>mh</kbd> bold and italic text (guess the shortcuts!), that the list items can be just of the same size._
- **Make the text smaller**

```css
ul.topLevel li.task, ul.topLevel ul li.task {
  font-size: 14px; /* Makes all lines the same size */
  font-weight: normal; /* and weight */
}

div.nodeImage {
  top: 3px; /* Adjust the collapse/expand triangle */
}
```
```

**Make the text larger**

```css
ul.topLevel li.task, ul.topLevel ul li.task {
  font-size: 20px; /* If you want the font larger */
  font-weight: 300; /* It's good to make it lighter as well*/
}

ul ul div.nodeImage {
  top: 5px; /* Adjust the collapse/expand triangle position for sub-items*/
}
```
```

**Reduce inter-line spacing**

```css
.editable, .editableList { line-height: 1.1;  min-height:auto;}
div.coreDiv, .editable { padding-top: 1px; padding-bottom: 1px;}
i.act, div.nodeImage {top: 0;}
```
```

### Custom fonts

**Import custom fonts, and customize any element on the page. For instance, for list items and list title - as in the example below**

```css
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

.list-h1, .userContent {
  font-family: “Roboto Condensed”, sans-serif;
}
```

#### Custom font for notes/comments

```css
.commentText.userContent {
  font-family: 'Roboto Condensed', sans-serif;
}
```
```

### Styling sub-levels

Automatically style x-level list items.

- In the example below, all 2-nd level items will be red, all deeper levels - blue:

```css
ul ul li {
  color: red;
}

ul ul ul li {
  color: blue;
}
```

Automatically style all list items, nested under a certain tag. In our example, all list items under the tag **tagname** will be red:

```css
.tag_tagname + ul li {
  color: red;
}
```

### Task completion styles

_Completed tasks are marked with grey color and are stroked through. You might want to change that, to make the completed items stand out, to be more readable, or to have an icon._

**Remove strike through**

```css
 span.task_closed {
  text-decoration: none; 
}
```

**Icon**

```css
span.task_closed:before {
  content: "\F00C"; /* Pick any icon from the https://fontawesome.com/v5.15/icons */
  font-family: var(--fa-family);
  font-size: 13px; /* Smaller than the text */
  padding-right: 5px;
  color: #999;  /* Of a lighter color */
}
```

This is a closed task

**Change the completed tasks color**

```css
 span.task_closed {
  color: #666;
}
```

**Keep priority colors for completed tasks** #new

```css
.priorityColored span.task_closed {
    color: inherit;
  }
```

### Different color for bold/strong items

```css
.userContent strong, .userContent b {
  color: #164174;
}
```
```

### Remove your avatar from notes

_Every note <kbd>nn</kbd> comes with its author avatar picture. You can hide it, if you like with this code snippet_

```css
.authorPic {
   display: none;
}
ul.comments div.coreNote {
   margin-left: 0;
}
```
```

### Remove envelope from items created by "send via email"

When an item is created using *Add tasks via email* feature, it is marked with an envelope.
If you don't like it, you can remove this envelope with the following CSS:

```css
.userContent .fa-envelope { 
  display: none; 
}
```

### Remove vertical guide on the left

```css
.verticalGuide__selected, .verticalGuide {
  display:none;
}
ul.topLevel {
  padding-left: 0;
}
```
```

### Print style customisation

*Print styles are also customisable*

**Print every top-level item on a separate page**

```css
.topLevel > li {
  page-break-before: always;
}
```

If you use list dividers (----) on the top level, you might want to avoid printing empty pages for them

```css
.topLevel > li.dividerClass {
  page-break-before: avoid;
}
```

### Zen mode backgrounds

*Press <kbd>om</kbd> to work in the distraction-free mode. And use this CSS code to customise the background, if you like :)*

**For instance, you want to change the background to the attached image**

- Want another image? Change the url() parameters with your image hyperlink.

```css
.zenBgImage {
--zen-bg-image: url(https://d2f3rnpzys5195.cloudfront.net/assets/zenBg/zenMode_dark1-f97302a7ad38b660484b1eb921d4b6d8ab0ac110c54b767fc32b752a53798683.jpg);
}
```

**Remove background image at all?**

```css
.zenBgImage {
  --zen-bg-image: none;
}
```

**Just a background color?**

```css
.zenBgImage {
background-image: none;
background-color: #B4D79B;
}
```

-----

*If you want to share your customisation snippets or have a suggestion for new ones, ping us at kirsa@checkvist.com*