How to Change the User/Community/Security Icons for Minimalism

Dec 17, 2008 12:40

In your image program, create four 16x16 pixel images - one for protected entries, one for private entries, one for usericons and one for community icons. Or you can find images by going to various websites, like FamFamFam or Icongalore. Once you have the images, save them and upload them to your own image host. For Example Photobucket.

THIS TUTORIAL IS FOR THE MINIMALISM STYLE

The BOLDED/RED codes need to be added to your custom style sheet

For Example:

body {
        font-family: Arial, sans-serif;
        font-size: 12px;
        margin: 0px;
        background-color: #f8f8f8;
        color: #000000;
        background-image: url('');
     }
     a {
        color: #000000;
     }
     a:visited {
        color: #314667;
     }

/* User Icons */
     .ljuser img[src*="userinfo.gif"] {
         width:0;
         height: 0;
         background-repeat: no-repeat;
         background-image: url(YOUR IMAGE LINK) !important;
         padding: 16px 16px 0 0 !important;
         }
/* Community Icons */
     .ljuser img[src*="community.gif"] {
         width:0;
         height: 0;
         background-repeat: no-repeat;
         background-image: url(YOUR IMAGE LINK) !important;
         padding: 16px 16px 0 0 !important;
         }
/* Protected Icon (the lock) */
     .entry-title IMG[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
         width: 0;
         height: 0;
         padding: 0 16px 16px 0;
         background: url("YOUR IMAGE LINK");
         }
/* Private Icon (the eye) */
     .entry-title IMG[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
         width: 0;
         height: 0;
         padding: 0 16px 16px 0;
         background: url("YOUR IMAGE LINK");
         }

tutorial: minimalism, tutorial

Previous post Next post
Up