Question

There is a custom namespace named Item: on the main wiki that I edit, and the complaint is that every page inside that namespace shows up as Item:This_item — Item:That_item — Item:Foo_item.

I went surfing through the web and the CSS for that skin, and came across:

span#ca-nstab-main:before,
span#ca-nstab-user:before,
span#ca-nstab-wp:before {
content: "[ ";
}
span#ca-talk:before {
content: "& ";
}
span#ca-talk:after {
content: " ]";
}

which takes the namespace name “I’ll use main as the example” and the corresponding talk page name and makes them show up as [ main & talk ] instead of main talk.

I was wondering if there was something similar that would allow me to display Item:Foo as just Foo stripping the “Item:” off. I know that the items listed on the category page are in div#mw-pages a tags.

Perhaps even an in-line way to use JavaScript to strip the first five characters off? I say “in-line” because $wgAllowUserJs is set to false on this wiki.

Edit:
The wiki-core parses it out as:

<style type="text/css">
/*<![CDATA[*/      
a[title^=&quot;Item:&quot;] {
    font-family: 'Lucida Grande', Geneva, Arial, Verdana, monospace;
    font-size: 12px;
    display: inline-block;
    overflow: hidden;
    text-indent: -2.1em;
}
/*]]>*/       
</style>

How do I make the quotes not be parsed, is there a trick? Can I use single quotes instead of double like on the font-family line?

Answer 1

You could try something like this if you’re only able to use CSS. (http://jsfiddle.net/zPJHU/)

li a {
/* monospace fonts may be more consistant cross browsers */
font-family: "Courier New", monospace;
font-size: 1em;
display:inline-block;
overflow:hidden;
text-indent: -2.9em; /* may have to play with this value */
}
li a:hover{
    font-size: 1.8em; /* just for demonstration of font-size increase */
}

Demo markup:

<p>Hover over links to increase font-size</p>
<ul>
    <li><a href="#Item:wicket" title="This really says: 'Item:Wicket'">Item:Wicket</a></li>
    <li><a href="#Item:chewbacca" title="This really says: 'Item:Chewbacca'">Item:Chewbacca</a></li>
    <li><a href="#Item:obiwan" title="This really says: 'Item:Obi Wan Kenobi'">Item:Obi Wan Kenobi</a></li>
</ul>