#216

Beautifully done! :+1::+1::+1:

I have no css knowledge at all, therefore I would like to know if I
could make the h1 headings centered instead of left-aligned by an additional snippet? If yes, what could that snippet look like?

#217

Hey @SamAdams This should do the trick:

.markdown-preview-view h1 {
  text-align: center;
}
#218

Hi @mgmeyers,
thanks for this quick response and your wonderful theme. Keep going, you do a super job.

#219

Hi @mgmeyers,
one more question: The snipped for centering the h1 works in preview only. I tried to modify it to make it work in edit and preview without success :hot_face:

Could you give me a hint to make it work in both modes?

Thanks in advance
Helmut

#221

For edit mode, try:

.markdown-source-view h1 {
  text-align: center;
}
#222

Hi @Obsidian-GT,
No, doesn’t work. I added some other modifications to the h1 header because I use it as title for my notes and want it to be very different from normal headings:

.markdown-source-view h1 {
font-variant: small-caps;
letter-spacing: 3px;
text-align: center;
text-shadow: 2px 2px 4px gray;
}

In preview that works fine but in edit it has no effect. I probably should mention, that I use the new editor from v.013.14 with live preview. But it also doesn’t work with the legacy editor.

Thanks anyway
Helmut

#223

Hmm, I’m not sure if this will break the editor or not, but you can try:

.cm-s-obsidian .cm-header.cm-header-1 {
  text-align: center;
}
#224

Hi @mgmeyers,
No, unfortunately that does not work either. But that is not a big problem. It would have been nice if the formatting would have worked in edit mode too but it is more important that it looks the way I want it to in preview mode.

Thanks again. If you find a solution at some point, it would be nice if you would post it here.

Many greetings Helmut

#225

Actually, try this. Just tested it out, and it seems to work ok:

.HyperMD-header.HyperMD-header-1 {
  text-align: center;
}
1 Like
#226

Hi @mgmeyers,

It works :smiley:. You are the very greatest :clap: :clap: :clap:.

Thank you very much for your perseverance and help.

Many greetings and Merry Christmas
Helmut

#227

What’s the snippet used to get rid of the padding between list items in preview mode? I’m using a different theme but want the spacing between list items to be consistent across edit and preview modes (right now, there’s no padding between list items in edit mode but there’s quite a bit of padding in preview mode).

#228

Great theme! I’m enjoying it a lot. The only nitpick I have is that the font ligatures are not working. Is there a way to make it work with the Segoe UI font?

#229

Which ligatures are you referring to? Do you have a screenshot or example text?

#230

I love this theme! The default options got 99% of what I wanted to customize (but not always knew how). Thank you, @mgmeyers!

I have a question on modifying the background color of the editor and the previewer. By changing color-white-rgb, I understand that background-primary will be modified, giving rise to a different background color. However, the following code only works on a Mac, not on an iPad or iPhone. What is missing?

:root {
  --color-white-rgb: 251, 251, 249;
}

I also tried the following direct modification but it again only works on macOS.

.theme-light {
  --background-primary: #fbfbf9;
 }
#231

Thanks for replying!

So if I use the regular font (-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif) the Ligature ‘->’ is not formed. It is displayed as “- >” (Without the space). However, if I change the font to Inter, the ligature will be displayed properly.

So, the question is, is there a way to use the theme’s default font and still enjoy the use of ligatures?

#232

Hmm, well it really depends on if the font supports the desired ligature (inter supports quite a few). Another option to consider is the smart typography plugin. It’ll replace -> with an actual arrow character. This means you can use any font you’d like and still get some of these special characters.

#233

Even on mac, if I change color-white-rgb or background-primary, the color of the top of the left sidebar will be changed too. Since I just need a slightly off-white background (like the sepia background in Apple Books), the two colors on the sidebar are not very different, and I can live with it. However, it would be nicer if we could independently modify the background of just the editor/previewer.

For the default California Coast theme, the grayish editor background on the iPhone looks OK to me, but it is a problem on the iPad because my editor is side by side with the left sidebar (the file explorer which is pinned). So I get a clean-looking sidebar transitioning to a grayish editor, and to make things worse, there is a gradient effect from the sidebar to the editor. I am bothered by the default iPad background, which in my opinion ruins the crisp and minimalistic feel of the CC theme. Please help.

#234

You should be able to modify the editor/preview background with this:

.workspace-split.mod-root .view-content {
    background-color: #f0f; /* put your desired color here */
}

As for the ipad, I see what you mean about the pinned sidebars. I didn’t know you could pin them like that! I’ll add a fix for this soon.

#235

That’s an amazing suggestion! I really appreciate it. I didn’t know this plugin existed.

Once again, thanks for the awesome theme!

#236

Thanks for the tip on changing the background color. I look forward to seeing the iPad fix for pinned sidebar.

In case it helps anybody, I am posting the css snippet to change the editor/previewer background color on macOS as well as iOS/iPadOS. The header statements are needed to ensure that the document header takes on the same color.

.theme-light {
  --bkgd-clr-user: #fbfbf9;
}

.theme-dark {
  --bkgd-clr-user: #1e1e1e;
}

.workspace-split.mod-root .view-content {
    background-color: var(--bkgd-clr-user);
}

.view-header, .workspace-leaf.mod-active .view-header, .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type .view-header {
    background-color: var(--bkgd-clr-user);
}

.workspace-leaf.mod-active .view-header {
    background-color: var(--bkgd-clr-user);
}

.view-header {
    background-color: var(--bkgd-clr-user);
}*emphasized text*