tingmelvin / willemstad-x

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

Please note: Willemstad is currently undergoing a rewrite (from ground-up) for Obsidian 1.0, and the look and feel might be somewhat materially different from now. The UI from current alpha-version available in the Community Store right now will remain.

The theme documentation is available here.

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. (this is the preferred and 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.

---

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.

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. This might be slightly outdated.

---

Supported Community Plugins

Please refer to the Willemstad theme documentation.

The full list of supported community plugins can be found here.

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:

• Multi-Colour Highlighting, adapted from Zhang Chenyu (@Atlas)'s and Chris Grieser (@pseudometa)'s code
• Varying/Readable Underlines, co-written by myself and Cecilia May
• Dataview Word Wraps, from SlRvB
• No-Shadow Sliding Panes, with input from Damian Korcz
• No-Shadow Admonitions, inspired by Leah's lamentations to Jeremy Valentine
• Longform plugin and writing cssclass support, adapted from Chris Grieser (@pseudometa)'s code, and also with credits to Kevin Barrett (@kevboh)'s styling
• and many other snippets that were written by Chris Grieser
• Nord theme colour palette, adapted from the original documentation written by Sven Greb
• Minimal Cards and Image Grids, from Stephan Ango

Theme Documentation (currently a work in progress)

Available here, includes information on callouts.

Mentions in the Obsidian Roundup

4th June | 14th May | 23rd April | 16th April | 04th April | 26th March | 12th March | 5th March | 26th February | 19th February

and of the original Willemstad snippet for Shimmering Focus: 12th February and 5th February

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. 😊

---

License

This repository is licensed under the terms of Mozilla Public License version 2.0. Most of its constituent snippets (callouts, CSSClass, etc.) are licensed under the terms of the MIT license, either by myself or its respective authors.

willemstad-x's Issues

[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:

meanwhile, willemstad

Describe alternatives you've considered

Additional context

Checklist

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

[TRACK/THREAD] Print stylesheet

I've introduced a Print stylesheet for Export to PDF from v0.4.2. Please let me know if you face any bugs or have any feature requests relating to print here.

I haven't tested if Print works with Style Settings, but will do that soon.

---

Current bugs:
Headers do not display background colours
flexbox stuff (like Kanban callouts) are not rendered correctly

[FR] Native Willemstad Callouts

Change callouts to Willemstad's own colours.

Colours in my bookmarks, in Discord.

Note: where to get icons, or what icons to use?

[SHOPPING CART] Shimmering Focus

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

---

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)

[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.

[BUG] Mini-bar Style Settings issue

Thanks. That works well. But just one thing, the mini-bar setting for the
title bar doesn't seem to work any more. I have to use the default bar.

On Wed, 20 Apr 2022 at 21:56, Melvin Ting @.***> wrote:

@kmaustral https://github.com/kmaustral let me know if the dark mode
works better now — if so, I'll close this and hive off the FR to the next
issue

—
Reply to this email directly, view it on GitHub
#7 (comment),
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ARTR6N2XKTWRHD64E2G2DU3VF7WE3ANCNFSM5SHPHY2A
.
You are receiving this because you were mentioned.Message ID:
@.***>

Originally posted by @kmaustral in #7 (comment)

---

actionables:

1. solve the minibar thingum
2. grab someone's Mac and see how it looks like in macOS (see previous comments by @pseudometa)

[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

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

[FR] - Some additions to table handling

I have not been using your theme for a while, but I've noticed that you have been making numerous improvements

I would like to play with it again, and it would be great if you'd consider what was done to the ITS theme based on my request. See SlRvb/Obsidian--ITS-Theme#70 (comment)

Thanks :)

[BUG] Dark theme problems

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

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.

[FR] Add Advanced Settings for colours

Splitting off from #3.

Just to remind myself the actionables so I don't forget. Given that the refactoring of the colours scss is finally complete, this finally can be done after a month >.<

1. requires the removal of rgb variables (ie the blah-blah-rgb variables) — does Obsidian even use these?
2. change all non-hsl colours in the code
3. needs styling (including their own remixicons, probably using col-h6 too) for Style Settings
4. split colours into text, background headings etc? (also would require their own remixicons)
5. put it at the back? after Minimal Grids? — would require an additional Style Settings scss page (split off from the current Style Settings one) to put it there

[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

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

[FR] Rationalisation of Publish theme to use Willemstad `SCSS` files

Title says it all.

Use scss files from current Willemstad theme to create Publish theme

• probably requires different font ones (since I want to pull them from Google, not base64 woff2 them)
• deal with adding callouts into it as well
• h6 requires !important or the like to deal with the additional .markdown-rendered specificity in Publish

[FR] Nord colour improvements

As title says. Need to sort out Nord, a la how dark Classic was sorted.

In general - more contrast

[FR] Title Alignment

@kmaustral

This was more I was thinking of, rather than just centred in Sanctum.

Originally posted by @tingmelvin in #7 (comment)

---

actionables

1. Do one that affects the titlebar per se (margins etc.)
2. Do one that affects the placement of title text in the titlebar
3. Style Settings for both

[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

[FR] Chinese localisation

As requested by @YIRU69

加中文翻译
简体 + 繁体

从 Blue Topaz 学一下？Can use some of the Willemstad SF stuff

[BUG] Spacing (margin and padding) for GitHub source button in community theme and plugin store not unified with rest of UI

Describe the bug

[SHOPPING CART] Prism

for Prism (https://github.com/damiankorcz/Prism-Theme) by @damiankorcz

1. callout colour schemes (which are really pretty, as an alternative to Willemstad new native callout colour schemes, when it's done)

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

Describe the bug
nav buttons are hidden

Screenshots
see image:

To Reproduce

Expected behavior
buttons would be shown

Which OS (operating system do you use?)

• 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

• 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

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

[BUG] Something wrong with your css and it causes an error in Style Settings

Line in dark mode [FR]

Another detail for the dark side, the markdown --- creates a line that is invisible in dark mode.

Thanks for a great theme.

[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

[BUG] Mobile Hotfixes

I know there's an issue with Willemstad being horribly janky on mobile:

https://discord.com/channels/686053708261228577/702656734631821413/952976561794072626

Going to fix it, but I don't really know how to, as well. Not intending to support mobile yet, but I don't want to bork up people's mobile Obsidian.

[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

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

[BUG] Icons are wonky on iOS due to mis-masking

As title states.

Reason being Safari doesn't support it (and Capacitor runs on Safari on iOS, whereas the rest uses Chromium) - see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

---

Actionables:
Rectify as per how Damian rectified it

[FR] support alternate checkboxes

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

Describe the solution you'd like

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

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

[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

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

[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.

[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