Results 1 to 8 of 8

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: Icon label background with rounded corners and opacity

  1. #1
    Default Icon label background with rounded corners, opacity and gradients
    With some CSS trickery I have semi transparent rounded corner labels:



    Work in progress still.

    If anyone is interested in how its done:

    Code:
    <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:



    Code:
        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
    Last edited by Dfects; 2009-10-18 at 12:17 PM. Reason: Automerged Doublepost

  2. The Following 5 Users Say Thank You to Dfects For This Useful Post:

    love2drive2fast (2010-01-16), nateD (2012-06-27), Quailitynoob (2009-10-18), rumcajs (2010-09-19), wim66 (2010-01-16)

  3. #2
    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
    Last edited by Quailitynoob; 2009-10-18 at 12:25 PM.

  4. #3
    Quote Originally Posted by Quailitynoob View Post
    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

  5. The Following User Says Thank You to Dfects For This Useful Post:

    Quailitynoob (2009-10-18)

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

  7. #5
    This is great! More people need to know about this!
    iPhizzle

  8. #6
    yeah, bryan said,
    but i wish it would size according to the text
    Tima Kudinov

  9. #7
    Very cool !!!

    Thanks for sharing !!!

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

    Mark

  10. #8
    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>
    Attached Thumbnails Attached Thumbnails -img_0002.png  

  11. The Following User Says Thank You to Danimator For This Useful Post:

    lollol (2010-05-07)

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •