(deprecated) Roam - colored bold, italics and highlight by @CatoMinor3

Roam-colored_fonts.css

/*
Author:: @CatoMinor3
Version:: 3.0
Date:: Sept.rm-italicsber 22nd, 2020
Changes log:
- 3.0 - code adapted for the new classes in Roam
- 2.1 - code adaptated for future support of colour shades (different opacity), 
download the additonal CSS here: https://gist.github.com/ciceronianus/5d7b224658b7a9832a6249a13091aa9d

Support: 
- Paypal: https://www.paypal.me/catominor3
- Patreon: https://www.patreon.com/catominor

How to use this? Simply write c:COLOR (see supported colors below) and follow it with 
the highlighted text, bold text or .rm-italicsphasis. 
*/

/* ---------------- Roam colors -----------------*/

/*Supporter colors:
https://github.com/mrmrs/colors

.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }

*/
[data-tag^="c:"] {
    	display:none !important;  
}

[data-tag^="c:"] + .rm-highlight, 
[data-tag^="c:"] + span > .rm-page-ref--link {
    color: white !important;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: bold;
}

[data-tag^="c:navy"] + .rm-highlight,
[data-tag^="c:navy"] + span > .rm-page-ref--link {
	background-color: #001F3F !important;
}

[data-tag^="c:navy"] + .rm-italics, 
[data-tag^="c:navy"] + .rm-bold 
{color: #001F3F; }

[data-tag^="c:blue"] + .rm-highlight,
[data-tag^="c:blue"] + span > .rm-page-ref--link {
	background-color: #0074D9 !important;
}


[data-tag^="c:blue"] + .rm-italics, 
[data-tag^="c:blue"] + .rm-bold {
    color: #0074D9;
    
}

[data-tag^="c:aqua"] + .rm-highlight,
[data-tag^="c:aqua"] + span > .rm-page-ref--link {
	background-color: #7FDBFF !important;
}

[data-tag^="c:aqua"] + .rm-italics, 
[data-tag^="c:aqua"] + .rm-bold {
    color: #7FDBFF;
    
}

[data-tag^="c:teal"] + .rm-highlight,
[data-tag^="c:teal"] + span > .rm-page-ref--link {
	background-color: #39CCCC !important;
}


[data-tag^="c:teal"] + .rm-italics,
[data-tag^="c:teal"] + .rm-bold {
    color: #39CCCC;
    
}


[data-tag^="c:olive"] + .rm-highlight,
[data-tag^="c:olive"] + span > .rm-page-ref--link {
	background-color: #3D9970 !important;
}

[data-tag^="c:olive"] + .rm-italics,
[data-tag^="c:olive"] + .rm-bold {
    color: #3D9970;
    
}

[data-tag^="c:green"] + .rm-highlight,
[data-tag^="c:green"] + span > .rm-page-ref--link {
	background-color: #2ECC40 !important;
}

[data-tag^="c:green"] + .rm-italics,
[data-tag^="c:green"] + .rm-bold {
    color: #2ECC40;
    
}


[data-tag^="c:lime"] + .rm-highlight,
[data-tag^="c:lime"] + span > .rm-page-ref--link {

	background-color: #01FF70 !important;

}

[data-tag^="c:lime"] + .rm-italics,
[data-tag^="c:lime"] + .rm-bold {
    color: #01FF70;
    
}

[data-tag^="c:yellow"] + .rm-highlight,
[data-tag^="c:yellow"] + span > .rm-page-ref--link {

	background-color: #FFDC00 !important;

}

[data-tag^="c:yellow"] + .rm-italics,
[data-tag^="c:yellow"] + .rm-bold {
    color: #FFDC00;
    
}

[data-tag^="c:orange"] + .rm-highlight,
[data-tag^="c:orange"] + span > .rm-page-ref--link {

	background-color: #FF851B !important;

}

[data-tag^="c:orange"] + .rm-italics,
[data-tag^="c:orange"] + .rm-bold {
    color: #FF851B;
    
}


[data-tag^="c:red"] + .rm-highlight,
[data-tag^="c:red"] + span > .rm-page-ref--link {

	background-color: #FF4136 !important;

}

[data-tag^="c:red"] + .rm-italics,
[data-tag^="c:red"] + .rm-bold
{
    color: #FF4136;
    
}

 







[data-tag^="c:fuchsia"] + .rm-highlight,
[data-tag^="c:fuchsia"] + span > .rm-page-ref--link {

	background-color: #F012BE !important;

}

[data-tag^="c:fuchsia"] + .rm-italics, 
[data-tag^="c:fuchsia"] + .rm-bold {
    color: #F012BE;
    
}

[data-tag^="c:purple"] + .rm-highlight,
[data-tag^="c:purple"] + span > .rm-page-ref--link {

	background-color: #B10DC9 !important;

}

[data-tag^="c:purple"] + .rm-italics,
[data-tag^="c:purple"] + .rm-bold {
    
    color: #B10DC9;
}

[data-tag^="c:maroon"] + .rm-highlight,
[data-tag^="c:maroon"] + span > .rm-page-ref--link {

	background-color: #85144B !important;

}

[data-tag^="c:maroon"] + .rm-italics,
[data-tag^="c:maroon"] + .rm-bold {
    color: #85144B;
    
}

[data-tag^="c:silver"] + .rm-highlight,
[data-tag^="c:silver"] + span > .rm-page-ref--link {

	background-color: #DDDDDD !important;

}

[data-tag^="c:silver"] + .rm-italics,
[data-tag^="c:silver"] + .rm-bold {
    color: #DDDDDD;
    
}

[data-tag^="c:gray"] + .rm-highlight,
[data-tag^="c:gray"] + span > .rm-page-ref--link {

	background-color: #AAAAAA !important;

}

[data-tag^="c:gray"] + .rm-italics,
[data-tag^="c:gray"] + .rm-bold {
    color: #AAAAAA;
    
}

[data-tag^="c:black"] + .rm-highlight,
[data-tag^="c:black"] + span > .rm-page-ref--link {

	background-color: #111111 !important;

}

[data-tag^="c:black"] + .rm-italics,
[data-tag^="c:black"] + .rm-bold {
    color: #111111;
    
}	

Works great, thanks! ...but how do I turn off highlight to get, for example, just blue? (embarrassed to be so dense...since no one else is asking, I assume it is obvious...)

…

On Tue, Sep 8, 2020 at 11:38 AM ciceronianus ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Hi, try #cred ^^test^^ 🙂 ________________________________ From: svinter ***@***.***> Sent: Tuesday, September 8, 2020 1:49 PM To: ciceronianus ***@***.***> Cc: ciceronianus ***@***.***>; Author < ***@***.***> Subject: Re: ciceronianus/Roam-colored_fonts.css @svinter commented on this gist. ________________________________ Thanks for this. After cutting-and-pasting your css into roam/css, I tried #c:red test (also #c:RED, and c:red just in case :-) and got no love. Any suggestions? Apologies for my ignorance. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub< https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgist.github.com%2F97d493cdc8d770e37ee0d085fc36ed3d%23gistcomment-3445723&data=02%7C01%7C%7C0278c47d23ee4433adb708d853ed2f73%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637351625444068297&sdata=epoa16eTqH7BE%2Bud37Gp%2BrziGI4ffj0frRzcuvjaalk%3D&reserved=0>, or unsubscribe< https://eur04.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAPCFBULYV5C33UUB5OPNQWLSEYK27ANCNFSM4Q73XM6A&data=02%7C01%7C%7C0278c47d23ee4433adb708d853ed2f73%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637351625444078296&sdata=uVGVouvHNsi6ChooLL8PoFAauOh9Ho%2BnuhHDNIv5hdw%3D&reserved=0>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3446000>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQSQV355NWOCE6LRITZETATSEZFWDANCNFSM4Q73XM6A> .

You can combine #c:COLOR also with emphasis or bold to get coloured text without highlighting :).

How? None of these seem to work: - #c:blue ^^**test**^^ - #c:blue **^^test^^** - **#c:blue ^^test^^**

…

On Sun, Sep 13, 2020 at 2:43 AM ciceronianus ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ You can combine #c:COLOR also with emphasis or bold to get coloured text without highlighting :). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3452069>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQSQV3YRLLX4A7DOOCC3KOLSFRSYXANCNFSM4Q73XM6A> .

It works great. Only use '#c:blue test'

• #c:blue test

Bingo! I hadn't realized that bold and emphasis work in markup without explicit markup designations. Thank you!

…

On Sun, Sep 13, 2020 at 6:22 PM olivierkbb ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ - #c:blue *test* — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3452678>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQSQV3ZTXRDGXR6Q2KVTK23SFVA25ANCNFSM4Q73XM6A> .

;)
#c:blue ** test **

