Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch which sections are tagged with "odd" class #107

Closed
nai888 opened this issue Mar 18, 2023 · 4 comments
Closed

Switch which sections are tagged with "odd" class #107

nai888 opened this issue Mar 18, 2023 · 4 comments
Labels
enhancement New feature or request

Comments

@nai888
Copy link
Contributor

nai888 commented Mar 18, 2023

I have a site with a section that will be temporary, but should be added at the top of the site. Essentially, an announcements section. However, adding this temporary section to the top will change which sections below it are odd vs even, which completely throws off all the styling that I want.

I was hoping that the .odd class assignment was handled in the html file, which would mean it could be controlled by an option in the config file. This would be great, because it would mean I could just enable the setting and the section when needed, and disable them both when not needed. But alas, it's assigned using JavaScript in index.js.

Is there any way to get around this and make it more accessible/flexible?

@zjedi zjedi added the Improve docs A question about how to use the theme label Mar 18, 2023
@zjedi
Copy link
Owner

zjedi commented Mar 18, 2023

Can you just add announcment section and remove it when no longer needed? I don't fully understand what you're after. When does the temporary section get removed?

@nai888
Copy link
Contributor Author

nai888 commented Mar 18, 2023

All right, apologies if I wasn't clear. I'll try to illustrate a little better.

Normally, the sections are something like:

  1. About Us
  2. Examples (.odd)
  3. Contact Us

Sometimes, I need to temporarily add another section at the top, but I want to maintain which sections get tagged with the .odd class, because I want to keep the styling the same for the rest of the page. So for example, I'd want:

  1. Upcoming Events (.odd)
  2. About Us
  3. Examples (.odd)
  4. Contact Us

But instead, I will currently get:

  1. Upcoming Events
  2. About Us (.odd)
  3. Examples
  4. Contact Us (.odd)

So I'm looking for a way to gain control over which section gets marked .odd.

Does that help clarify?

Thanks!

@zjedi
Copy link
Owner

zjedi commented Mar 18, 2023

I see, thanks for explanation. The easiest way I can think of would be a global toggle to inverse the section colors. So that when you add the extra section, you'd invert coloring in configuration. Would that work for you?

We have some refactors (CSS mostly) on the horizon (in 1 - 2 months) and changes in the core code are currenty out of my capacity.

@nai888
Copy link
Contributor Author

nai888 commented Mar 21, 2023

I had a chance to dig in a little more and I figured out how to add the odd and even classes within the hugo template and remove it from the JS, which allowed me to invert them using a parameter in the config file. Take a look at #113 and let me know what you think!

@zjedi zjedi added enhancement New feature or request and removed Improve docs A question about how to use the theme labels Mar 21, 2023
@zjedi zjedi closed this as completed Mar 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants