indigofairyx commented 3 months ago

hello again!

I've been playing with adding pretty flair to #tags by adding outlines with a snippet, in combination with this colored tag plugin https://github.com/pfrankov/obsidian-colored-tags.

I've spent two days pulling my hair out with this. finally got it half working after half a dozen snippets attempts

1st i tried copying pieces of the maple theme css into a snippet. that didn't work at all. also their outline is awesome, trying to grab that as a snippet as well but it didn't work

2nd i found a snippet example of the forums and finally figured out outline styles!!! unfortunately the outline will only render in reading view, which i almost never use. in maples theme they render in both reading and edit mode. ill attach the snippet and examples at the bottom.

could you suggest what i need to add to the snippet to get it to render in editing mode?? please or maybe you want to integrate this into magic user too as it adds more awesome flair. and that outline menu!

snippet samples, the tag_outline.css is the one I'm running currently. tags - snippet samples.zip

thanks xavier

here a couple example screen shots ...

from the maple theme split in editing\reading mode Obsidian_2024-05-30_04-18-18AM_1549x1133

from magicuser split in editing\reading mode

drbap commented 3 months ago

I'm committed to improving the tag feature for MagicUser theme. It's actually on my list of planned enhancements (if you check the Projects tab).

If you could share your ideal way for tags to look, I can explore building a native solution entirely from scratch. This ensures seamless integration and makes it a core part of the MagicUser theme, without relying on external CSS snippets from other themes. Additionally, I could consider options for user customization of tag appearance.

Thanks for sharing your thoughts/feedback.

All the best

indigofairyx commented 3 months ago

and after fiddling with this snippet for a few more hours, copied from the maple theme, i got them working on both views after 2 days! 😀

indigofairyx commented 3 months ago

the tagging feature of obsidian is great! it doesn't exist in onenote. would be great to dress it up.

this is spinnets and the colorful tags plugin running. they pop out nicely.

snippets off here...

and this is stock with both snippets and plugins turn off

i mixing the bright colors with outline options is the way to go... maybe even had your heading glow effect behind them! i llove that feature of your theme. its looks great.

i have little idea on how to code that. what ive been playing with mostly copy and paste, trial and error.

cant wait to see what you come up with.

thanks x

drbap commented 3 months ago

Glad you found the solution that is working well. Congrats 👍 👍

Thank you so much for the screenshots and for motivating me to start working on this feature (tag). I will have to think how to let the users define the background colors for their tags. I will try to add the option to outline the tags and also neon mode as well (when this mode is activated).

I have some ideas, I hope to start working on this later at night or during the weekend.

Stay tuned!

drbap commented 3 months ago

Quick Preview

magicuser_theme_tags_preview01

Still many things to test and add more features. But it is a start...

drbap commented 3 months ago

Well, I think the icons/emojis will look better on the right side of the tag.

indigofairyx commented 3 months ago

Very nice! I like the icon\emijo accents. That's looking great. I think\prefere the an icon be after the tag text.

And one more detail I wish is I could figure out is how to make the # of a tag just a tiny bit bigger then the tag text, not much, maybe 2 or 3 px.

The only way Ive been able to figure out how to get emojis in the tag is copy &paste them at the end (without a space). And still they don't right inside the #codeblock👨‍💻 in editing view, the will render correctly in reading view. #codeblock👨‍💻

drbap commented 3 months ago

test_tags_01

Yes, I agree. I prefer on the right too (after the text).

drbap commented 3 months ago

test_tags_02

The star rating is better with rating on the right too

drbap commented 3 months ago

Thanks for the suggestions. The hashtag symbol is difficult to target... I will see what I can do.

indigofairyx commented 3 months ago

It's distracting before the #, especially if you want edit a tag, click where now? Lol

The maple theme as a cool toggle in the settings that will allow you to click into a tag in editing mode as it were text to edit. The default obsidian function when clicking a tag anywhere is to activate the internal search with that tag name.

I found it in the theme, was able to copy it into a snippet

indigofairyx commented 3 months ago

Type one phone. Pain in the ass. Ha.

How they have that function set up separates the hashtag from the text.

That little piece of code is in the CSS file on the first post of this thread

drbap commented 3 months ago

Interesting. But the search feature can be useful when clicking on the tag (I like it).

Yes, the tag pill is not one single piece (not one span or div element). So I can't add some effects on it in an easier way. It takes more time, you have to target the first part of the tag and the end part.

I will continue tomorrow night. I also want to add some neon effects and maybe the option to hide the hashtag. I removed the hashtag but the user experience was not good at all, in my opinion, it was difficult to edit the tag text (I didn't like it).

Still have to test more and check which options to add to Style Settings customization. Depending on the number of possibilities it will be better to create a Tags submenu, like tables and others.

If you have suggestions for some preset tag names, here is the list of tags I added so far:

General todo and task status:
- todo
- inprogress
- ready
- completed
- implemented
Alerts
- attention
Academic:
- article
- reference
- review
- research
- watch
- test
Solo/Team tags:
- solo
- team
Schedule:
- date
General purpose:
- study
- work
- family
- finances
- video
- art
- idea
- magic
Stars rating tags:
- s1
- s2
- s3
- s4
- s5

indigofairyx commented 3 months ago

its still works by clicking the # if you click in the word it acts a text.

while i was trying to modify this code to add outline, at one point i got outlines between the |#|tagname| it was related to this click to edit function.

here the snippet ive been playing it. ive noted the area that i could was to identify what they were doing. dont laugh its a mess. .... im likely also missing important elements from else where in the theme that i dont know how to find

after two day of moving elements around and testing everything random i some got it working.


/* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/13 */

.tag {
  background-color: var(--text-accent);
  border: none;
  color: rgba(152, 224, 50, 0.668);
  /* color: white; */ 

  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;

/* this is what i added to get the out outlines to render in reading mode.
they do not render in editing mode, which is were i leave obsidian 95% of the time. */

  /*outline: 1px;*/
  outline: 2px;
  /*outline: 3px;*/

  /*outline-style: dotted;*/
  /*outline-style: solid;*/
  /*outline-style: groove;*/
  /*outline-style: inset;*/
  /*outline-style: double;*/  /*i will end up picking one of these styles, just checking out the options*/
  outline-style: ridge;

  /*outline-color: rgba(208, 208, 208, 0.679);*/
  outline-color: sandybrown;
}
/* end forum snippet post */

/* hacked out of the maple theme */

/* @settings

name: ✏️ Maple Editor
id: maple-editor
settings:
    -
        id: setting-code-inline
        title: inline code color
        title.zh: 行内代码文字色
        type: variable-themed-color
        format: hex
        opacity: false
        default-light: '#'
        default-dark: '#'
    -
        id: tag
        title: tag
        title.zh: 标签
        type: heading
        collapsed: true
        level: 2
    -
        id: tag-click-to-edit
        title: click to edit tags in Live-Preview mode
        description: click '#' to jump
        title.zh: 点击标签进行编辑
        description.zh: 点击'#'跳转
        type: class-toggle
    -
        id: tag-style
        title: tag style
        description: tags of obsidian / todo / important / progress / complete will be colorized when use outline or fill
        title.zh: 标签样式
        description.zh: 当选择 outline 或者 fill 时，obsidian / todo / important / progress / complete 标签会有额外颜色
        type: class-select
        allowEmpty: false
        default: tag-outline
        options:

            -   label: outline
                value: tag-outline

    -
        id: setting-tag-bg
        title: tag background color
        title.zh: 标签背景颜色
        type: variable-themed-color
        format: hex
        opacity: false
        default-light: '#'
        default-dark: '#'
    -
        id: tag-outline-setting
        title: outline style setting
        title.zh: 边框模式设置
        type: heading
        collapsed: true
        level: 3
    -
        id: setting-tag-color
        title: tag text color
        title.zh: 标签文字颜色
        type: variable-themed-color
        format: hex
        opacity: false
        default-light: '#'
        default-dark: '#'
    -
        id: setting-tag-border
        title: tag border color
        title.zh: 标签边框颜色
        type: variable-themed-color
        format: hex
        opacity: false
        default-light: '#'
        default-dark: '#'
*/
/* end settings region */
/* --------------------------------------------------  */

/* note sure what these are doing? */

body:not(.tag-outline) .setting-item[data-id=tag-outline-setting] {
  display: none;
}

body:not(.tag-outline) .setting-item[data-id=tag-outline-setting] + .style-settings-container {
  display: none;
}

.code-theme :is(.markdown-rendered, .markdown-source-view.mod-cm6) :is(.token:is(.tag, .constant, .symbol, .deleted, .class-name, .maybe-class-name), .cm-tag, .cm-operator) {
  color: var(--code-tag);
}

/* --------------------------------------------------  */
/* #region tag */

body {
  --tag-color: var(--accent-active);
}

/* this line lets you click the `#` to search, can edit text,  */
/*
.HyperMD-header .cm-hashtag {
  font-size: var(--tag-size) !important;
}
*/

/* have no idea what this line does */
/*
.cm-line span.cm-hashtag {
  vertical-align: baseline;
}
*/

/* this line turns off the #tag being a hyperlink to search bar. if on you can click\edit the text without setting of the search panel */
/*
body.tag-click-to-edit .cm-line span.cm-hashtag:not(.cm-formatting) {
  pointer-events: none;
}
*/

/* effects code block size and spacing of the tag */
:is(body, .print .markdown-rendered) {
  --tag-padding-x:  0.4rem;
  --tag-padding-y:  0.05rem;
}

/* toggle option from the style settings to hide or not have outlines around tags */
/*
body.tag-plain {
  --tag-background: tag-outline;
}
*/

body.tag-outline {
  /*--tag-border-color: var(--setting-tag-outline, var(--accent-inactive))  !important;*/

  --tag-border-color: /*var(--#888888)*/ var(--setting-tag-outline, var(--accent-inactive)) !important;

  --tag-border-width: var(--size-2-1)  !important; 
  --tag-color: var(--setting-tag-color, var(--accent-active))  !important;
}

body.tag-outline {
  --tag-border-color: /*var(--#666666)*/   /*var(--color-purple) */ !important;
  --tag-color: var(--tag-border-color);
  /*--tag-color: var(--#888888);*/
}

/*not a big fan of the light purple outline, am trying to change it but broke it, the outline went white, too bright! */

/* this is cute but the colored tag plugin over-rides setting custom colors
which they state on their read me.
i like the plugin way of coloring all tags anyway
so I'm not going to bother setting individual colors */

/*
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}
.tag[href^="#todo"] {
  background-color: rgb(255, 255, 255);
  color: #000000;
}
*/

/* orig code from post before i edited it */
/* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/13 */

/*
.tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}
*/

indigofairyx commented 3 months ago

a bit more on separating the #|fromthetext these options only render in editing view. the reading view is unaffected.

i do that this toggle off at the moment, but can see it usefulness as well

https://github.com/drbap/magicuser-theme-for-obsidian/assets/126439010/85168bdf-4318-47aa-8348-c450ee512284

hmmm, sharex isn't capturing my pointer. anyway, throw that these 3 lines in a snippet uncomment and you can see.

/* this line lets you click the `#` to search, can edit text,  */

.HyperMD-header .cm-hashtag {
  font-size: var(--tag-size) !important;
}

/* this line seprates the `#|tagtext` */

.cm-line span.cm-hashtag {
  vertical-align: baseline;
  /*font-size: medium;*/
  outline: 1px dotted; 
}

/* this line turns off the #tag being a hyperlink to search bar. if on you can click\edit the text without setting of the search panel */
/*
body.tag-click-to-edit .cm-line span.cm-hashtag:not(.cm-formatting) {
  pointer-events: none;
}
*/

indigofairyx commented 3 months ago

and a few more for the general list

Alerts

warning

caution
Academic:

citation

cheatsheet
Schedule:

appointment

meeting
General purpose:

important

favorite

bookmark

wishlist

in addtions to star ratings i like a grade system (based on us school grading system which probably is relevant anywehre else in the world. lol)

gA

gB

gC

gD

gF

drbap commented 3 months ago

Please check theme version 20.3.0. I added the tags submenu and many options. Thanks for the suggestions.

Tags customization

Turn on colored tags (44 preset tags)
Tags shape (0 = square tags)
Spacing between the text and the hashtag (#) - slider controller
Hide hashtags (#)
Tags text foreground color
Tags text foreground hover color
Tags background color
Tags background hover color
Tags border color
Tags border hover color
44 preset tags layout with icons
General todo and task status:
- todo
- inprogress
- ready
- completed
- implemented
Alerts
- attention
- warning
- caution
Academic:
- article
- reference
- citation
- cheatsheet
- review
- research
- watch
- test
Solo/Team tags:
- solo
- team
Schedule:
- date
- appointment
- meeting
General purpose:
- study
- work
- family
- finances
- video
- bookmark
- important
- favorite
- wishlist
- reminder
- art
- idea
- magic
Stars rating tags:
- s1
- s2
- s3
- s4
- s5
School grading system:
- gA
- gB
- gC
- gD
- gF

I hope you enjoy

All the best

drbap commented 3 months ago

magicuser_theme_colored_tags

You have to activate colored tags to see the colors.

indigofairyx commented 3 months ago

Just saw ur post on the forum. They look great thank you!

I'm currently looking a the theme.css to figure out out u get the icons in there. I'll make a snippet for others as I dream them up. For the fun of it.

Ps.. are you really putting magic user on the back burner? Sorry to see u go. Seriously the amount of options you put into this theme is fantastic.

drbap commented 3 months ago

Thank you very much for the comments. I'm glad you liked it.

No, I will still work on the MagicUser theme, but the theme is complete. I have other projects to focus on, but MagicUser will still be active and up to date. But not weekly, maybe monthly.

If you still have suggestions to improve it or if you find any bugs, just let me know.

All the best

drbap / magicuser-theme-for-obsidian

tag outlines request\help #46

todo

inprogress

ready

completed

implemented

attention

article

reference

review

research

watch

test

solo

team

date

study

work

family

finances

video

art

idea

magic

s1

s2

s3

s4

s5

warning

caution

citation

cheatsheet

appointment

meeting

important

favorite

bookmark

wishlist

gA

gB

gC

gD

gF

Tags customization

todo

inprogress

ready

completed

implemented

attention

warning

caution

article

reference

citation

cheatsheet

review

research

watch

test

solo

team

date

appointment

meeting

study

work

family

finances

video

bookmark

important

favorite

wishlist

reminder

art

idea

magic