Change the text before page tags
Not happy with page tags:? Read on for details of how to change it…
Here’s another quick little entry to keep you entertained while you drink your coffee.
Have you ever wanted to change the wording that comes before the tags at the bottom of your wikidot page? Probably not, but if you ever do, now you’ll know how (well, if you decide to read the rest of the post, that is).
Using a little bit of CSS trickery, you can hide the default text that reads page tags: and replace it with anything of your liking - even big hairy toe, but it’s probably best to stick with something that’s relevant.
First, you need to make the default text transparent, and then add in the new text using the :before pseudo class. Then a negative margin to pull the tags closer and compensate for the now invisible page tags: and you’re done. You can see it in action in the tags at the bottom of this page. Here’s the code…
.page-tags span { color: transparent; } .page-tags:before { content: 'tagged with...'; margin-right: -55px; }
Depending on the size of your font, you may need a different margin to get the right distance between the text and the tags - a bit of trial and error never hurt. While the actual tags themselves also reside in the same span element as the prepending text, they should inherit the styles from the site's links (a), so there shouldn't be a problem with them turning transparent too. If they do, however, simply declaring a colour for them in the selector .page-tags span a should fix the problem.
One downside is that the new text is embedded into the page, so you can’t select it - instead, when you try to highlight the text, the invisible page tags: is selected instead - try copying and pasting it to see what I mean.
I’m still not sure what text I want to add on this site instead of the default, so I’ve only made the changes to this page at the moment. And we’re done…
Enjoy the article? Tweet it!
Discussion - No comments yet…6 comments
Thanks for this tip.
I already knew the :before (and :after) statements. It gives me an idea on how we could customize the wikidot interface in a multilingual envrionment…
gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
However, for this specific page tags, another way to customize the page tags is simply to make them dissapear and reintegrate them thanks the live _template with something like
[[button tags text="Tags"]]: %%_tags_linked|/helpon:_start/tag/%%,
which allows tag editing and tag linking to a landing page different from the default one.
gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
I had a brief look for a way to add the tags inline but couldn't find anything - thanks for pointing that out.
BMC Creative | RoaringApps | @brycecammo
Shane (leiger) here. I'm using IE7 at the moment and I see this:
Not sure if it's IE7 ignoring your CSS, or you've forgotten to apply it correctly? Will check again later when I get home, with Google Chrome.
cheers,
Shane
P.S. Website doesn't look as bad as I expected it would in IE7… but still not usable for an official business website (for example) where compatibility with older browsers is a prerequisite.
IE6 & IE7 (not sure about IE8?) don't support CSS generated content, so it basically just ignores the new text. Luckily, they also don't recognise the transparent colour, so it is basically unchanged for them. It's not something I'm too worried about - especially now that Gerdami pointed out adding the tags inline.
As for this site in IE7, I too was surprised at how well it came up. I'm currently working on adding better browser support to the theme - something I want to get done before presenting any premium themes.
Bryce
BMC Creative | RoaringApps | @brycecammo
Works fine with Google Chrome and Ubuntu 10.04 :)
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Post preview:
Close preview