Thank you, Olivier, for helping Svinter out :)).

Does this work in general or are highlights/bold/italics somehow special in Roam?
I tried to style Pagelinks (#c:red [[Page]]) and even made my own styling tag for quotes (#quote[[Person Page]]), but that didn't work:

[data-tag="quote"] {
    	display:none !important;  
}
[data-tag="quote"] + .rm-page-ref-link-color {
    CSS styling
}

In the latest Roam version(0.7.7-34242117), Roam-colored-fonts does not work anymore😭. Can you recover it? Thank you!!!🙏

In the latest Roam version(0.7.7-34242117), Roam-colored-fonts does not work anymore😭. Can you recover it? Thank you!!!🙏

Can you check it now? :)

We need to update it to the following:

... + .roam-highlight, /* Changed the class name for highlights */

... + em, /* for italics */

... + strong, /* for bold */

... + span > .rm-page-ref-link-color { /* for links */

I made those changes and it works for me again. You can find the updated CSS in my fork: https://gist.github.com/stanidesis/987c9919789007f7dd9d587428580b56

In the latest Roam version(0.7.7-34242117), Roam-colored-fonts does not work anymore😭. Can you recover it? Thank you!!!🙏

Can you check it now? :)

Yes, It works very well! Thank you so much!!!

Hi,

