| unique.wonders. ( @ 2008-03-15 15:52:00 |
| Entry tags: | !tutorial, *account level: plus/paid/perm, user: uw |
TUTORIAL: [CSS] Custom Security Icons
Difficulty Level
Instructions
» All users: copy and paste the code given in the yellow box below into Customize Journal Theme → Custom 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! :)
» 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;
}