Sanctum Theme

Really nice! I like it a lot–love the font.

Two issues I’m seeing:

  • Padding of sidebar tabs is rather extreme. At the top of this screenshot you can see how much space is between the tab icons; such that one of the icons is nearly completely crowded out of visibility; it has been pushed past the right edge of the sidebar.

image

  • Highlighted text, due to the text styling, looks kind of blurry and is hard to read. IMO, doesn’t match the feel of the rest of the theme. Maybe this is borderline up to personal preference, but maybe you will think it’s a little hard to read too. See example.

image

Thanks for a cool theme!

1 Like

Hi! I’m glad you’re enjoying the theme so far!

  • Regarding the button padding, I’ve made it intentionally so that there’s a good white space balance, and so button hierarchy is preserved (needs to be bigger than the “subordinate” icons below it). I have also realized, however, that people who like/need to use a lot of plugins/tabs and don’t have much screen real estate to spread them around, end up experiencing that problem. Having said that, I’ll still keep it as a default, but might add it as a Style Settings option.
  • For the highlighted text - I agree with you, and have been thinking of an alternative!

I’ve added both to my theme’s kanban. :slight_smile: Thank you for your feedback, and I hope you continue to enjoy Sanctum!

2 Likes

Thanks for your consideration. :slight_smile: I have one more question at the moment. As you’ve correctly guessed, I’m on a fairly small screen (small laptop). For this reason (but not only this reason), I would really love to modify this theme to reduce the size of the headers and mess with their bolding. I looked at the CSS but it’s over my head. There are so many different entries for headers. Is there a way to do this?

There will be! Someone has already requested it over on the github repo, and I’m thinking of a good way to change the headings, so they still keep their adaptable sizes. I just need to mess around with the variables and see if what I’m thinking of works. :slight_smile:

1 Like

Sanctum v0.2.2 is here, and finally available in Community Themes!

Changelog:

  • Fixed issue where renaming an active file in the file explorer made the background dark and the text invisible;
  • Changed “g”s to an alternate glyph;
  • Made buttons use iA Writer font;
  • Changed highlights so they better fit the theme. They now follow the style of National Geographic! :blush:
  • Changed the way codeblock background is setup. Cursor and selections should now be visible;
  • Style Settings additions:
    • Line width selector is now a slider;
    • Added Highlight Text Colors to aid with legibility, depending on the colors selected;
    • Added “Disable Animations” option to style settings;
    • Added a “No Background Blur” option;
    • Added “Status Bar on top” option. This removes the bottom bar, but makes the icons unclickable;
    • You can now change the side padding of header tab icons;
    • Added “Show Full Titles”, which makes the entire file/folder title visible. You can also hide folder or file icons, as well as show their full titles;
    • Added Customizable Heading Sizings. They now adapt according to percentage, still adapting to screen size;
    • You can now disable scrollbars (in settings, global search view, notes and file explorer!);
    • You can now toggle Relationship Lines for the File Explorer;
    • You can now center tables on toggle, as well;
  • Preview Font now applies to Kanban Boards;
  • Removed padding from inline code;
  • Unlocked note text size. You can now Ctrl+Scroll like in regular ‘vanilla’ obsidian;
  • Other small changes.
1 Like

@looper: this is a way to change header sizes

/* Change header size in Edit mode */
.cm-header-1 {font-size: 28px; font-weight: bolder;}
.cm-header-2 {font-size: 25px; font-weight: bolder;}
.cm-header-3 {font-size: 22px; font-weight: bolder;}
.cm-header-4 {font-size: 20px; font-weight: bolder;}
.cm-header-5 {font-size: 18px; font-weight: bolder;}
.cm-header-6 {font-size: 16px; font-weight: bolder;}
  
/* Change header size in Preview mode */
.markdown-preview-view h1 {font-size: 28px; line-height: 118%; font-weight: 600;}
.markdown-preview-view h2 {font-size: 25px; font-weight: 600;}
.markdown-preview-view h3 {font-size: 22px; font-weight: 600;}
.markdown-preview-view h4 {font-size: 20px; font-weight: 600;}
.markdown-preview-view h5 {font-size: 18px; font-weight: 600;}
.markdown-preview-view h6 {font-size: 16px; font-weight: 600;}

If you are not interested in the font-weight you can delete those elements, but leave the closing } in.

Furthermore, if you click on the Gitlab link in the topmost comment on this page you’ll find many interesting snippets.

2 Likes

@Klaas Awesome, thank you so much! I really appreciate that and will add it. Will check out the snippets as well.

You can also change them with Style Settings, with the new update.

1 Like

Nice nice nice!

Sanctum v0.2.3 is here!

Changelog:

  • Added discordapp.com external link icon support. Don’t be afraid to make requests on those!
  • Added graph colors customization in Style Settings;
  • Hopefully fixed the misalignment of folder icons some users were experiencing in the file explorer;
  • Updated Community Themes menu styling. It still maintains the proportions of the menu, but now has hover effects and buttons are more legible. I’m curious to see if people want the menu to be bigger, so just send me a message if that’s the case, and I’ll add a style settings option for it;
  • Empty page actions now have accent color on hover;
  • Accent color hover (the color that sometimes shows up when hovering elements that usually have accent color, e.g. footnote links) now has a customization option in Style Settings. I’ll work on getting it to apply consistently throughout the theme;
  • Sidenotes have had a little facelift, and now have 1 more type - left sidenotes! If you want it to align to a paragraph, make sure to add it before that paragraph, on Edit Mode. Add the sidenote text using the following syntax: <s class="aside-right"> Text </s>. There are 4 types: aside-right, aside-left, aside-in, and aside-hide. Only using aside also works, but is more limited (doesn’t support basic markdown formatting). Footnotes still don’t work like Tufte style, though;
  • Other small changes.
