A fully-fledged Obsidian.md theme, evolved from the original theme variant for Chris Grieser (pseudometa)'s theme Shimmering Focus

  • By Melvin Ting
  • Last update: Nov 15, 2022
  • Comments: 15

Willemstad-X

Willemstad X (Extended)

Named after the capital of Curaçao (which is known for its colourful houses), the extended Willemstad is a fully-fledged theme and extension of the original Willemstad snippet/theme variant proof-of-concept for Chris Grieser (pseudometa)'s Obsidian theme, Shimmering Focus. You can sponsor Chris here!

NOTE! Willemstad X is not supported for the legacy editor (CodeMirror 5), or for mobile. While mobile support might be coming in the longer future, you are advised only to use Willemstad X on desktop, and in the current default editor.

To use:

For the most current version, use the Community Theme store in Obsidian. (preferred/highly recommended method!)

Alternatively, download the release, and drop obsidian.css into your .obsidian\themes folder in the vault you wish to have the theme in.

Should I use this or Willemstad for Shimmering Focus?

It's up to you! I intend to maintain Willemstad for SF without too much effort (read: not minimally, but almost minimally), since I don't think there are too many more features I'd like to add, or can add without conflicting with Shimmering Focus' base options. I don't want to conflict too many changes with Shimmering Focus as well! But if you are a power user and use most of Shimmering Focus's stuff, I'd suggest you stay with Shimmering Focus. Chris is way better/faster at doing CSS stuff than I am, too!

Willemstad for SF got featured twice in Eleanor's roundup (1, 2) (yes, the Roundup), versus once for Willemstad X (1) so if that's the deciding factor, then go for that!

⚠️ Almost all UI styling (sans modals) that are present in Willemstad X, are not in Willemstad for SF. Willemstad X also encodes the DM family of fonts and Manrope, but this is not included in the Willemstad for SF files.

Why is Inter embedded into Willemstad X, isn't that included in Obsidian proper?

Yes, it is. Inter is included in Obsidian proper. However, most people will download Inter onto their computers, and Obsidian will use the font with the name that is present in your computer. Moreover, most people (including myself) download/-s/-ed Inter from Google Fonts, which is probably the most outdated version you can get of the font. (No proper italics, need I say more?!) By embedding Inter, alongside the other fonts, allows me to quality control and ensure the quality of your experience.

I'd like to change something or propose something. What's the easiest way to do so?

If it's something you reckon people would need/want as well, the easiest way to request changes is to use the Issues tab here on GitHub. If you would like to change something that you can reckon you rather do it yourself, the best way would be to use a snippet. I recommend the snippets by Mara Li, and the theme overlay Absolve by mulfok.

Alternatively, and if you are familiar with Sass/SCSS, you can compile Willemstad yourself via the files in the build folder, and fork the repo and edit the relevant files you want to. To understand what each specific SCSS file consists of, consult here.

Supported Community Plugins

Like Primary, Willemstad aims to get the core features right before delving into plugins. However, I totally agree that some plugins are almost essential to the Obsidian experience, and they were my daily drivers too, so they got some attention.

  1. Style Settings
  2. Calendar
  3. Sliding Panes
  4. Admonitions
  5. Dataview
  6. Breadcrumbs
  7. Get Info
  8. CookLang Plugin
  9. Emoji Toolbar
  10. Maps of Content
  11. cMenu
  12. Footnote & Citation Indicator
  13. Longform
  14. Settings Search

The community plugins I have an intention to support can also be seen here.

Things to complete + WIP

  1. Colour Palettes (revamping the Oxford one from Willemstad SF, and creating the Le Corbusier Colour Keyboard one)
  2. Adding support for Minimal Cards from Minimal (might not come to fruition as it relies on plugins)
  3. Fixes for mobile (albeit not offering official support yet)
  4. ... and a bunch of other stuff in my Obsidian file that I didn't write it here. However, most of what I have in mind can be found here.
  5. Theme Documentation

Just another word

