Set of icons for attachments

It would be just a little aesthetic enhancement: when you add an attachment to a note, the icon near the attachment will be not “J” but the icon of the type of file.

1 Like

Yes I’m thinking about changing this. For files I think I’ll put a generic “file” icon for now. For note links, I’m not sure but I’m thinking about putting no icon at all. It’s just a link after all so there’s no need to make it look different, but I’m open to feedback on this.

I like the fact that a link to another note is denoted somehow. It does not have to be the J icon, but it should be marked somehow. Maybe this could be optional via a setting.

2 Likes

This can already be customized via css

I agree with @tessus.

Also (for unnaturally fussy people like me!) having an icon for non Joplin links would aid formatting / layout.

Example:
I have a collection of links; some internal, some not. It produces a “staggered” list.

joplin2

A suggestion could be to have just two icons; one that indicates an internal link to a Joplin note or resource (currently a “J”) and one that indicates an external file or link (like Wikipedia does).

I suppose that this could be extended so the internal link reflects the type of resource it is pointing at (which I think is what the OP was referring to) but it could get out of hand with all the 1000’s of file types someone may want to attach to their note.

2 Likes

maybe also add some extra icon for PDFs ?

For files, there are a lot of sets of icons. For example, here there is a huge set of icons. The icons (not the vscode extension code) are licensed under the Creative Commons - ShareAlike (CC BY-SA) license and, given that they are all .svg. all together have 3MB size.
I don’t know if the license is good for you.

Yes please, this black J icon that proceeds each file attachment doesn’t serve an any purpose and looks bad.

If you change the icon to represent the type of link you give the user a visual cue as to the contents of the link and this is very helpful if you have several links in one note.

see my answere here

Sorry for resurrecting an old thread, but is there a resource which explains how to do this? I would love to be able to change the internal links to just be a different colour (thereby still indicating that they are internal links, but getting rid of the black J which I find highly off-putting), but I am unclear on how to configure Joplin’s behaviour via CSS.

@cwloka welcome to the forum.

You could try adding the below to your userstyle.css . I’ve not tested it to make sure there are not any unforseen alterations elsewhere in Joplin but for me this switches off the resource icons and turns internal links to red. Red is probably not the best colour to use as it normally indicates a broken link, so change it to match your colour scheme / mood!!

.resource-icon {
	display: none; /* switches off resource icons */
}

a[data-resource-id] {
	color: #ff0000; /* displays INTERNAL Joplin links as red */
}

EDIT:
If you only want the Joplin resource icon switched off rather than all resource icons (txt, pdf…), change the first one above to

.resource-icon.fa-joplin {
	display: none; /* switches off Joplin resource icon */
}

I just realised that if you do display the other resource icons you will probably want to change their colour to match the link text.

The below will allow you to play with all the link colours if you wish, just by changing the colour values.

Again, red is probably not the best choice for the internal links but it certainly makes them stand out when trying the CSS and, again, I have not had the time to ensure that these changes do not cause problems elsewhere in Joplin’s Markdown renderer…

a {
color: #0000CD; /* set general link colour - includes TOC links*/
}

a[data-resource-id] {
color: #FF0000; /* change the colour of INTERNAL links */
}

.resource-icon.fa-joplin {
display: none; /* do not display the Joplin resource icon */
}

.resource-icon {
background-color: #FF0000; /* change other resource link icons to the same as the internal link colour */
}

Please remember that once you start CSS “modding” of Joplin it is up to you to maintain. This is because a later version of Joplin may be released that implements a different element/class naming scheme and all or some of the above may stop working…

Thanks! So far that is doing exactly what I hoped it would (albeit I did change the link colours to green instead of red!).

I haven’t had a chance to extensively test and see if this causes other problems, but so far things seem to be functioning as expected.