We need to update it to the following:

... + .roam-highlight, /* Changed the class name for highlights */

... + em, /* for italics */

... + strong, /* for bold */

... + span > .rm-page-ref-link-color { /* for links */

I made those changes and it works for me again. You can find the updated CSS in my fork: https://gist.github.com/stanidesis/987c9919789007f7dd9d587428580b56

Actually, there was an update of Roam that forces me to change the code :). Try to update Roam and then use the code I posted here :).

Hi,

We need to update it to the following:

... + .roam-highlight, /* Changed the class name for highlights */

... + em, /* for italics */

... + strong, /* for bold */

... + span > .rm-page-ref-link-color { /* for links */

I made those changes and it works for me again. You can find the updated CSS in my fork: https://gist.github.com/stanidesis/987c9919789007f7dd9d587428580b56

Actually, there was an update of Roam that forces me to change the code :). Try to update Roam and then use the code I posted here :).

You're right! My roam just got the update. Thank you

Hello! Been using this for a while but recently I've only been able to apply color to italicized text (doesn't work for bold/highlighted text). This is even with Roam fully updated. Any tips appreciated, thanks for making this very handy tool :)

I know nothing about how to do this, but I have been trying and trying to use this and cannot it to work. I wonder if it is outdated?

Try this one: https://github.com/ciceronianus/roam-customization/blob/main/CSS/Roam-colored_fonts_alternative.css :)
I will delete this Gist soon.

Thank you! I just can't seem to make it work. I am sure I am doing something wrong. I appreciate your time.

…

On Wed, Apr 21, 2021 at 2:09 AM Cato Minor ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Try this one: https://github.com/ciceronianus/roam-customization/blob/main/CSS/Roam-colored_fonts_alternative.css :) I will delete this Gist soon. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3713994>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATYR5MYYI6JDZBJDDQWTBYDTJZTYTANCNFSM4Q73XM6A> .

