California Coast Theme

[kent]

Any way to get the forward and backward arrows for the Californian Coast Theme? It’s the one thing I’ve been missing

[Sandro]

They are there, you just have to mouse over them (top left)

[kent]

Not for me strangely. Must have turned something off in the settings.

[mgmeyers]

Are you using the hider plugin? They’re only hoverable when the title bar is visible:

Also, what OS are you on?

[kent]

Ah perfect that fixed it! Would be nice if the arrows would also be visible in frameless mode.

[Learner1]

How to get toolbar in horizontal position? As shown in the image?

I am on windows.

[mgmeyers]

Hey @Learner1! This is done with the hider plugin. Turning on “Hide app ribbon” will place it down at the bottom there and only display it on hover.

[Learner1]

Thank you. It works now.

I have two more things to say.

1. There is no distinction (in preview mode) between internal links and external links in this theme, as compared with obsidian’s original theme.
2. The distance between divider line is much higher. (I already tried the code given above but it is not working for me) It would be much helpful if you could embed it in the theme or share the updated code.

[mgmeyers]

@Learner1 I’ve fixed the issue with the external link indicator not showing. I’ve also added two CSS variables to control the spacing around horizontal rules. You can now do something like this in a CSS snippet:

body {
  --hr-spacing-top: 1em;
  --hr-spacing-bottom: 1em;
}

[mgmeyers]

A minor update.

I’ve created some nicer, custom icons that will show if you have “use file icons” turned on in Style Settings.

[Learner1]

@mgmeyers Working!! Thanks.

I have set values of top and bottom spacing as -1em and 1em respectively. Fits my personal preference.

[pfm]

After trying out so many themes many times, I’ve returned to this one. It’s so wonderfully easy to adjust things with the Style Settings plugin. This theme is the most elegant I’ve found for my work vault and it helps me focus on my work because it’s so beautiful and functional.

The one thing I can’t figure out is how to adjust the color of the URLs and brackets/parentheses for when I’m in preview mode. The gray color is too faint on the white background, and I would love more contrast so I can more easily spot them.

Is there a way I can make that gray darker, either in the style settings, or with a css snippit?

Thank you so much!

[mgmeyers]

Thanks @pfm ! Here’s a snippet to adjust the link formatting. Let me know if you have any issues with this:

/* Wikilink URL */
.cm-s-obsidian span.cm-url.cm-string:not(.cm-hmd-footnote-url) {
  color: var(--shade-30) !important;
}

/* Link brackets */
.cm-s-obsidian span.cm-formatting-link,
.cm-s-obsidian span.cm-formatting-image.cm-link,
.cm-s-obsidian span.cm-formatting-link-string.cm-url.cm-string {
  color: var(--shade-20) !important;
}

/* Footnote link brackets */
.cm-s-obsidian pre.HyperMD-footnote span.cm-link.cm-hmd-footnote.cm-formatting {
  color: var(--shade-20) !important;
}

You can play around with the color values. The theme provides various shades of grey from --shade-10 to --shade-90, though you can use any color you wish.

[pfm]

I was able to successfully do this! Thanks for this snippet, and for the tip on how to adjust the grey. My eyes are happy!

[joeweb]

Hi @mgmeyers !
Thanks for this Tip. I added the snippet and activated it. I can see and use the color picker in “Style Settings”, but I don’t see the selected colors in the theme (preview/editor mode).
Reloaded Update / Plugins…no color headings.
Any idea for me?
/ Jörn

[janpeeters]

I’m always trying to get my edit view as close as possible to preview mode. I’ve noticed that in preview there is almost a full empty line above the list (or under the previous block). I’d love to get rid of this or at least make it a lot less high (some space could be nice).

I’ve tried to find a solution with dev tools but couldn’t find the right css selector. I also checked my css snippets to see if it was some faulty code but also there I didn’t find it. Does anyone know how to solve this?

Thanks a lot, Jan

To show what I mean:

Edit mode

Preview mode

[janpeeters]

Hi all, I’m curious to read what your experiences are with the new Obsidian WYSIWYG mode compared with the California Coast WYSIWYG. E.g. can they be used together or should there first be a setting in CC to deactivate the theme’s WYSIIWYG mode?
I would also be interested in other observations. Thanks!

[mgmeyers]

So the padding actually comes from the paragraph above the list.

If you’d like to change this, I’d recommend using the contextual typography plugin. With that enabled, you can do something like:

.markdown-preview-section > 
div[data-tag-name="p"] + div[data-tag-name="ol"] > 
ol,
.markdown-preview-section > 
div[data-tag-name="p"] + div[data-tag-name="ul"] > 
ul {
    /* You can play around with this value */
    margin-top: -1rem;
}

[mgmeyers]

I was playing around with live preview and it didn’t work too well with CC wysiwyg enabled. I hope to fix this once live preview has stabilized a bit more.

[Learner1]

Hy @mgmeyers,

is there any way to remove the line in preview mode and increase the size of the ‘>’ icon and make it more line centered vertically.

Thanks in advance.