How to correctly specify custom CSS for <details> element

support
1

I have custom CSS working to render links as buttons. Now I’m trying to style a details element to look the same way, but my changes don’t show up when I serve my site locally.

To make sure I wasn’t just writing invalid CSS, I tried copying the sample style here, but nothing seemed to change:

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

Any guidance would be much appreciated!

My site’s repo is here.

2

That’s not a Hugo question. You might find answers in places that deal with CSS topics.

As a first step, you should use your browser’s developer tools to check what CSS gets loaded and applied to the HTML elements.

3

Here is a <details> shortcode I’m using daily:

(I agree it’s not a purely Hugo question BTW, but it’s the first post from @levicrews so… welcome aboard!)

4

Thanks for your replies. Sorry if I was mistaken in posting here. It seemed to me that if I was testing with valid CSS, then the issue must be with how Hugo was interpreting my code and serving my site.

I’ll try the shortcode that @iaeiou suggested.

5

I cloned your site, and appended the CSS above to static/css/custom.css. Works great with v0.122.0.

6

Thanks @jmooring. The latest version of Hugo available with apt is v0.68.3, so I upgraded manually to v0.122.0 and that seemed to work.

1 Like
7

I don’t think that your issues had anything to do with the Hugo version. As @jmooring noted, your custom.css was missing the rules for detail.

8

I tried those exact rules with v0.68.3 and they didn’t work. Then I tried them with v0.122 at @jmooring’s suggestion and they worked. You’re right that those exact rules aren’t in the repo I linked, but I wasn’t going to commit non-functional code… I was testing all of this locally. I wanted everyone to have access to the rest of my site, though, so they could see where my other (working!) custom CSS was stored.

Anyway, my issue is resolved. Have a nice day!

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.