Customize Color Labels (w/ Stylish)

If anyone wants to change the appearance of the color labels (the ones that change the background of the item if you press Ctrl+Shft+1-6), here is the code that you can add to Stylish Chrome extension and tweak. The code below makes the existing colors lighter a bit and adds a solid bar to the left of the text.

Check it out:

/* change color labels*/
.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1 {
background: #FFDBD3 !important;
border-radius: 0;
padding-left: 3px !important;
    border-left: solid  red;
    max-width: 70%;

}

    
.set-color-label[data-color="2"], .Node-contentContainer.mod-color-label-2 {
background: #FFEFD3 !important;
padding-left: 3px !important;

    border-left: solid  orange;
    border-radius: 0;
     max-width: 70%;

}

.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3 {
background: #FFF9D3 !important;
padding-left: 3px !important;
    border-left: solid  #FFE84A;
    border-radius: 0;
     max-width: 70%;

}

.set-color-label[data-color="4"], .Node-contentContainer.mod-color-label-4 {

padding-left: 3px !important;
    border-left: solid  green;
    border-radius: 0;
     max-width: 70%;

}

.set-color-label[data-color="5"], .Node-contentContainer.mod-color-label-5 {
background: #EDF4FF !important;
padding-left: 3px !important;
    border-left: solid  #09387D;
    border-radius: 0;
    color: #09387D !important;
    max-width: 70%;
}

.set-color-label[data-color="6"], .Node-contentContainer.mod-color-label-6 {
background: #F6EBFC !important;
padding-left: 3px !important;
    border-left: solid  purple;
    border-radius: 0;
     max-width: 70%;

}
11 Likes

Looks great :slight_smile:

1 Like

I’ve been meaning to look into this for some time thanks!

the schema you have reminds me of w3schools.com

1 Like

Certainly, don’t want to take all the credit for this. Erica provided the code. I just tweaked the settings.

2 Likes

Regarding the use of Chrome extensions, Stylish is one of my favourites.

2 Likes

Thank you @Rodion_Y
I use your code for stylish

https://userstyles.org/styles/155911/color-label

But shortcut is “ctrl + shift +L”

1 Like

The shortcuts were changed recently, that’s why. Link: http://blog.dynalist.io/shortcut-changes/

1 Like

is better, likely not by much tho esp if you dont care about privacy

this should likely be put into dyna if only for the reason that lighter highlighting is better for readability, light highlight on dark font is better contrast

the bar thing is likely better overall too tho have to test to really know

tho it’s only cosmetic, these things typically have a very marginal effect, if any

without a doubt, def support lighter highlighting tho

3 Likes

Yes, I want to revive this old conversation. Is it possible to color the background of the bullets as well? How do you target the html element…

1 Like

Sorry for the late reply, but it should be possible.

What exactly do you mean by “the background of the bullets”? Like the little dots?

1 Like

Yes, I mean make the color be the background of the entire node, (text and bullet…) right now the color affects only the text background ( see the green color below for example )

image

1 Like

It looks pretty cool!

Is this something that can be done with the Custom CSS available to Dynalist Pro users?

1 Like

Why set a max-width?

1 Like

Yes, it is!

Thanks for this tip!!!

1 Like

Try the .Node-self class.

1 Like

6 色は私には少し少ないです。一方、見出しには 3 段階も必要ありません。なので、見出し 1 と見出し 2 のサイズを同じにして、色を 12 種類に増やしました。

(明るい背景色でも見やすいように、テキストに影を追加しています。)

Six colors are a little too few for me and I don’t require three levels headings. So I made H1 and H2 the same size and increased the number of colors to 12.

(I added the shadow to the text to make it easier to see on a light background.)

.is-heading1 .mod-color-label-1 {
	background-color: #ff534d;
}

.is-heading1 .mod-color-label-2 {
	background-color: #f0932b;
}

.is-heading1 .mod-color-label-3 {
	background-color: #e6d747;
}

.is-heading1 .mod-color-label-4 {
	background-color: #59c466;
}

.is-heading1 .mod-color-label-5 {
	background-color: #1ec0c1;
}

.is-heading1 .mod-color-label-6 {
	background-color: #008fff;
}

.is-heading2 .mod-color-label-1 {
	background-color: #9d68ff;
}

.is-heading2 .mod-color-label-2 {
	background-color: #f157da;
}

.is-heading2 .mod-color-label-3 {
	background-color: #bb2d29;
}

.is-heading2 .mod-color-label-4 {
	background-color: #1f7e38;
}

.is-heading2 .mod-color-label-5 {
	background-color: #0061ad;
}

.is-heading2 .mod-color-label-6 {
	background-color: #344563;
}

.is-mediumFont .Node-self.is-heading2 .Node-contentContainer {
	font-size: 24px;
}

.is-mediumFont .Node-self.is-heading2 .node-line {
	line-height: 28px;
	min-height: 28px;
}

.is-heading .Node-contentContainer {
	text-shadow: 0 0 5px #181818;
}
7 Likes

Wow, this is so cool! That’s a clever way to reuse H1 and H2.

1 Like

ありがとうございます!

この方法は、あなたのアドバイス (Custom Color Label Colors) のおかげで思いつきました!

Thank you!

I came up with this method thanks to your advice (Custom Color Label Colors)!

1 Like