Theme: Willemstad

[tingmelvin]

Hi all!

I just wanted to introduce a new theme I made:

Willemstad

Named after the capital of Curaçao, which is known for its colourful houses, Willemstad is a theme that aims to inject the appropriate amount of colour for signposting and to make note-taking enjoyable. Here, it aims to strike a balance between too overly colourful; and too overly minimalistic.

So how does Willemstad look and what features does it have?

Showcase

---

The original colour palette

The original colour palette of Willemstad is based on accents of green, with highlighting over the current pane you’re looking at, as well as different header text and background colours that were chosen to ensure there isn’t a clash, whilst maintaining high levels of fast visual recognition.

Willemstad’s interpretation of the Nord colour palette
More recently, I’ve also introduced my interpretation of Nord, for those who love the colour tones of Nord but isn’t too keen on the brighter headers of the most popular Nord theme in Obsidian.

True Black dark mode
Willemstad also supports a True Black dark mode since v0.1.3.

Original colour palette

Nord colour palette

Minimalistic floating sidebars
One of the interesting features Willemstad has is its floating sidebars (which can be turned off via Style Settings), that gives you more screen real estate to do the important things in Obsidian if you’re using a small laptop like myself.

Other features include:

1. Comprehensive Style Settings support
   Many items in Willemstad can be changed/turned off/toggled on via the use of the Style Settings plugin provided by @mgmeyers, available in the Community Plugins store.
2. Multi-colour Highlighting (with credits to @Atlas and @pseudometa)
   Three highlighting colours and options available!
3. Readable Underlines (co-written with @Cecilia_May)
   Underlines are known to be less readable, so Willemstad provides you two alternatives to the standard Obsidian variety:

Standard Obsidian:

Additional spacing (similar to Shimmering Focus):

Willemstad’s standard:

4. Support for the Longform plugin and writing cssclass (with credits to @pseudometa)
5. Dataview Word Wraps (with credits to @SlRvb)
6. Removing shadows where possible, including in Admonitions and Sliding Panes (the latter with input and help from @Damikiller37)

---

Obsidian is meant to be used with community plugins, so Willemstad naturally has provisions to support community plugins. At the moment, the repetoire of community plugins supported are as follows :-

Community plugins supported

• Style Settings
• Calendar
• Sliding Panes
• Admonitions
• Dataview
• Breadcrumbs
• Kanban
• Advanced Tables
• Get Info
• CookLang Plugin
• Emoji Toolbar
• Maps of Content
• CMenu
• Footnote & Citation Indicator
• Settings Search
• Longform
• … with more coming soon!

Look how clean the Admonitions box is, without shadows. This comes pre-set in Willemstad.

---

Sounds good! Where can I download it from?
Willemstad is now available on the Community Theme store, so the best way to get easy updates and all is through downloading Willemstad within Obsidian itself.

To do so, go to Settings → Appearance → Themes: Manage → Willemstad.

Alternatively, you can download it from the Github repository, where you can download the obsidian.css file and drop it into your .obsidian/themes folder, and use it directly!

If you’re more willing for a challenge, you can also build your own version of Willemstad using Sass from the repo.

Suggested plugins to use it with
The following plugins are also suggested to use with Willemstad :-

1. Style Settings
2. Indentation Guides

Note!
Do note that Willemstad is recommended for use only in the new editor, and not the legacy one! It does not work for mobile at the moment, although that is planned for the future.

Either way, I hope you enjoy, and as always, feature requests and bug reports (best done via GitHub) are very welcome!

[mzantsi]

I like the look of this theme. My major problem is that selected text is not highlighted. I can’t find a setting for this in Style Settings. Is there a way of enabling it?

[tingmelvin]

Hiya! The selected text should be highlighted by default - I haven’t changed anything in the theme CSS that should cause it

Is it possible to take a screenshot of what selecting text looks for you? Do you happen to use a snippet by any chance too?

[tingmelvin]

Major update — please update the theme!

Updates to the Willemstad theme:

Willemstad X v0.2.0 Christianshavn
New features and improvements (since last major update, v0.1.5)

• Added Minimal Cards and Image Grids by kepano from Minimal
• Admonition tricks improvements: ad-table no longer requires specifying colour + name — these are hidden by default! That means anything that uses ad-table will render like Reading mode in Live Preview; ad-infobox by SlRvb added
• New improvements to typography stuff: Gradient headers, fourth highlight colour, styling for headers in Admonitions to be consistent with normal headers
• Significant improvements to Style Settings styling and many many new Style Settings options, including turning off header background colours
• Small bug fixes: buttons/interactive elements should largely have a consistent colour scheme + elements now
• Coloured loading bar (customisable with Style Settings)

New plugin support

• LanguageTool Integration

Coming up soon!

• RemixIcons for Willemstad icons
• Support for aside tags
• Theme Documentation (you can already have a sneak peek of it being a work in progress, at https://willemstad.cc)
• Turning off folder and file icons

[tingmelvin]

Updates to the Willemstad theme:

Willemstad X v0.2.4 Christianshavn

Summary of new features and improvements (since last major update, v0.2.0)

• Styling improvements to Community Plugins modals and info, Startup screen, and Style Settings, Backlinks pane
• Startup Screen: Overhauled it, with animation! Also added Startup screen customisation options: choose your own image/background colours/linear-gradients/gif/whatever!
• Multiple bug fixes
• Multiple smaller improvements

New plugin support

• Full Calendar

Other comments

• Willemstad got accepted to the Community Themes store on 12th February, so today marks the 1st month since it’s available to the world. I guess I’d just like to say thank you! — it’s really incredible how I had almost-zero CSS knowledge 1.5 months ago and now Willemstad’s been downloaded 1.3k times

See full changelog: Release v0.2.4 Christianshavn · tingmelvin/willemstad-x · GitHub

[sirredcrosse]

Hi, I was looking at your site and noticed that the section on CSS Classes is mostly blank (particularly, I mean the CSS Class “Minimal Cards”. What exactly does this class do in your theme? Create flashcards? I’m not familiar with CSS but Google was mostly unhelpful)

[tingmelvin]

Hiya! Sorry for the late reply. The theme documentation is not remotely done, but Minimal Cards work exactly like it does in Minimal (I’ve linked their theme guide here): Cards

[sam.leibowitz]

Just wanted to say that I tried Willemstad on mobile (iPad) the other day, and holy smokes is it great. Thanks for your contribution.

[tingmelvin]

thank you for your kind words! that made my day!

as always, if you have any suggestions to improve it, you’re welcome to leave it here, on GitHub, or via Discord

[tingmelvin]

Finally, big changes done! Please update!

MANY, MANY BREAKING CHANGES! in order to make Willemstad’s defaults apply without Style Settings. I am so so sorry, and hopefully there wouldn’t be a need to change anything more moving forward.

Updates to the Willemstad theme:

Willemstad X v0.4.0 Nyhavn

New features and improvements (since last milestone update, v0.3.0 Bryggen)

• Willemstad’s defaults are now (almost-)globally applied with Style Settings — almost, because I probably forgot something with my two braincells
• New default mini-sized titlebar — appears when hover. Drags the screen if you position your cursor rightly, at either side of the buttons!
• Custom Readable Line Lengths — no more ‘RTL is TOO SMALL and no RTL is TOO BIG’ woes!
• Callout rationalisation (inspired & :carrrl: from @SlRvb#3223) — ongoing project, but you now can use >[!(insert callout class name)|no-title] to remove titles globally.
  • aside-no-title has been removed because of this (use >[!aside|no-title] instead), but kanban-no-title has been retained for legacy purposes
• More Advanced Settings options, including YAML frontmatter font colours and small font sizing customisation
• More Responsive Style Settings
• Other bug fixes and small changes (see full changelog on GitHub)

Other comments

• Multiple areas for issues, please file a bug report if you encounter them:
  • The entire set of SCSS files (~50+) has been refactored and redone and all, so if there is an issue, it’s probably me screwing up. Let me know!
  • I haven’t had an issue with the Admonitions 9 update, but according to javalent it is supposed to break stuff.
  • I am told by @pseudometa that some stylings might not stick on macOS.
• Should be working on theme docs imminently!
• 12018 lines (10k reached — 21st March)

See full changelog: Release v0.4.0 Nyhavn · tingmelvin/willemstad-x · GitHub

[tingmelvin]

tl;dr: Print stylesheet and a compatible Obsidian Publish companion CSS now available! Certain dark mode fonts should be more readable now.

---

Updates to the Willemstad theme:

Willemstad X v0.4.3 Nyhavn

THE TL;DR BIT | New features and improvements (since last milestone update, v0.4.0 Bryggen)

• Print stylesheet added — no more weird page breaks!
  • Will be expanded on in the future
• Obsidian Publish CSS added — use the publish.css file.
  • See Willemstad’s under-construction theme docs (https://willemstad.cc) or my notes vault (https://notes.tingmelvin.com) for examples
• Contrast between some text in original dark mode should be significantly more visible (meets WCAG 2.1 contrast guidelines)

Other comments

• I understand that there might be some issue with the titlebar (especially with Macs), as mentioned was possible by @pseudometa. Please use the original titlebar option in those cases, I might revert to the original in a future update.
• 12270 lines (10k reached — 21st March)

See full changelog: Release v0.4.3 Nyhavn · tingmelvin/willemstad-x · GitHub

[tingmelvin]

Willemstad v0.5.0 Jordaan
Happy and relieved to finally announce what is probably the biggest update to the Willemstad theme! I hope I can convince you to give it a try? https://willemstad.cc/infosheet/v0.5 allows you to interact with the callouts as well.

New features

• Icons
  • replacement of default icon sets, especially in the ribbon
  • fixed missing animations + hover colours
  • hovering over the graph button also shows the graph shape-shifting now
• Callouts —
  • Standard callouts now styled
    • Callout colours are also set dynamically, so even your specially crafted custom callouts from Admonitions should display well!
  • Addition of new callout classes
    • from Shimmering Focus (:carrrl: @pseudometa), new [!phone], [!mail], [!email], [!file], [!attachment], [!goal], [!link], [!quote] classes
    • additional Willemstad-specific [!code] class;
    • [!important], [!success] classes styled differently, and with subtle animations
  • Addition of opp/opposite metadata class — e.g. [!note|opp] will display the note’s content before the title
  • Multi-column callouts
    • these will not wrap to the next row, and respect that you want them in columns
    • use [!columns] or [!columns|no-t] for no titles
• Mobile-style Sidepanes (:carrrl: @damikiller37 and @SlRvb)
  • available via Style Settings, for this, opening sidepane workspace will no longer shift notes left or right
• Publish theme significantly updated
  • ~4k lines now, but it encompasses all the inbuilt callouts and styling available in core Willemstad.
• More Pleasant Highlights
  • more pleasant colours set as default; old-style highlight colours available via Style Settings
• New Focus Mode options
  • Disappearing Title Headers; Hide ‘Exit Focus Mode’ Ribbon/Button
  • more minimalist than Shimmering Focus?

Big Fixes

• Complete rewrite of main UI elements (sorry Silver) to ensure things are responsive and not off-centre, vertically centred titles/things should definitely be vertically centred now
• All default Obsidian box-shadows on elements should be completely busted now!
• Headers in LP, Source mode, and Reading mode should be the exact same height and font size now
• Prism.js codeblocks styling fixed, and includes the code language now

Smaller Additions and Fixes

• Added highlighting syntax in highlight colour field for Style Settings
• Added HTML progress bar colours
• Fixed Headers collapse indicators sizing and svg placement
• Additional Style Settings for Focus Mode for True Focus (removes the exit button as well)
• Workspace Tab Headers:
  • for right-aligned headers, should now align right by default if one changes the sidepanes size to be too small for it
  • removed the :before or :after element to make the first icon flush with the border

Other comments

• Lines: 15244/20000 (+2947 lines from v0.4.3, +59 lines vs Shimmering Focus) @pseudometa I’m on your case!

See interactive changelog: v0.5
See full changelog: Release v0.5.0 Jordaan · tingmelvin/willemstad-x · GitHub

[tingmelvin]

Willemstad v0.5.2 Jordaan
Exam/coursework season so not many big updates, but more bug squashing!

New features

• Added Cornell Notes CSSClass
  • to use, use the cssclass: cornell syntax
  • see example: https://willemstad.cc/Examples/CSSClass-Cornell
• Empty state container (the thing that appears when you have no notes opened) now has some styling
• Added monospace metadata class for callouts (use >[!note|monospace])
  • see example: https://willemstad.cc/Theme+Extensions/Callouts#monospace
• Made non-expandable ribbons draggable (so you don’t need to use titlebars anymore if you want to resize your content)

Big Fixes

• Mobile should be working properly, again! Apologies for the wonkiness between v0.5.0 and v0.5.2
  • Mobile scrollbar is now hidden (it was too small to use on mobile, and plus one navigates via touch anyway!)
• Fixed major issue with modal search results display via Ctrl-O
• More print improvements
  • Headers now print with the appropriate background colours
  • CSS Class still doesn’t print properly due to an Obsidian issue (https://forum.obsidian.md/t/make-export-to-pdf-respect-cssclass/38002)
• Fixed overflowing content for frontmatter

Smaller Additions and Fixes

• Style Settings added for Focus Mode
• Fixed the wrap for Calendar plugin dots — now they won’t warp vertically when you adjust the calendar pane to be smaller
• Changed svg icons for svg.filter and svg.wand
• Fixed height for svg.folder
• Changed modal paddings
• Fixed button wonkiness
• Changed sidepanes margin calculations and placement for better aesthetics
• Changed backlink panes border radius to 1.25 instead of 3 to fit the rest of the content with such curved borders (blockquotes, callouts)

Other comments

• Lines: 16025/20000 (+781 lines from v0.5.0)
• I’m starting to add more stuff to the still-in-progress theme docs, like CSS class examples. Let me know what else should go there!
• I’ve made progress on experimental indentation guides (that can be adjusted), but it’s not quite right yet. Hence I’m deferring this until I can make satisfactory progress to it

Docs (Work in progress)
https://willemstad.cc

See full changelog: Release v0.5.2 Jordaan · tingmelvin/willemstad-x · GitHub

[trickstur]

This is a pretty cool theme. I was wondering, how does somebody put stuff on the right sidebar?

[tingmelvin]

heyyo! sorry for the late reply, but what right sidebar were you referring to?

[sirredcrosse]

Oh wow… seeing all those callout changes, I might just change back!
And after I was just getting used to Typography too lol

if only I could mix the two…

[trickstur]

The left and right sidebars that you hover over and they appear. The left one has all the icons in it, but the right doesn’t have any. Is there a way to put them in the right side too?

[Feralflora]

You can simply drag and drop many elements of the UI to the right sidebar.

[tingmelvin]

@Feralflora @trickstur Unfortunately I don’t think that’s the case for the two ribbons — I don’t think you can move something from the left to the right ribbon at the moment Maybe there’s a plugin for it? Someone might know a recommendation to that

@sirredcrosse may learning CSS interest you?

---

Also, just a few updates in v0.5.3. Have been a bit slow due to exams, but now my papers are over, and once this stomach troubles end, maybe a bit more can be done!

Willemstad v0.5.3 Jordaan

New features

• Updated styling to fit/fix Obsidian v0.15 (thanks @damikiller37)
• Added option to permanently show sidebar tabs in Style Settings
• Added equation counting in LaTeX CSSClass notes (@pseudometa I finally found the problem ahhhh)
• Updated Publish file to v0.5.3 — fun fact: 2 months later, Willemstad still remains the only theme with a separate Publish CSS file

Big Fixes

• Removed random new stuff added by Obsidian v0.15
• Removed custom icon pack for iOS/iPadOS due to Safari non-support of path() (thank you again to @damikiller37!)
• Justified tables in Infobox callout

Smaller Additions and Fixes

• Fixed community plugin info and readmes margins and stuff, and buttons in community plugins
• Added popover margins and borders

Other comments

• Lines: 16320/20000 (+295 lines from v0.5.2)
• (as mentioned in v0.5.2) I’m starting to add more stuff to the still-in-progress theme docs, like CSS class examples. Let me know what else should go there!
• There hasn’t been a report about Willemstad’s fonts breaking which has been a thing in some other themes, which might partially be due to a failsafe I included since Obsidian v0.14.4/Willemstad v0.3.1. Do let me know, however, if something is broken.

Docs (Work in progress)
https://willemstad.cc

See full changelog: Release v0.5.3 Jordaan · tingmelvin/willemstad-x · GitHub

[TheEmperor]

Been curious because I can’t seem to see it, but what does HTML progress bar do or appear?
Or is this the startup loading bar?