#11

@hungsu I sent you the whole .md file via DM.

#12

hi @hungsu , just to say thank you. your theme looks beautiful :slight_smile:

2 Likes
#13

Thanks @hungsu for the beautiful theme, and for fixing the list alignment bug so quickly after I reported it!

Wish that themes would prompt you to update so that everyone gets the improved version.

Make sure you :purple_heart: this feature request…

1 Like
#14

Hello. Love the theme.I would like to modify it a little… how can I

  1. Change H1 to be the same font as H2 ?
  2. Reduce the font size for every header, by 1 or 2?
  3. Make the hash (#) in front of headers smaller and a lighter shade of the heading colour?

Thanks!

#15

@smooth_black_rock click on the Github link in the topmost comment here. That will take you to an interesting collection of CSS snippets, including for headings.

#16

Thanks for the tip. I tried randomly playing around with the CSS…to no avail. I have no experience with it. Perhaps someone with knowledge of how this works might be able to point me to the line where I can play around. I’ve attached the file.
Vileplume - orig.css (16.1 KB)

#17

@smooth_black_rock did you really check out the Github site? Did you open the Headers.md file? Did you scroll down that file a bit?

If so, you would have seen the code for Coloured headings for editor and preview in Dracula, which shows code like:

.cm-header-1, .markdown-preview-view h1
{
  font-family: var(--font-family-editor);
  font-weight: 500;
  font-size: var(--font-size-h1);
  color: var(--text-title-h1);
}

You can leave off font-weight and color, and you have the answer to your questions 1 and 2.

For the hash size here is the code:

.cm-s-obsidian pre.HyperMD-header > span > span:first-child {
  font-size: 5px;
}
#18

Your suggestion doesn’t work. This is the section I see in Vileplume.css:

.cm-header-1.cm-header-1,
.markdown-preview-section.markdown-preview-section h1 {
    font-family: var(--font-title);
    font-weight: 400;
    text-shadow: 1px 1px rgba(0,0,0,0.05),
    2px 2px rgba(0,0,0,0.05),
    3px 3px rgba(0,0,0,0.05),
    4px 4px rgba(0,0,0,0.05),
    5px 5px rgba(0,0,0,0.05),
    6px 6px rgba(0,0,0,0.05),
    7px 7px rgba(0,0,0,0.05),
    8px 8px rgba(0,0,0,0.05),
    9px 9px rgba(0,0,0,0.05)
}

Removing font-weight doesn’t fix it and there is no color reference.

I added your second code block to the bottom of the file and it doesn’t change anything either.

Am I editing the correct file?

#19

@smooth_black_rock does this do it:

.cm-header-1.cm-header-1,
.markdown-preview-section.markdown-preview-section h1 {
    font-family: Arial; /* replace with your font of choice */
    font-size: 18px; /* replace with your font of choice */

You also asked about the hash: does my code in the previous comment work for that?

#20

Neither of those work. I attached the css file up thread in case you would like to see the structure. I can program Python but css is a complete mystery to me, unfortunately.

#21

@smooth_black_rock last attempt:

.cm-s-obsidian .cm-header-1,
.markdown-preview-view h1 {
  font-family: Arial;
  font-size: 18px;
}
#22

Hi there! So glad you like my theme!

I see @Klaas has been doing an amazing job supporting in my absence, so sorry about the delay!

I’m working on a couple of fixes for you. It’s 10:16pm where I am but I should hopefully have something for you before bed, please hold :slight_smile:

#23

Hi @smooth_black_rock , i’d like you to do a couple of things:

First, update Vileplume in the Obsidian settings with this update button:
image

Next, download this snippet, put it in your .obsidian/snippets folder, and turn it on from the Appearance menu in Obsidian. Hopefully this gives you the look you want!
vileplume-heading-mod.css (350 Bytes)

#24

Also Klaas, wanted to say thank you again for the support - I’m not sure how you do it! I’ve been seeing you everywhere - both my themes, Discord, looking after everyone’s themes not just mine!

1 Like
#25

Thank you! A thing of beauty!

And for the final bit…if there was a way to shave off some size on each heading, so that H1 and H2 were maybe 20% smaller (…and then scale H3, H4 to be proportional, ending up with H4 being only a tiny bit larger than normal bold text)

I love the font and colours!

1 Like
#26

Glad it worked!

I’ve attached a new snippet with some additional selectors. See each line which says font-size. You should be able to adjust those to suit your taste. I’ve adjusted it a little to guess what you might want, but you should be able to do the rest on your own to suit you :slight_smile:

vileplume-heading-mod.css (725 Bytes)

#27

Nice, thank you. And where is the section where I can change the size of the hash?

#28

If you look for this line:

.cm-formatting.cm-formatting-header {
    font-size: 1rem;

You can change font-size here to anything you like. I was a bit cryptic and used rem, but you can use px here if you prefer of course

#29

Bearing in mind 1rem = 16px.

#30

thanks!