-- Notice of Confidentiality: This email, and any attachments, is intended only for use by the addressee(s) and may contain privileged or confidential information. Any distribution, reading, copying or use of this communication and any attachments by anyone other than the addressee, is strictly prohibited and may be unlawful. If you have received this email in error, please immediately notify me by email (by replying to this message) or telephone (704) 523 -0112 and permanently destroy or delete the original and any copies or printouts of this email and any attachments. It is important to be aware that email communication can be relatively easily accessed by unauthorized people and hence can compromise the privacy and confidentiality of such communication. Emails, in particular, are vulnerable to such unauthorized access due to the fact that servers have unlimited and direct access to all emails that go through them. A non-encrypted email, such as this, is even more vulnerable to unauthorized access. Please notify Kristen if you decide to avoid or limit, in any way, the use of email. Unless I hear from you otherwise, I will continue to communicate with you via email when necessary or appropriate. Please do not use email for emergencies. In the event of an emergency dial 911 or go to your nearest emergency room. Kristen McClure MSW, LCSW Licensed Clinical Therapist 5200 Park Road Suite 117 Charlotte NC 28209 http://www. <http://www.charlotte-anxiety-and-depression-treatment.com> kristen-mcclure-therapist.com Like my page on Facebook <https://www.facebook.com/kristenmccluremswlcsw>

Have you tried #c-red ^^text^^ ? :)

Yay. Thank you so much. I'm so excited. I love the colors.That worked.

…

On Wed, Apr 21, 2021 at 7:58 AM Cato Minor ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Have you tried #c-red ^^text^^ ? :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/97d493cdc8d770e37ee0d085fc36ed3d#gistcomment-3714357>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATYR5M3B6QPNNSK3NVKH2VLTJ24XDANCNFSM4Q73XM6A> .

-- Notice of Confidentiality: This email, and any attachments, is intended only for use by the addressee(s) and may contain privileged or confidential information. Any distribution, reading, copying or use of this communication and any attachments by anyone other than the addressee, is strictly prohibited and may be unlawful. If you have received this email in error, please immediately notify me by email (by replying to this message) or telephone (704) 523 -0112 and permanently destroy or delete the original and any copies or printouts of this email and any attachments. It is important to be aware that email communication can be relatively easily accessed by unauthorized people and hence can compromise the privacy and confidentiality of such communication. Emails, in particular, are vulnerable to such unauthorized access due to the fact that servers have unlimited and direct access to all emails that go through them. A non-encrypted email, such as this, is even more vulnerable to unauthorized access. Please notify Kristen if you decide to avoid or limit, in any way, the use of email. Unless I hear from you otherwise, I will continue to communicate with you via email when necessary or appropriate. Please do not use email for emergencies. In the event of an emergency dial 911 or go to your nearest emergency room. Kristen McClure MSW, LCSW Licensed Clinical Therapist 5200 Park Road Suite 117 Charlotte NC 28209 http://www. <http://www.charlotte-anxiety-and-depression-treatment.com> kristen-mcclure-therapist.com Like my page on Facebook <https://www.facebook.com/kristenmccluremswlcsw>

Hi there, This is literally the 1st time entering a comment on Github so please forgive my ignorance.
I just installed the CSS and it's pretty darn good. I just have 1 question.
Is there any way to actually hide the #c:"COLOR" in the actual roam text?
I can see that it's hidden in the image above. Was this a feature that was lost with the recent update?
Or is there still a way to use color highlights without the #c:"COLOR" showing up in the text?

You can hide all data tags starting with "c:", for example:

span.rm-page-ref[data-tag^="c:"] {
  display: none;
}

I'm not able to get version 3.6 of this to work, after pasting the code in roam/css (I've not used css before, so probably doing something wrong).

I'm trying #c-red ^^test^^ and having no luck. Any pointers?

@bambooboy10001 : Sorry for late reply! Please, feel free to write me DM on Twitter, if you have any issues.
Installation:

• open [[roam/css]]
• create a new block like "Colored fonts"
• create a "code block" and set it up to CSS
• copy and paste the version 3.6 there :)

@ciceronianus Thank you for this css!
One quick question: what was the reasoning behind your decision to change the syntax from c: to c-(an update in version 3.5)?