dominic I know, but I'd prefer it if you fixed the bug in the core rather than me having a broken update path and/or unnecessary custom css in future. Furthermore, I have now found numerous bugs and I have paid for support, but getting it seems to be a disaster. also, using !important in custom css to override the !important in template CSS is just bad practice.
If all they do is add custom CSS to fix this rather than fix and update the template I will be even more unhappy.
Also, even in other media breaks the sticky header has a bug, it scrolls out of view and then pops back in which looks terrible, this is because of the js added "not-at-top" class. I can think of much better ways of implimenting that, but again, I'd llike to avoid the broken update path and/or unnecessary custom CSS in future when you actually fix it in the core. Then when it pops back in it's white, no matter whether dark or light is selected, but keeps the dark mode logo which then looks awful as well. I can fix that myself as well, it's just lacking a css class for .not-at-top.dark-active.
Also, when the js adds dark-active class to the body tag it doesn't remove light-active. this means you have to make use of the cascading in the CSS to overcome the light-active class. It would be very easy to rewrite the js so that it removes the light-active class at the same time as adding the dark-active class.
you'll want something like...
const toggle = document.querySelector('#toggle');
toggle.addEventListener('click', function() {
const body = document.body;
if (body.classList.contains('dark-active')) {
body.classList.remove('dark-active');
body.classList.add('light-active');
} else {
body.classList.add('dark-active');
body.classList.remove('light-active');
}
});
I'm not looking up the exact context for you, so this is merely an example of something close to how I would implement it.
The light/dark toggle is broken, the little logo for light retains it's transparency when dark mode is selected and it becomes almost invisible. The other little logo for dark, changes based on the selected mode. Again, an easy fix in custom.css but again, I'd like to not have a load of bug fixes in my custom.css which becomes extraneous css if and when you fix the core and I update.
Also, no matter which mode is selected as default in the back end, refreshing the page on the front end switches it. <- this may have been because I disabled your js cookie. Think I've fixed this one.
The font picker in the back end selects the wrong font. The font label and the font example don't match and you have to find the right font by selecting the wrong one.
Heading sizes set in the back end are ignored for all headings except those manually put in content with H tags. All titles ignore the setting. Again, a simple css fix taking .module-title into account (or .article-title, etc), but again, my approach may not be identical to yours and if and when you fix it in the core my custom.css may be broken at worst, but at best, have a load of extraneous css in it.
In short, Purity IV is a bug fest and I'd prefer it was fixed properly so I can use it for my clients going forward without a load of hacky custom css overrides that may potentially break in the future but would certainly become a load of extraneous CSS. There is also the fact that lots of the core css uses variables which I may end up overriding with fixed values unnecessarily, breaking the colour palette system. Your suggestion of...
.dark-active.not-at-top #t4-header.t4-sticky {
background-color: #000;
}
does exactly that, making #000 a fixed value that will for ever more ignore the colour palette system. If I was happy to use overrides to fix the bugs the correct approach would be to add to the custom scss... (for anyone finding this, this is a much better fix than suggested by dominic above. It is still a case of fixing bugs with custom SCSS though, and if they properly fix the template you'll have unnecessary SCSS)
#t4-header, .dark-active.not-at-top #t4-header.t4-sticky {
background-color: var(--body-bg-color);
}
Which wont break the dark/light mode toggle and will allow for the colour palette system to change the body colour. It also prevents the scroll out and pop back in effect. However, like I say, custom SCSS is not the way to approach it any more than custom CSS is. Fixing the obvious bug in the core files will mean that I don't end up with a load of unnecessary overrides if and when you update the template to fix it properly. If you could just copy paste that into _styles.scss and remove the background-color from this class in template.css...
.not-at-top #t4-header.t4-sticky {
background-color: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
}
...and update the template, that would fix it properly.
While you're there, remove this completely unnecessary section from template.css...
.dark-active .mode-light {
opacity: 0.2;
}
...to fix the almost invisible light mode icon when dark mode is selected. It appears to be present only to break it. It serves no other purpose.
If you remove the font-size property from these classes in template .css it will fix the heading size setting in typography section of the page builder being ignored...
.module-title {
font-weight: var(--heading-font-weight);
font-size: 0.875rem;
margin: 0 0 1rem 0;
padding: 0;
text-transform: uppercase;
}
.module-title {
font-size: 1rem;
margin: 0;
padding: 0;
}
Personally I'd also remove the text-transform: uppercase;
property as well. If I want upper case titles and I can type them in upper case. As it is, if I want lower case titles I have to have a custom css override which I think is silly.
As for article titles, what do you think might be wrong here in template.css? Applying var(--h3-font-size)
to H2 titles doesn't seem right. Suggest applying var(--h2-font-size)
would be the expected behaviour.
.page-header h2, .page-header .h2, .categories-list h2, .categories-list .h2 {
font-size: var(--h3-font-size);
margin: 0 0 0.5rem;
}
Lastly, the broken font picker is down to the JSON located at...
/plugins/system/t4/admin/etc/googlefonts/fonts.json
Puts the fonts in a different order than the examples appear in...
/plugins/system/t4/admin/etc/googlefonts/thumbs/fonts**.jpeg
...As a result all the examples are the wrong font.
A very disappointing and rather worrying approach from professional developers, and the original oversight isn't really forgivable either. It needs fixing properly. I've done all the work for you, if your fix for my ticket is to add a load of hacky, colour palette braking custom css to my site I will insist on a refund, same if you just fix the bugs by applying custom SCSS. Fix it in the template, offer it as an update and include it in the download. The only reason I decided to pay for support was to get it fixed properly. Thanks