Habitica Wiki
Habitica Wiki
Advertisement
Habitica Wiki


Description

Allows your tasks to start higher up on the page by condensing the header, removing party-related information/content, and moving Search & Filter into the header. Also makes the header a light grey instead of purple.

+ Suggested options: Enter settings and reduce header size.

+ Suggested options: Enter settings and make toolbar less bright.

Installation

Before installing this user style, make sure you have one of the following installed:

Then, navigate to the website for this user style. Stylus and Stylish users can load this style with one click using the blue "Install Style" button. Greasemonkey or Tampermonkey users can load this style with the "install this style as a user script" link in the blue box.

If the style has options, you should select the ones you want before installing it (though in most cases you can also change it later). On the userstyles.org website, you can do that by clicking the "Customize Settings" button. To change your choice of options, click the customize settings and choose the green button update style.

After the style is loaded (or Customization Settings were changed), you may need to refresh the page to see its effects. The style can be easily turned off and on with a handy checkbox that you can find by clicking the Stylus/Stylish/Greasemonkey/Tampermonkey icon in your toolbar.


Two-Column Habits[]

One common problem is having to scroll through a list of Habits to get to a specific one. This solution will double the width of the Habits column and allow cards to be displayed side-by-side. You can also tailor this for Dailies or To do's. After installing Stylus, you can write CSS that will affect Habitica. Here is the code snippet for Habits column:

div.tasks-column.habit {

    flex: 0 0 50%;

    max-width: 50%

}

div.tasks-column.habit > div.tasks-list > div.sortable-tasks {

    display: flex;

    flex-wrap: wrap;

}

div.tasks-column.habit > div.tasks-list > div.sortable-tasks > div.task-wrapper {

    width: 50%;

}


If you want to apply this change for Dailies, change all `div.tasks-column.habit` in the above example to `div.tasks-column.daily`. For To do's, change them to `div.tasks-column.todo`

Advertisement