Homepage    |    GitHub    |    API    |    FAQ

Way to differentiate between internal note and files with cutstom CSS?

Support
#1

I’ve been playing around with the custom CSS sheets feature for the last few days:

image

I noticed you can change the color of internal and external links with the usual a { }, and you can change internal notes with a[data-resource-id] {}.

But is there a way to change the color of links to other Joplin notes and attached files separately? So for example, I could leave the external URL link green, leave internal Joplin notes blue, but make the link to files another color separate from the types of attachments?

And as a side question, is there a way to change the color of the icon separately from the color of the link text entirely?

#2

It looks like the non-Joplin resource links have a type="x", so you can select based on this. Here is an example of a calendar attachment:

<a type="text/calendar" data-from-md="" data-resource-id="" title="cal.ics" href="#" onclick="..." ><span class="resource-icon fa-file"></span>cal.ics</a>

You can see it has type="text/calendar", so I am able to style it with

a[type="text/calendar"]{
color: red !important;
}

To color the icon associated with that type, I can use

a[type="text/calendar"] span{
    background-color: red !important;
}

I haven’t gone through to figure out what all the resource types are, but it worked for styling calendar events and PDFs (type=“application/pdf”).

styled-resource-links

1 Like
#3

For internal links, I had defined a[href="#"] { ... } to catch internal links like:

<a data-from-md="" data-resource-id="6760a776d805464fbf0c4e817ed21f5b" title="" href="#" onclick="ipcProxySendToHost(&quot;joplin://6760a776d805464fbf0c4e817ed21f5b&quot;); return false;" type=""><span class="resource-icon fa-joplin"></span>Hybrid checklists (workarounds)</a>

I don’t know whether it’s better or worse than a[data-resource-id] { ... }. Anyway, these posts triggers another question. How could I catch links to headers within the same note, such as:

<a data-from-md="" title="#checkbox-within-table-cell" href="#checkbox-within-table-cell" onclick="" type="">de volgende H2-header</a>

The limited expressiveness of CSS seems to make it impossible, unless Joplin defines a special class for this situation, or add some other distinctive attribute to the tag.

1 Like
#4

@memophen How are you creating an internal link inside a note? Manually?

#5

@uxamanda Using the information you provided I was able to change the icon color between internal and external links. However, I am unable to get internal files to change color based on file type/extension alone. Is there anything else you’re defining that may cause you to get that result?

As for how I’m creating the internal links, I’ve tried it both ways but what I screenshotted in my original post was automatic through a drag and drop.

#6

I wouldn’t think it would be better or worse to declare your own variable such as #, but that can really only be answered by someone who actively works on Joplin.

uxamanda has mentioned that Joplin does appear to define based resource types such as .pdf & .ics, but finding and cataloging what every file type is defined as is easier said than done. Once again, something like that would be best answered by someone who actively works on Joplin.

#7

We have a List of CSS elements which should have a class which will hopefully be added at one point in the future.
I suggest to add a name for those elements as well so that they can be referenced properly.

#8

I do have other CSS going, and I am colorizing .resource-icon, maybe that is what you are looking for?

Here's my full CSS for the HTML-ized markdown, in case it is something else: joplin-theme/userstyle.css at master · amandamcg/joplin-theme · GitHub

If you meant the icons for the individual file types, you might check to see if you have the span after the specific type to target the icon.

a[type="text/calendar"] span{
    background-color: red !important;
}

Also, I searched the code to see if I could find what all the resource types are. I am not positive this is the right list, but it seems likely. Unfortunately (fortunately?) there are 762 different types, :stuck_out_tongue: joplin/mime-utils.js at master · laurent22/joplin · GitHub. I searched the code for a while, but could not find where some of them are getting a fancy icon. Will take someone who's more familiar with the code.

1 Like
#9

Are you recommended I add the suggestion?

1 Like
#10

Yes, this would make sense, but you should know that it’s merly a wishlist and no guarantee that any of them will be added.

#11

I was referring to the text itself with:

a[type="text/calendar"]{
color: red !important;
}

However I must have misspelled something before, as now that I’ve come back and tried it again I was able to get it working with individual file types:
image
It’s not bulk modification where I can make all files a certain color, and all notes another. But it will do for now. Thank you for the list up supported file types by the way.

tessus has also bung up a community a wishlist of the things we’d like to see tagged for use with CSS which I’ve added onto, hopefully at some point in the future we’ll be able to get more support for this kind of functionality.

#12

Understood, I’ve added the recommendation to the list, I guess only time will tell if any of it will ever get implemented.

#13

@uxamanda, I must confess that I have forgotten how I learned about this feature. But what I know today is this:

Every header (H1 … H6) has an ID automatically derived from the title. E.g. when you create a H2 header “Deep Thoughts about Everything”, its ID is “deep-thoughts-about-everything”:

<h2 id="deep-thoughts-about-everything">Deep Thoughts about Everything</h2>`.

The Markdown reference

... [exciting stuff](#deep-thoughts-about-everything) ...

will produce:

... <a data-from-md="" title="#deep-thoughts-about-everything" href="#deep-thoughts-about-everything" onclick="" type="">exciting stuff</a> ...

Clicking on that link brings you to the header. It only works for headers this way as far as I knew, but while writing this post I included this HTML in a note:

<a name="here" id= "there">Yes, this is the right place!</a>

Both Markdown links [here](#here) and [there](#there) do their job.

1 Like
#14

That could work for individual notes in <style> tags where I need individual headers to have different colors, fonts, etc.

Thank you for bringing it up as another work around for the time being.

#15

Cool! Looks like this trick even works with linking to a header in a separate note
[another note](:/notehashnumbers#title-to-link-to).
Now if I could guarantee I never changed the header text, lol. Wish this was automated.

Styling this sent me down a new CSS rabbit hole. Apparently you can do some limited regex style selection (https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).

That got me to this:

a{
   color: lightblue !important
   /* external links */
}
a[href^="#"] {
    color: red !important;
  /* internal links */
}

a[data-resource-id] {
    color: blue !important;
    /* joplin links */
}
a[type="text/calendar"] {
    color: purple !important;
   /* resource link (calendar) */
}

Basically, style the external links first and use increasingly specific selectors to override:
rainbow

2 Likes