I took a whack at making linkding look more like LinkWarden. I didn’t want to modify the source, so I did the whole thing using CSS only. It was an adventure.

I’ve mentioned linkding a few times, and am now hosting all of my bookmarks with it. I switched from a hosted solution to running it on my Synology via a Docker container (super easy to set up with Container Manager and Web Portal, if you’re a Synology user).

linkding allows for custom CSS, and I wanted to play with it a bit. By default it looks a lot like Pinboard, which is a bit plain. I kind of liked the way LinkWarden looks, so I gave that a shot.

Links are displayed as “cards” instead of lines, with the snapshot image large at the top. The full image is clickable. In bulk edit mode, the entire card becomes clickable. On mobile it switches to one or two columns (based on resolution and orientation), which isn’t great for browsing a large collection, but that’s just how cards are going to work and still be readable. On a wider desktop monitor you can get four columns and browsing is really nice. Given I mostly search by title or tag and don’t spend a lot of time just scrolling through, it works great for my personal needs. You can see it in action here.

Tags are moved into a sliding panel on the right, just hover over the “TAGS” tab to expose them. This all has to be done with CSS, so it’s not a perfect implementation, which would require a little bit of javascript. But it’s totally working.

If you want to play with it, here’s the code. If you do, here are. the settings I recommend with it:

  • dark mode
  • separate description
  • use snapshot images
  • use favicons (optional)

To add the CSS, just copy and paste it into the Custom CSS box in settings. When you hit save, the new style will be applied. You can remove it at any time just by clearing that box and hitting save.

The process of moving everything around and restyling it led to a lot of z-index and positioning considerations when opening confirmation dialogs and what not. I think I found all the issues and solved them, but let me know if you try it and run into any issues.

I made use of CSS variables as much as possible, so modifying the color scheme should be relatively painless. Note that the variables use raw rgb numeric values, not actual rgb(xxx,xxx,xxx) rules. This is so that I can insert the raw values into rgba() rules and apply transparency. So if you’re changing them, remove the rgb() from your rule and just include the xxx, xxx, xxx part.

By the way, if you’re making your bookmarks public and want visitors to see the new layout, be sure to set the guest user to your profile.

Have fun! Again, here’s the code.