So I’m sitting here trying to port my Invader theme to a K2 style, and I must admit not a small bit of smugness at the apparent ease with which I’ve made most things work effortlessly. There is one thing still resisting my efforts though; namely the menu.
Now it’s important to note that I have laid out a strict set of challenge-rules for myself. First of all, and most importantly, there will be no touching of the K2 codebase, unless it is to fix encountered bugs or improve on the structure in a way which benefits everyone.
So that essentially leaves me with only a stylesheet and accompanying images to get the job done. Luckily K2 has the incomparable sidebar modules (like WordPress widgets, on drugs… the good kind) which alone lifts some of the problems I might otherwise have faced.
Now I figured I would try to lessen the use of images, as most of them are PNG’s and thus a bit on the heavy side. This however has come to present something of a problem for the menu, which is currently entirely image based, whereas the K2 menu is of course text-based (which is better IMHO).
But I want to retain the look of the menu though, so I need to get those small description underneath every menu item. And here’s where I think I’m smart! I go ahead and write the following piece of CSS, which should do the trick!
ul.menu a[title='about']:after { content: '\A author & site' }
Essentially it should do a line-break and insert the text after a link with the title set to ‘about’. And it inserts the text fine, but the line-break is nowhere to be seen, despite the W3C’s promise to the contrary.
Verdammt! I guess CSS2 is still a ways off then.
The solution for now has been to change the title of the pages and include the relevant HTML tags to get the desired effect. Not a smooth solution, but you’ve got to work with what you’ve got.
Maybe you’ve already tried it, but does \n or (god forbid) <br> work in place of \A?
Nope and nope. You can’t insert tags of any kind AFAIK.
What about using ‘display: block;’ on the :after pseudo-element?
BR was meant for this!
Edit: You can’t? Pfffffffft. How about adding display:block? (and maybe a margin-top?)
When you port it, are you running it on a wordpress blog on your localhost? or do you have a sandbox thingy?
Why not add a nice class to the page-nav li’s ([li class=“about”][a]About[/a][/li]). That’s how I’ve always dealt with CMS-based nav. That way you keep your image-based nav (which I think is much better), and your little descriptions.
I’m running it on my localhost.
For now I’ve got it looking pretty good, though I’ve had to rename the pages, but that works out fairly well in most cases.
Just saying, for reference, the feeds page (linked at the bottom) doesn’t exist…neither does the link to the Invader Style in the footer, i’m just pointing these out if you havent noticed :)
Yeah, everything is broken right now.
Call me ignorant, but a brief explanation of “Invader” and “K2” would have benefit those of us who are not privy to what they are.
Respectfully,
Made in DNA
You’re looking at them :) — K2 is a template for WordPress I head up the development of. Invader is the style of my site.
Good luck with it. I’ve been running k2 myself for a while, with a little theming done on my own, and I’m very impressed with it. good work :)
Hi Michael,
I know you can do it! :p
I have to say the B is looking sweet in its K2 guise so far!
Hmm, Im thinking, ‘using K2 as a basis for my existing site’s design’ could be an interesting project.
Im just not sure I can face pulling apart my shoddy code to work out what Ive done. Though I have been tempted to just flip it over to K2 for a while, my highly customised site makes it all go a bit odd when using another theme simply because of the odd way Ive made individual pages (404, archives, about, etc).
Besides that, whilst I like what youve done with it – Im none-too-sure about the draggy page archive thing at the top of the hope page.
How does google handle this? Does it still index the whole site?
Michael, I came across exactly this about 18 months ago now (and was stupid enough not to post about it, natch)… The long and short of it all is that the only browser that currently handles CSS content’s \A is Opera (7+, if memory serves).
The only ‘solutions’ I can really think of, though, are all very, very hacky (<br />, some kind of display: block use, or something equally naff).
That said, wouldn’t it be sensible to have those descriptions as HTML content anyway? Markup- and usability-wise, I think something like <a><em>about:</em> author & site</a> might be more valid, and would allow the presentation you want…
Oh, and because I’m a nit-picky pedant swine, you should be using ::about, not :about.
Well it works now, so that’s something.
I didn’t catch that last part about ::about?
Sorry, I was being a dullard: the last part should be ‘using ::after, not :after’.
How come?
As I recall, the change was made as part of the CSS2.1 revisions to better distinguish between pseudo-classes (:hover, :first-child, and so forth) and pseudo-elements (::before, ::after, and, in CSS3 ::outside and ::inside).
Ultimately, the difference is that a pseudo-element is inserted into the document relative to the selected element whereas a pseudo-class represents a current state of the selected element (thanks to Ben for the refresher).