CUNY Academic Commons

Raymond Hoh wrote:

Your CSS hack works in Firefox and Edge (to some extent), but not in Chrome. Chrome doesn't appear to apply the :before markup on the target when I check the developer console.

Also, I think you could optimize your HTML markup so this:

<a name="Spektor2020"></a><b>Allan Spektor</b>

Becomes this:

<b id="Spektor2020">Allan Spektor</b>

Perhaps that might fix things?

Unfortunately, I see the same behavior.

---

There are other workarounds available on this StackOverflow page that you could also try:
https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header (your target:before CSS hack is also listed there)

Thanks, I'll have a look!

Wow, this is a hot topic for sure! Wouldn't everyone on CAC have this problem? Should there not be a site-wide solution? Thanks, again!

Wouldn't everyone on CAC have this problem? Should there not be a site-wide solution?

Yes, everyone would have this problem.

If all sites used the same theme, then a CSS or JS site-wide solution could be possible. However, some sites hide the admin bar with custom CSS and some sites even have another fixed header just below the admin bar. Also, plugins can add their own CSS and JS, which can cause a potential conflict with anchor links.

I think the :target::before CSS snippet doesn't work well with Chrome when combined with other HTML/CSS elements on the page.

The following StackOverflow answer looks like the best solution as it uses JS: https://stackoverflow.com/a/13067009, but it requires adding a fixed height, which would not work across all Commons sites.

Raymond Hoh wrote:

Wouldn't everyone on CAC have this problem? Should there not be a site-wide solution?

Yes, everyone would have this problem.

If all sites used the same theme, then a CSS or JS site-wide solution could be possible. However, some sites hide the admin bar with custom CSS and some sites even have another fixed header just below the admin bar. Also, plugins can add their own CSS and JS, which can cause a potential conflict with anchor links.

I think the :target::before CSS snippet doesn't work well with Chrome when combined with other HTML/CSS elements on the page.

The following StackOverflow answer looks like the best solution as it uses JS: https://stackoverflow.com/a/13067009,

I can add JavaScript code to my CAC site?

I found [this article](https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/). Looks like I'll need [this plugin](https://wordpress.org/plugins/insert-headers-and-footers/), but it's not currently installed.

For security reasons, we definitely cannot allow Commons users to insert JS into their sites.

I'm afraid that we'll need to figure out some CSS-based solution. I tried another selector syntax that seems to work in Chrome:

a[name] {
  content:"";
  display:block;
  height:80px; /* fixed header height*/
  margin:-80px 0 0; /* negative fixed header height */
}

I've added this Customizer -> Additional CSS. Test with https://khatchad.commons.gc.cuny.edu/research/publications/#Bagherzadeh2020a (it requires

a name=

Thanks, Boone. After setting the offset to 57.5px, this seems to work with https://khatchad.commons.gc.cuny.edu/research/publications/#Bagherzadeh2020, but not with https://khatchad.commons.gc.cuny.edu/research/students/#current. This is an H2:

<h2 id="current">Current Research Students</h2>

H2 elements obviously won't be targeted by the CSS selector a[name]. The best I can suggest is that you add extra top-padding to all of the h2 elements on your site.

Boone Gorges wrote:

H2 elements obviously won't be targeted by the CSS selector a[name]. The best I can suggest is that you add extra top-padding to all of the h2 elements on your site.

Understood. But, there are some contexts where H3 elements work out of the box, e.g., https://khatchad.commons.gc.cuny.edu/teaching/#Spring_2019. Do we know why these work and others don't?

On my machine, that link does not look right (ie the admin bar overlap is taking place). Try in a private browser window - it could be that your scroll location is being cached.

Boone Gorges wrote:

On my machine, that link does not look right (ie the admin bar overlap is taking place). Try in a private browser window - it could be that your scroll location is being cached.

Yup! You're right!

So, even if that header/footer plug-in was installed, I wouldn't be able to add that JS code snippet from the SO post? That does seem like the most robust solution.

I'm afraid we can't allow arbitrary JS to be introduced on sites.

If we could determine a global solution, even one that requires JS, I'd be glad to consider it. But this will take more research.

In the meantime, you'll need to introduce more selectors to get your desired results. I've added the 'subheader' class to a couple of your anchors, and then added more CSS to add a :before pseudo-element, and it seems to do the trick. https://khatchad.commons.gc.cuny.edu/teaching/#Spring_2019