S2 Security Icons Tutorial - Updated 11/10/2008

[msblackeyeliner]

Today we are going to learn how to alter the security icons ( & ) for various S2 layouts.
Navigation   • How to Install the Codes

• 3 Column
     • A Novel Conundrum
     • A Sturdy Gesture
     • Bloggish
     • Classic
     • Clean and Simple
     • Component
     • Cuteness Attack
     • Dear Diary...
     • Digital Muliplex
     • Disjointed
     • Expressive
     • Flexible Squares
     • Generator
     • Gradient Strip
     • Haven
     • Magazine
     • Notepad
     • Opal
     • Smooth Sailing
     • Punquin Elegant
     • Quite Lickable
     • Refried Paper
     • Tabular Indent
     • Tranquility II
     • Unearthed
     • Variable Flow

• FAQ
  • Other Resources
These overrides are designed for free, plus and paid accounts. They are for S2 layouts.

________________________________________________________________________________________________

How to Install the Codes ( Back to Top)

To Start:
In your image program, create two 16x16 pixel images - one for protected entries and one for private entries. 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.
These 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;
     }
   /* 3 Column Security Icon Code */
     .aboutentry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
         width: 0;
         height: 0;
         padding: 0 16px 16px 0;
         background: url("http://YOURIMAGELINK.com");
    }

________________________________________________________________________________________________


3 Column ( Back to Top)
  .aboutentry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
 }
  .aboutentry img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.aboutentry img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


A Novel Conundrum ( Back to Top)
  .author img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .author img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }


A Sturdy Gesture/Cuteness Attack ( Back to Top)
  h2 img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  h2 img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

h2 img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Bloggish ( Back to Top)
  .entry-header img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .entry-header img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.entry-header img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Classic ( Back to Top)
  .metabar img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .metabar img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.metabar img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Clean and Simple/Variable Flow ( Back to Top)
  .entryheading img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .entryheading img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.entryheading img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Component - for Paid/Plus Accounts Only! ( Back to Top)
  .entryDate img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .entryDate img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.entryDate img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Dear Diary.../Smooth Sailing/Quite Lickable ( Back to Top)
  .entryHeader img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .entryHeader img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.entryHeader img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Digital Muliplex ( Back to Top)
  .heading_bar img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .heading_bar img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.heading_bar img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Disjointed ( Back to Top)
  td .metabox img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  td .metabox img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

td .metabox img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Expressive - for Paid/Plus Accounts Only! ( Back to Top)
  .asset-header img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .asset-header img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.asset-header img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Flexible Squares/Haven ( Back to Top)
  .subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.subject img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Generator ( Back to Top)
  .entrybox td.caption img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .entrybox td.caption img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.entrybox td.caption img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Gradient ( Back to Top)
  div .entrymeta img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  div .entrymeta img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

div .entrymeta img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Magazine ( Back to Top)
  H3 img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  H3 img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

H3 img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Notepad ( Back to Top)
  .entry font img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .entry font img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.entry font img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Opal ( Back to Top)
  .entryinfo img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .entryinfo img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.entryinfo img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Punquin Elegant ( Back to Top)
  .entry strong img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .entry strong img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.entry strong img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Refried Paper ( Back to Top)
  .datecontent img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .datecontent img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.datecontent img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Tabular Indent ( Back to Top)
  td img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  td img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }


Tranquility II ( Back to Top)
  .content h2 img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .content h2 img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.content h2 img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }


Unearthed ( Back to Top)
  .BoxTitle img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }
  .BoxTitle img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{
     width: 0;
     height: 0;
     padding: 0 16px 16px 0;
     background: url("http://YOURIMAGELINK.com");
  }

.BoxTitle img {
     width: 0;
     height: 0;
     background-repeat: no-repeat;
     /* so that IE users will still see an image */
     background-image: url("http://YOURIMAGELINK.com");
     padding: 16px 16px 0 0;
  }

________________________________________________________________________________________________

FAQ ( Back to Top)

How do I install these?
By Reading the Installation Guide here.
I'm using IE, why can't I see my image for private entries?
IE does not recognize the [] in this part, img[src="http://p-stat.livejournal.com/img/icon_protected.gif"], of the coding. Therefore you can only change one part of the images for IE.
Why aren't these working for me? I'm using S1.
These are for S2 Styles, to use the ones for S1 please refer to this tutorial.
Why aren't these working for me? I'm using S2 Insert Stlye Name Here.
First make sure you copied the codes for the correct Style, then make sure you copied the codes correctly. If it's still not working, make sure that you changed the links (http://YOURIMAGELINK.com) to your own links. If after all that it's still not working, make a new post in everything_lj with your overrides, and we will assist you.
My image is repeating or there is alot of space around my image! Help?
Make sure you altered the padding to the correct height. For Example your padding says:
    padding: 0 16px 16px 0;
But your image is 8px by 8px, this leave alot of space around the image (and perhaps will even make it repeat). So make sure you alter it accordingly!
I'm using Tabular Indent or A Novel Conundrum, Why aren't my images showing up in IE?
In both of these styles the code for the image in IE replaces more images, so they are not included in the codes.
In Tablular Indent, it replaces all images. In A Novel Conundrum, it replaces the image for the community and the usericon.

________________________________________________________________________________________________

Other Resources ( Back to Top)

The Following Links are various Resources you can use.
     • How to Change User Info and Community Icons for S2 and S1
     • How to Change Security Icons for S1
     • everything_lj
     • s2howto
     • s2smoothsailing
     • s2flexisquares
     • s2bloggish
     • s2tranquility2
     • s2_tranquility
     • boxer_help
     • component_help
     • s2expressive