Icon label background with rounded corners and opacity

[Dfects]

With some CSS trickery I have semi transparent rounded corner labels:



Work in progress still.

If anyone is interested in how its done:

<key>UndockedIconLabelStyle</key>
<string>

font-size: 10px; 
color: white; 
background-color: #000; 
width: 72px; /* bit of a guess, but seems about right */
text-align: center; 

opacity: 0.7; /* transparency */
-webkit-border-radius: 6px; /* The corner radius */

border: solid 1px #666; 
height: 11px; /* height seems to be 13px minus 2px for border */

</string>

!!!UPDATE!!!

Not sure if anyone actually cares about this lol but slight improvement... shiney 3 tone labels:

    background-image: -webkit-gradient(linear, left top, left bottom,
                    color-stop(0.40, #444),
                    color-stop(0.2, #666),
                    color-stop(0.60, #000));

CSS3 (and safari) Rocks

Download Below:
Icon Label BG.theme.zip

Unzip, then put the folder in: /private/var/stash/Themes

Edit Info.plist to your liking

[Quailitynoob]

No help but where would I put this code to get the rounded corner icon labels looking right now in my iphone

[Update] found it

Ok sample Thanks

[Dfects]

No help but where would I put this code to get the rounded corner icon labels looking right now in my iphone

[Update] found it

Added a sample Info.plist to my original post

[Quailitynoob]

Sweet Looks good for me.. I may narrow them down a bit but definitely highlights them Thanks

[bubonicbryan]

This is great! More people need to know about this!

[Timka21105]

yeah, bryan said,
but i wish it would size according to the text

[love2drive2fast]

Very cool !!!

Thanks for sharing !!!

I don't like icon labels, but it also works other places (namely the status bar clock)

Mark

[Danimator]

Figured out how to make them auto-size according to the text length. Here's a screenie and the code to use:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>

<key>CalendarIconDateStyle</key>
<string>color: transparent;</string>

<key>CalendarIconDayStyle</key>
<string>color: transparent;</string>

<key>UndockedIconLabelStyle</key>
<string>
font-size: 10px;
color: white; text-shadow: #000000 0px 1px 2px;
background-color: #000;
padding: 0px 6px 0px 6px;
margin: 0px 0px 1px 0px;
float:left;
text-align: center;
opacity: 0.5;
-webkit-border-radius: 6px;
</string>

<key>DockedIconLabelStyle</key>
<string>color: transparent; text-shadow: #000000 0px 1px 2px;</string>

<key>TimeStyle</key>
<string>/*font-family: monospace; font-size: 16px*/ color: transparent </string>

</dict>
</plist>