search

dario-ds / logseq

This is simply to publish my templates to the world :)
103 stars 261 forks source link

Own zettelkasten design in Logse #1

Closed 12-13-mm closed 1 year ago

12-13-mm commented 1 year ago

Hi, I came across an article about zetelkasten (note taking method) and a very sophisticated visual design of a note taking system that I would like to apply to mine in LOgseq. Therefore, I would need someone to consult the css codes for a purposeful color conversion as it looks in the pictures. My existing color design doesn't suit me and so I would like some color changes. Do you know how to do it? I know the only way would be through programming and I don't really understand that. MK - there is an article https://www.thrivinghenry.com/writings/roamkasten-a-practical-how-to-guide-to-optimize-zettelkasten-in-roam-research image image image

dario-ds commented 1 year ago

Hi there. The best place to ask questions like this is in the forums. I have a guide on CSS available here: https://blog.logseqmastery.com/post/adding-custom-css-to-logseq/ but I'm not able to made suggestions on the above.

12-13-mm commented 1 year ago

I would just like to ask you very much to quickly check and possibly quickly correct any mistakes I may have made: FLEETING NOTES a.tag[href="/page/Fleeting%20Notes/"] { background-color: #fff; color: #000; padding: 2px 5px; font-size: 13px; line-height: 1; font-weight: 500; border-radius: 5px; border-style: solid; border-color: rgba(242, 29, 161, 0.25); border-width: 1px; position: relative; box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf; }

a.tag[href="/page/Permanent%20Notes/"] + span.title { background-color: rgba(29, 161, 242, 0.12) !important; color: #F5F8FA !important; padding: 3px 5px; font-size: 13px; line-height: 1; font-weight: 400; border-radius: 0 3px 3px 0; margin-left: -5px; }

a.tag[href="/page/Permanent%20Notes/"]:after, a.tag[href*="/page/Permanent%20Notes/"]:before { left: 100%; }

12-13-mm commented 1 year ago

/ FLEETING NOTES / a.tag[href="/page/Fleeting%20Notes/"] { background: #fff; color: #000; padding: 2px 5px 2px 5px; font-size: 13px; line-height: 1em; font-weight: 500; border-radius: 5px 5px 5px 5px; border-style: solid; border-color: #f21da140; border-width: thin; position:relative; box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf; }

/ LITERATURE NOTES / a.tag[href="/page/Literature%20Notes/"] { background: #fff; color: #000; padding: 2px 5px 2px 5px; font-size: 13px; line-height: 1em; font-weight: 500; border-radius: 5px 5px 5px 5px; border-style: solid; border-color: #215f0040; border-width: thin; position:relative; box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf; }

/ REFERENCE NOTES / a.tag[href="/page/Reference%20Notes/"] { background: #fff; color: #000; padding: 2px 5px 2px 5px; font-size: 13px; line-height: 1em; font-weight: 500; border-radius: 5px 5px 5px 5px; border-style: solid; border-color: #f26e1d40; border-width: thin; position:relative; box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf; }

/ PERMANENT NOTES / a.tag[href="/page/Permanent%20Notes/"] { background-image: linear-gradient(90deg, #1DA1F2, #1DA1F2); color: #FFFFFF; padding: 2px 5px 2px 5px; font-size: 13px; line-height: 1em; font-weight: 500; border-radius: 3px 0 0 3px; position:relative; box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #dfdfdf; }

a.tag[href="/page/Permanent%20Notes/"] + span.title { background: #1DA1F21E !important; color: #F5F8FA !important; padding: 3px 5px 3px 15px; font-size: 13px; line-height: 1em; font-weight: 400; border-radius: 0 3px 3px 0; margin-left: -5px; }

a.tag[href="/page/Permanent%20Notes/"]:after, a.tag[href*="/page/Permanent%20Notes/"]:before { left: 100%;

12-13-mm commented 1 year ago

I got it!

12-13-mm commented 1 year ago

Just, is there any way to learn css codes and how to get these styles from roamkasten to Logseq when I get some knowledge?