Change the text before page tags

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!

tags — :before tags

Discussion - No comments yet…6 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.