Having a theme out within 2.5 weeks of trying to do something with CSS (from the time I left Sanctum, which I honestly think jdaniel did an amazing job with) is probably something I didn't think was possible even a week before this was published. That being said, Chris (of Shimmering Focus fame), Cecilia (of Primary fame), and SlRvB (of ITS Theme fame) prophesied I would end up with a theme and had more faith in me than I did. I owe them a word of thanks. Thanks y'all, and I hope I didn't let anyone of you down. 😊

Attribution

As is with most theme codes in Obsidian, many pieces/snippets of code have been cobbled together from whatever the hive mind has created. It is therefore not possible to accurately and fully attribute everyone's efforts, which might have come into and been adopted by this theme. That being said, there are multiple pieces of instrumental code that I can attribute to, which I do so here:

Github

https://github.com/tingmelvin/willemstad-x

Comments(15)

  • 1

    [BUG] Dark theme problems

    This theme is so wonderful, it's tempting to want it to be perfect.

    image

    I mostly use dark theme. I'm not sure that styles for pane header (unfocused), YAML, etc, change for dark theme. They are almost invisible.

    Also, the text in the heading is not centre aligned for both dark and light.

    See you on the dark side!

    Thanks again.

  • 2

    [FR] Kanban lane wrapping

    I'm really enjoying your theme, thank you. I've come from Sanctum, but there's one element I miss.

    Is your feature request related to a problem? Please describe.

    Kanbans run horizontally across the screen

    Describe the solution you'd like

    Sanctum style Kanban lane wrapping helps contain the kanban in a single pane.

    I couldn't find a setting for it, or a snippet. Let me know if there's a workaround.

  • 3

    [FR] - Some additions to table handling

  • 4

    [FR] How to disable startup screen?

    The problem Can't disable the startup screen. My old computer was screaming with the slow-loading startup-picture.

    Describe the solution you'd like Provide a disable button.

    Checklist

    • [x] I have checked that the feature is not already available via the Style Settings plugin.
  • 5

    [FR] - Set font size on tables, change whitespace and ability to set max col width

    Feature Required

    • The ability to set font size for and
    • The ability to set the max column width that any single row can be
    • The ability to squeeze all the whitespace that you can

    Note: Preview view and reading view must look the same with these settings

    Is your feature request related to a problem? Please describe.

    • Yes, tables created with Dataview that query against a lot of YAML and have many columns become an issue
    • Also some of my "plain" tables have many columns with a few being descriptions of something

    Describe the solution you'd like

    • These to be exposed through to the Style Setting plugin

    Describe alternatives you've considered

    • I have a snippet, but it's not elegant and messes some things up - I.E. I'm no CSS expert

    Additional context N/A

    Checklist

    • [x] I have checked that the feature is not already available via the Style Settings plugin.
  • 6

    [FR] Tag Pills Styling

    Is your feature request related to a problem? Please describe. / Describe the solution you'd like β€œSorry to load you with more, but is there any way of styling the tags? I use tagpills snippet, but that only applies to read mode.”

    Hived off part of #7 here since it is not a bug - @kmaustral do you mind elaborating what tag pills this refer to? Preferably with multiple screenshots too

  • 7

    [FR] always show sidebar pane tabs

    Is your feature request related to a problem? Please describe. I find it frustrating to always move my mouse very slowly to the top of the sidebar where the tabs a hiding. quickly clicking or switching between tabs is impossible. (but maybe its just me)

    Describe the solution you'd like Option in Style Settings plugin to "always show sidebar tabs".

    Describe alternatives you've considered One alternative for me would be to show tabs when hovering over (any spot of) the sidebar (and not just the top-area). Of course in this case the tabs would have to hover in over the sidebar-content and not (as now) move the sidebar-content lower.

    Checklist

    • [x] I have checked that the feature is not already available via the Style Settings plugin.
  • 8

    [FR] support the `max` and `wide` cssClass

    Is your feature request related to a problem? Please describe. max and wide cssClass in frontmatter is not respected

    Describe the solution you'd like respect them, like in minimal: image meanwhile, willemstad image

    Describe alternatives you've considered

    Additional context

    Checklist

    • [x] I have checked that the feature is not already available via the Style Settings plugin.
  • 9

    [BUG] nav buttons hidden on windows in latest alpha-8 on obsidian v1

    Describe the bug nav buttons are hidden

    Screenshots see image: image

    To Reproduce

    Expected behavior buttons would be shown

    Which OS (operating system do you use?)

    • [x] Windows
    • [ ] macOS
    • [ ] Linux Please note: Willemstad X does not officially support mobile Obsidian at the moment. However, please leave a message still so I can file it to review later on.

    In which editor does this happen? Please note, Willemstad does not support the old editor

    • [x] New Editor (CodeMirror 6)

    In which mode does this issue happen?

    • [ ] Source mode (full Markdown edit)
    • [ ] Live Preview
    • [ ] Reading mode (Preview)

    What is your Obsidian version? v1.0.0

    What is your installer version? 0.14.6

    Checklist

    • [x] In case I am missing an UI element, I have checked that it cannot be re-enabled with the Style Settings plugin. *
  • 10

    [TRACK/THREAD] Theme Documentation

    Theme Docs are not done, but are at https://willemstad.cc

    Let me know what else needs to be added, or things you'd like seen added ASAP since it might be quite useful.

  • 11

    [SHOPPING CART] Shimmering Focus

    image for Shimmering Focus (https://github.com/chrisgrieser/shimmering-focus) by @chrisgrieser

    ~~1. Add these callouts (https://chrisgrieser.github.io/shimmering-focus/css-classes/#standard-callouts) 2. Add these image~~

    things to look at:

    ✨ New

    • :oblink: Differentiation of link types for increased scannability (see image below)
    • 🐁 Vim Mode has been styled. Also, Vim Cursor styling options.
    • new line numbering style: block indicators, i.e. subtle lines showing the length of blocks, can be useful for Vim Mode (opt-in via Style Setting) ~~- now respects the Obsidian font settings, i.e. the theme's fonts get overridden if you have selected a custom font in the Appearance tab.~~
    • πŸ” hover-image zoom: Zoom by hovering an image for a second. (opt-in style setting) Alternative to the currently existing image zoom methods (Max View, Click & Hold, Style Settings, etc.)
    • block IDs hidden until hovered/active line (can be shown permanently again via Style Setting)
    • 🟨 post-it callouts (beta)
  • 12

    [FR] option to show tab close buttons on hover on inactive tabs

    Is your feature request related to a problem? Please describe. currently, to close an inactive tab (using the mouse), you have to first select it. this adds an unnecessary click

    Describe the solution you'd like a Style Settings option where merely hovering an inactive tab would show the close button

    Describe alternatives you've considered using a hotkey to close tabs (still have to select the tab first iirc)

    Additional context i could just write a css snippet for this but i feel it would be better if this was an option in the theme itself

    Checklist

    • [x] I have checked that the feature is not already available via the Style Settings plugin.
  • 13

    [FR] support alternate checkboxes

    Is your feature request related to a problem? Please describe. alternate checkbox styles are not supported see: image image

    Describe the solution you'd like image see https://minimal.guide/Block+types/Checklists#Checkbox+icons for which ones to implement

    Describe alternatives you've considered adding this as an optional style setting since not everyone might want it

    Additional context

    Checklist

    • [x] I have checked that the feature is not already available via the Style Settings plugin.
  • 14

    [FR] Sidebar font size

    When a page is opened in the sidebar, the font size increases.

    Is there a specific setting to change the sidebar font size for a page?

    There is one for navigation, but it doesn't change the page in the sidebar.

    Thanks

  • 15

    [BUG] `aria-label` icons/styling doesn't appear in non-English vaults

    As described. Requires icons/buttons to have a separate data-attribute field/class, which needs to be dealt upstream.

    Affects mostly the ribbon.

    Future actionables too: Phase out, and DO NOT use aria-labels for styling

Popular Tag

Related