Hi, my first post here. I think I’ve done enough rookie learning to post now :~)
My learning project has been to transfer my embryonic blog from the horrible blogger/blogspot environment to a space of my own that I can keep clean and rational. I’ve now cleaned out pretty much all of that legacy mess, and meanwhile catching up on the last decade-or-so of CSS. I’m doing all this development on the local server, so nothing to link to here, I’m afraid, and anyway that doesn’t matter much because my question is a pretty broad one.
While learning the ropes I’ve been using the Ananke theme (mainly I think because ChatGPT mentioned it when I was asking questions), but I’ve been finding it rather buggy. Firstly it’s not listing categories very well at all, and secondly it seems to interfere a lot with my attempted custom styles. For example, an image container using flexbox hasn’t been working properly because of something inherited from the template, but that isn’t the only example. Too much hastle to go looking for all the reasons, so I’m looking at a few other themes that were coughed out by my questions to ChatGPT. Just at the moment I’m playing with Flat, which has impressed me at least with the fact that the categories seem to work very well, but I’m also seeing quite a lot of interference with my attempts to style things. Actually I’m just now seeing exactly the same issue that I had with my flexbox image container. The inspector says that
flex has no effect on this element since it’s not a flex item.
Try adding display:flex or display:inline-flex to the element’s parent.
The parent in question is the “content” div of the template, so I have no idea what I’m supposed to do about that.
So let me ask if anyone has good things to say about any other themes. Or is it just that Hugo themes will always get in the way of my attempts to adapt them, and that the only way to make things work exactly as I want will be to build my own theme (obviously that isn’t happening any time soon) The AI is pretty useful, for sure, but I think it’s time to ask the humans!
I’d roll my own theme. And re flex: if you want your image in a container, write your own render hook that fits your needs. You can do that with any theme.
Though I don’t see the point of having a single item in a flexbox
Hi, and thanks for the reply. I’m a beginner, and nowhere near creating my own theme! I just want one that allows me more freedom. And of course the image container is for a horizontal line-up, and not only one image! I’m sure that there are a million other ways to do an image container, but anyway I would like to understand why these themes don’t allow the flexbox :~) I have no idea what a render hook is, but I’ll look it up.
What makes you think that they don’t allow a flex display for the img container? If your image is put in a container at all (eg a div), you can easily set the correct value on that div inside your CSS:
div :has( > img) {
display: flex;
}
should do the trick with an img that’s an immediate child of a div. If you need something fancier, check out the image render hook:
But you want to write your own CSS, which is already half the way to your own “theme”. Perhaps you do not even need a “theme”, but just some partials, shortcodes and CSS? In any case, rolling your own gives you all the flexibility you want with the added benefit of learning a lot.
How exactly would that look in Markdown? Or are you writing your stuff in HTML?
Hugo themes can add whatever html, css and js they like. Hugo itself has no opinion on that.
Hugo has some internal templates for things like rss, opengraph meta tags etc. but it is up to the themes to use them or roll their own.
So working with html, css and js on a Hugo site is very mush like working with them on any other web site.
When you say that the Ananke theme is “buggy” I think it is more about it not working as you expected. That most likely means you should look for another theme, as you obviously are doing .
I assume you have looked at https://themes.gohugo.io. A lot of themes there but it can be hard to see which ones are maintained/updated.
Yeah, I’m not blaming Hugo itself, of course! Just that these two particular themes that I’ve been looking at, among others, seem to be blocking what I’m trying to do. I’m not getting angry or giving up. I just want to understand if this is normal. If so, I clearly need to get my head down and learn quite a bit more. Mainly to understand how the templates and partials function, of course (getting there, but there’s a lot to understand), but also I have never learned Go, for example. In the end one language mostly works like another once you get your head around the syntax, but anyway I presumably need to do a bit of that.
Well, yes, buggy isn’t the word, obviously. Just that the categories page was a bit messy/overloaded/bloated, and I couldn’t see how to simplify it. It doesn’t matter anyway. Flat does what you expect the categories page to do, so I guess I just moved on.
Yes, of course I’m looking at the themes on there. It’s a needle in haystack situation, though. Hard to narrow things down from the info there! I ended up asking ChatGPT for suggestions, but of course it’s a machine and it’s always a bit out of date. Anyway, I installed a few different themes, to have a look. And yes, it’s not obvious at all on there which themes are maintained and up to date. You have to look at the Github page to get a proper idea.
Now you want what, exactly? In your CSS, you set display: flexandflex:1 on .image-container. The latter makes no sense, unless div.content has display:flex set, too. Which it may or may not have, I don’t know. display:flex makes sure that .image-container itself behaves as a flexbox. Is that what you want? If so, what’s the problem? If not, what is it that you want?
Since all that is not related to Hugo at all: Please let’s continue the discussion via PM.
What does your original stuff (MD? HTML? Something else?) look like before you have it processed by Hugo? From your HTML, I strongly suspect that you’re writing HTML, not MD (or only minimal MD). If that’s the case, just structure it any way you want.
OK, hands up I’m still learning here, sorry. Like I said, catching up with what happened with CSS in the last decade and a bit. OK, so that flex:1 bit was meaningless. I got it. I need to go back and clarify the concepts. The content div is for the whole content of the post, not only the image container of course. Anyway, it’s fine - just me figuring things out in my anarchic manner :~)
It looks like the Flat theme is adequate to my purposes for the time being, I suppose. So I’ll keep going with this for the time being, while learning a few more concepts. Most important is to enjoy the process, innit.
When you say “roll your own theme”, do you just start from the blank theme (or something similar) and then build from there? I can start doing that while learning the ropes of template building from playing with the ones that I’ve already installed.
.
I’m still learning here, sorry. Like I said, catching up with what happened with CSS in the last decade and a bit. OK, so that flex:1 bit was meaningless. I got it. I need to go back and clarify the concepts. The content div is for the whole content of the post, not only the image container of course. Anyway, it’s fine - just me figuring things out in my anarchic manner :~)