unique.wonders. ([info]uniquewonders) wrote in [info]component_help,
@ 2008-03-15 15:52:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:!tutorial, *account level: plus/paid/perm, user: uw

TUTORIAL: [CSS] Custom Security Icons
Difficulty Level1.5 star


Instructions
» All users: copy and paste the code given in the yellow box below into Customize Journal ThemeCustom CSS → the big box at the bottom.
» Paid users: you can also use this in set custom_css or function Page::print_custom_head.
» Read the code for further instructions on how to change settings and data. Instructions are in green. Settings and data you can change are in red.
» Enjoy! :)


Known Issue
» The code does not work in older versions of Internet Explorer (such as IE6) and may not work in some other old browsers.



/* CUSTOM SECURITY ICONS */
/* component_help/1199209.html */

/* Edit the URLs in background image */
/* Edit padding to match the size of your image */
/* First number is height, second number is width */

/* Icon for friends-only security */
.entryDate img[src*="icon_protected.gif"], .entry img[src*="icon_protected.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

/* Icon for custom friends groups security */
.entryDate img[src*="icon_groups.gif"], .entry img[src*="icon_groups.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}

/* Icon for private security */
.entryDate img[src*="icon_private.gif"], .entry img[src*="icon_private.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(http://yoururl) !important;
padding: 16px 16px 0 0 !important;
}


(Post a new comment)


[info]asilah_vista
2008-05-01 10:02 am UTC (link)
It's not working for me. :/

(Reply to this) (Thread)


[info]uniquewonders
2008-05-01 03:35 pm UTC (link)
(Wow. Icon love. I didn't know this artist. Thanks.)

There was a mistake in the code for the private icon. My apologies. It's been corrected. Is it the one that doesn't work for you or do you have problems with all the icons?

(Reply to this) (Parent)(Thread)


[info]asilah_vista
2008-05-01 03:54 pm UTC (link)
Yeah, he's so talented! I love his art.

None of them are working for me, no. :( I don't have an old browser, either.

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-05-01 04:04 pm UTC (link)
Could you tell me exactly how you implement this tutorial, please? Where do you put the code? What do you change? Things like that so I can try to reproduce the same steps.

Which browser and version are you using?

(Reply to this) (Parent)(Thread)


[info]asilah_vista
2008-05-02 12:45 am UTC (link)
I put it in the CSS box, and I changed what was in red.

I'm using IE.

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-05-02 07:25 am UTC (link)
Which version of IE?

(Reply to this) (Parent)(Thread)


[info]asilah_vista
2008-05-02 07:45 am UTC (link)
Scratch that; I think it's IE 7. lol

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-05-02 07:50 am UTC (link)
Let's make sure: does it look like this?

(It's important because the code won't work with versions older than 7).

(Reply to this) (Parent)(Thread)


[info]asilah_vista
2008-05-02 07:54 am UTC (link)
Err.. not exactly. I got this laptop within the last six months, though, so I wouldn't think that its IE would be older than 7.

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-05-02 08:01 am UTC (link)
Well, it doesn't really mean anything. Depends on which version of Windows you're using too.

Does it look more like this then?

The big difference between IE6 and IE7 is tabbed browsing meaning that you can open several pages in the same window but in several tabs, which you couldn't do before with IE.

(Reply to this) (Parent)(Thread)


[info]asilah_vista
2008-05-02 08:06 am UTC (link)
I'm using Vista, which I think is the difference. I had an XP and it looked like the previous example.

No, it doesn't look anything like that one.

This one has tabbed browsing, yes.

(Reply to this) (Parent)(Thread)


[info]uniquewonders
2008-05-02 08:13 am UTC (link)
Ok, good.

I've just tested the code again, implementing the tutorial the way you told me you did it and it works in IE7 so I'm thinking you may have some other code which prevents the tutorial from working or which overrides it.

Do you have a layer? If so could you make it viewable, please?

(Reply to this) (Parent)


Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…