We switched to a manual approval system for registration on this forum, as this makes it easier to keep bots out of the forum. We'll approve everybody who doesn't look like a bot!

CSS to change the color of tags

edited February 10 in Customisation

This is a very useful piece of software. I am using it to code several thousand notes/emails. I'm using the Marx theme (which makes #tags and bold red) and I would like to make custom CSS so that the #tags are a different color than bold or italic. When reviewing a note/email, I #tag some text for tabulation and make it bold to indicate what prose elicited the tag. Then I enter counts of the tags into a spreadsheet. To make it easier to see the tags for counting purposes, so I'm less likely to miss one, I'd like to make the #tag a different color than bold. I tried the following:

.tag {
  color: green;
}

and

.cm-zkn-tag {
  color: green;
}

Neither worked, and I'm not completely sure what I'm doing. Thanks in advance for any input.

Tagged:

Comments

  • I was rooting around on the discussion thread and found a workaround that seems like it will suit the needs of having the #tags flagged a different color than the bold or italics. The solution is to change the theme so that bold and italics don't inherit color, but remain black. That CSS solution was posted by Hendrik over at Collected suggestions - wikilinks, history, multiwindow, references . I'm reposting the code here.

    #editor .CodeMirror .cm-strong, #editor .CodeMirror .cm-em { color: inherit; }

    As a matter of learning, I would still be interested to understand how to change the color of a #tag... :)

  • Yeah, as a general rule of thumb: I try to use CSS expressions that are as precise as possible to prevent conflicting and unwanted behaviour. This means, that if your rules don't work, you basically have two options: Either use !important (so it overrides the cascade) or (the better alternative), use "Inspect Element" (in debug mode, right click the element), and then copy over the full CSS clause that you'd like to change!

    Here's more information on the DevTools: https://developers.google.com/web/tools/chrome-devtools

  • In your case, this is what I copied over from the devtools to colour them yellow (I don't recommend that colour, though :smiley: )

    body .cm-zkn-tag {
      color: yellow;
    }
    
  • Ok, I think I understand.
    1. One can "Enable debug mode" by going to Settings->Advanced->switching on Enable debug mode.
    2. To inspect the element, right click on it and make note of the class name under the <style> entry in the DevTools interface.
    3. Use that class name to form CSS statements.

    To further isolate #tags, I used the CSS code you supplied to also make mailto's .cma blue. In total, the custom CSS I'm using now states:

    /* Resets the color of bold and italics to the editor's default */
    #editor .CodeMirror .cm-strong, #editor .CodeMirror .cm-em {
      color: inherit;
    }
    
    /* Changes the color of mailto links (in this case blue) */
    body .cma {
      color: blue;
    } 
    
    /* Changes the color of #tags (in this case red) */
    body .cm-zkn-tag {
      color: red;
    } 
    

    Under the Marx theme, setting the #tags to red didn't need to be done explicitly. However, including those lines permits switching themes while explicitly formatting these elements. At least for my failing eyes having these look different really helps isolate tags that I need to count and enter into a spreadsheet.

    Thank you so much for helping with this.

  • Perfect! :) Glad it works!

Sign In or Register to comment.