When I go to customize my theme, I’m a bit unclear on which files to edit.
On the Design page, it says:
Your custom theme will be applied after the default templates from the selected theme above.
First I choose my theme. Like right now at hollie-test.micro.blog I’m trying out Paper theme. So in the Edit Custom Themes, I make a new custom theme, cool. But then when I edit that theme, I see one stack of files labeled Templates for Paper Theme, and another stack below that labeled Default Templates.
Which one of these stacks are the files I should be editing? The directions “Your custom theme will be applied after the default templates from the selected theme above” isn’t clear, it seems to be saying, “Your Custom Theme will override both your Theme and the Default”.
But the only files I have as options to edit are Theme files or Default files. How do I know which ones to edit?
Edit: To add to this confusion, it looks like I can click “New Template” and create something? So wait, does this mean I’m supposed to be creating something entirely new? Or am I supposed to be editing the files already there? I also just realized that my blog has TWO footer.html files, and I have no idea how that happened.
(It’d be so great if we could get some help docs going for folks who aren’t developers, something really explanatory that helps people not familiar with Hugo get an introduction to the Custom environment. If I could help with this, I’d be happy to! ).
The first set for Paper. What happens is the Paper stuff will overwrite/merge with the default stuff whenever present, but you will fall back to default when things are not present.
For a relatively complete theme, you can mostly ignore the default stuff.
Yes, you can create new/additional templates if you want to add functionality not provided by your currently selected theme and want to do that with different files.
In general, customizing themes requires knowledge of Hugo. What customization are you trying to do? You may be better suited to “just” edit your custom CSS if it’s for mostly colors/fonts/spacing, for example. Customizing a theme is really only necessary for structure-level changes.
Oh thanks! The changes I want to make are things like adding my little cartoon avatar image (I think I’ve accomplished this here.
But also things like changing the footer, which gets really confusing because there’s both the “change footer” link on the Design page but also a footer.html snippet in both the Paper theme files and Default files. I think that’s how I ended up with two footers on one custom theme. Sounds like I should just change the Paper theme one.
Not sure how to change the fonts, either. If I use Google fonts, where do I put the link to the stylesheet? (I don’t think it’s possible to use local fonts with micro.blog?)
You can put fonts in your custom CSS-- those selectors will override what’s in the theme, but you can also edit the theme’s CSS file directly.
The footer on the Design page is not really for appearance, and more for “includes”. For example, it might be a place to put an analytics embed and some other stuff like that. For the look of the footer, I’d probably directly edit the Paper theme footer.
My understanding (from W3, which is how I make it work on my personal test site) is that with Google fonts you have to link to the Google stylesheet within the individual HTML page. So in the header of each HTML page where you want the font to be different, you have to link to where the page can find that font. Is that possible with micro.blog? I’ll do some experimenting.
I realize that CSS can change the font, but unless you want to use the built-in web safe fonts, I think you have to link in the header to either Google or use CSS to link to locally-hosted fonts (which we can’t do on micro.blog).
).