1 Like

Thanks for the theme! I don’t know if this is a Sanctum issue or Style Settings, but my headings’ font size reverts to default whenever I close the app, even though the settings slider still shows the correct/custom position?

@Sandro Mmm, I hadn’t noticed that! The css is setup properly, hence why you can change the heading size, so it not saving the setting, I believe, is a plugin issue. Make sure to submit an issue on its github page so alert its developer.

1 Like

This theme ticks all the boxes for me. It makes Obsidian a truly pleasant workspace. Thanks for the considerable effort and expertise you’ve obviously put into this.

One note: a kanban with with five columns (produced with the also-excellent kanban plugin) doesn’t scroll sideways. Clipped columns are pushed down the page, which isn’t ideal presentation for a kanban.

Other than that, there’s little not to love about Sanctum.

1 Like

@amc That was actually intended, in order to keep all columns visible, although I understand where you’re coming from. Perhaps a Style Settings Option for seeing the columns at the same time would be best practice.
I’m glad you’re enjoying Sanctum, and thank you for the feedback! :slightly_smiling_face:

1 Like

@Sandro I contacted the developer, and identified the issue. It was a tiny change, but it should now be fixed if you update the theme :wink:

1 Like

I’d certainly like to have the ability to have all columns on a horizontal plane, even if I can’t see them all. That way, I reliably know where they are. Having them bump down the page when the window is too narrow to accommodate them all is unexpected. That said, it’s your time, and I’m grateful for what you’ve done so far.

I can confirm it works now, thanks!

I’m not sure what you mean by that. Could you perhaps show a screenshot of the intended behaviour and what currently happens?

Sanctum v0.2.4 is here!

Changelog

  • Fixed pinned command icon so it’s not on top of the command name;
  • Suggestion prefixes now use accent color so it’s easier to identify the plugin it comes from. Please let me know if further contrast is necessary, like changing it to text color accent when hovering the command suggestion line;
  • Updated <progress> so even if you don’t use a value out of 100, it will use the accent color. If you want a colour progression, though, you can still use multiples of 5 in a 100 scale, like before;
  • Sidenotes have been formatted once again, so that they’re close to the main text body, and match the theme overall. When using long sidenotes, make sure to alternate between left and right, so the texts don’t overlap! It will also result in an interesting editorial feel, as a side effect;
    • Sidenotes now have different styling options in Style Settings!
  • Fixed issue with “Split vertically” and “Split horizontally” icons where they were switched. They are now in their right place;
  • Added Style Settings option for Kanban Lane Wrapping. This will make lanes follow a new row once they don’t fit the width of the pane. The horizontal view, more true to the kanban concept, is now default;
  • There’s an issue with Bold text on some users. This is due to iA Writer’s variable fonts interacting in a weird way with macOS (AFAIK). To circumvent this, it is advised to download the static font files here, and add them via Style Settings. I’ll add a disclaimer to github and on the forums so this is clear; THIS HAS NOW BEEN HOTFIXED!
  • Fixed Kanban “add card” hover colour, and added a focus colour for when the textarea is being used. By default, the button will also always be shown, even if the number of items exceeds the height of the container. It used to hide before, and one had to scroll in order to move some items. It is not the case now;
  • I’ve also removed every !important section from the kanban-related code, and will work on removing it entirely from the theme;
  • Made some changes to Kanban lanes. They’ll now stop expanding vertically, so the “+Add a card” button stays in sight at all times, and the items get a scrollbar (note that it won’t show up if “No Scrollbar in Notes” is enabled. It will still work, though.
  • You can now hide frontmatter using Style Settings, under the “Elements” section;
  • CodeBlocks and URLs now have the same font size as regular text;
  • Added Blockquote, paraphrase and cite styling. When paraphrasing, simply use the following syntax: <blockquote class="paraphrase"> Text here </blockquote>. You can add an author/attribution inside a blockquote, by using <cite>Author</cite>, and it will justify the name/link to the right. Best not to add a paraphrase right after a blockquote, since they’ll both merge. You can add a comment (%%Comment%%) between them and they’ll stay separated, and not show anything in Preview;
  • Note Titles are now smaller to match UI font size. There’s also a Style Settings option “Wrap Note Titles”, that enables you to see the full note title, for those who use long sentence titles that don’t fit the default header;
  • Removed External Link Icons from the community themes modal;
  • Added Dataview support! There’s also a Style Settings option to alternate the colors in each row;
  • Added Footnotes title option to the Style Settings;
  • You can now disable the WYSIWYG hr in Edit Mode, or have it look like default obsidian, but centered (sort of like a screenplay);
  • Added Block Reference Counter support;
  • Other small changes.

3 Likes

This theme is excellent, and quickly getting excellenter. Spit and polish applied to the deepest corners of the app. Thanks.

1 Like