Targeting specific elements with custom CSS

[jerefrer]

Hi there, and thanks for this marvelous theme :)

There is one thing though that is making progress on my project quite painful.

Often times I would like to adjust the look of some elements, and in almost all cases it would be entirely possible to do so only using CSS.

The problem then is that none of the elements have specific CSS classes that allow me to target them.

For instance I can't have a CSS rule targeting only the layouts/defaults/list.html or layouts/defaults/single.html, but I could easily have if their content was wrapped in a container with a specific class, like .layout-list and .layout-single or whatever.

Another example would be to try changing the look of the partials/article-link/card.html. Since there is no specific CSS class I just can't target only those cards without having to copy-paste the partial into my own project just to add a new CSS class myself. I'm reluctant to do this since I would then have to repeat that again if I upgrade the theme later on.

I'm quite new to Hugo so it's highly probable that I'm missing some core concept here that would allow me to painlessly achieve what I'm aiming for.

But if I'm not, wouldn't it be a good idea to add semantically interesting CSS classes everywhere in the theme so that one could change the look without having to even touch the templates?

[nunocoracao]

Hello @jerefrer check how to override theme components in Hugo's documentation. You can copy paste all the theme's components and override them to your will.

[jerefrer]

Well that was my point actually. I only want to change the visual appearance of the theme components, not their logic or content. So I believed I could achieve that only using a custom CSS file that would override just what I want. But that proved to be impossible since there is no way to target specific elements.

I wanted to avoid duplicating theme files just to add a CSS class enabling me to target elements.

Being new to hugo and its themes I believed that the less you override theme components, the less work you will have to do if you upgrade the theme since you will have to go through each overridden component to check what's changed in the updated version. Isn't that right?

So for the time being I might have to do just that, duplicate components just to customize their appearance, but I was thinking that in the long run it would be a good idea for the theme to allow people to tweak the visuals of just what they need through pure CSS without having the need to duplicate anything. Hence adding specific CSS classes.

Or maybe I'm still missing some hugo concept that would solve this problem, in which case please tell me. And if that's what you meant with your answer I might have missed the point entirely. In that case could you please explain in more details?

Thanks for the quick answer :)