Back in January, I pulled the trigger on a new theme for this blog. I recognized some time ago that I am not a very good web designer (I can do small tweaks to CSS but not comprehensive composition) and it would be far better to buy something that’s well designed and then spend the time wrapping the output from the blog engine to this new look and feel.
And that, pretty much, is what happened. I bought a professionally designed theme (making sure it was responsive), and hacked away at the templates this site uses to accommodate the new styles. I am well pleased with the effort.
However…
Even though it was professionally designed (in theory), there were bugs. The first one, I found pretty well immediately because I regularly use the W3C HTML Validator. The designers had this to say:
Valid HTML5 and CSS3
So one would imagine that it would validate with the official W3C Checker. Nope. The theme uses some nicely-colored buttons wrapped in an anchor tag. I use them for things like Read More buttons, the Social Network buttons at the bottom of every page, for the Previous/Next Post buttons in the post views. They were originally coded something like this:
<a href="someURL"> <button class="float_right">READ MORE</button> </a>
Seems pretty benign: a button element inside an a element. Unfortunately, that is invalid HTML5. To quote the spec:
Content model: Transparent, but there must be no interactive content or aelement descendants.
The button element is “interactive content” so cannot be allowed. A single validation test on their theme demo would have shown this.
To fix this I had to duplicate some CSS (creating a buttonlook class I could apply to a elements) to get the effect I desired:
<a class="buttonlook float_right" href="someURL">READ MORE</a>
Once that was fixed I went on my merry way, until this past weekend. For reasons lost in time, some of my early posts here from 7 years ago weren’t properly formatted. In particular, floating right images weren’t floating right, so I was going through the posts making the minor fix required. And then I noticed something peculiar: my lists (both ul and ol, although I tend not to use the latter, as well as dt and dd, which I don’t use at all) were not being styled properly: they looked like paragraphs with no margins. Lo and behold, after checking, the theme had no CSS for them apart from the usual reset code. Gee, thanks. I changed the ul lists to use FontAwesome, and the ol lists (all two of them) are going to need some more coding.
And then, I noticed just by an off chance that in a couple of of early posts, I’d used <sup> and <sub> to show powers (2n-1) and chemical formulas (CO2). They were being shown as 2n-1 and CO2 respectively. Another slap on the forehead, together with a blank look – how would you do this? – but this time I found this snippet on GitHub that helped.
I took another look at the CSS reset code and there are other elements that aren’t being set to anything meaningful, but then again, I’m not using them, so all’s well for now.
So the moral of this tale is that a theme you buy may not be complete, or even valid. You should check with your own content.
Now playing:
Matt Bianco - A Day in Your Life
(from A/Collection)
Loading links to posts on similar topics...
3 Responses
#1 Mike Reith said...
24-Mar-16 7:15 AMHi Julian, where did you purchase your "professional" theme? I am in the need for one...
Thanks Julian,
Mike
#2 julian m bucknall said...
24-Mar-16 7:55 AMMike: I use ThemeForest, for reasons lost in the mists of time (that is, I can't remember why I used them in the first place when setting up 64SAINT's theme).
Cheers, Julian
#3 Mike Reith said...
24-Mar-16 8:09 AMThanks Julian. Much appreciated.
Leave a response
Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.
_emphasis_**strong**[text](url)`IEnumerable`* an item1. an item> Now is the time...Preview of response