June 2021

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
27282930   

Tags

Powered by InsaneJournal
[info]reijamira wrote
on September 18th, 2007 at 01:14 am

How to change the mini community/user icons

This tutorial will show you how to change the mini icons (like that crazy Tweakface or the chicken ) to something more fancy and nice.


WHERE TO FIND MINI ICONS:

You can either watch out for tiny icons in communities/blogs or you visit the following sites:

FamFamFam
Graphic Push
Sweetie


YOU NEED:

A stylesheet or a theme layer. (Note: Only user with paid/permanent accounts can create theme layers.)
This is for both free and paid/permanent accounts.


INSTALLATION:

I. Using a stylesheet (For both free and paid/permanent accounts.)

#1 Upload the community/user mini icons you want to use to an image hosting site like Photobucket.

#2 Go to the journal customization site.

#3 Scroll down to the Custom Stylesheet Box.

#4 Now, if you have already altered your layout with CSS, look for this sequence:

/* maincontent */

If you can't find it, or if you haven't used any CSS yet, copy and paste this code into the Custom Style Sheet Box.

#5 Now take this code and replace the orange urls with the urls of your uploaded mini icons.

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

       .ljuser img[src="http://www.insanejournal.com/img/userinfo.gif"] {
                background-image: url(http://www.yoururl.com/userinfo.gif);
		padding: 16px 0px 0px 16px;
		}

       .ljuser img[src="http://www.insanejournal.com/img/community.gif"] { 
                background-image: url(http://www.yoururl.com/community.gif);
		padding: 16px 0px 0px 16px;
		}


#6 Change the padding properties according to your mini icons.

Explanation: padding is used to define the padding of an element. It describes the space between the content and its borders.

padding: 0px 0px 0px 0px; (top right bottom left)


#7 Then copy and paste this code into the Custom Style Sheet Box right after /* maincontent */. (See preview.)

#8 Now hit save and go back to your journal. You should now see your mini icons there.



II. Using a theme layer (For paid/permanent accounts only.)

#1 Follow steps #1, #5 and #6 from before.

#2 Go to your theme layer. If you have none, create a theme layer.

#3 Insert the following code after the layerinfo declarations:


function Page::print_custom_head()
{
"""
<style type="text/css">

Your CSS goes here

</style>
""";
}


#4 Now, in case you don't have it already, put the following code between the "style" tags where it reads "Your CSS goes here":

/* maincontent */


#5 Copy and paste the mini user icon code from the previous step #5 after the /* maincontent */

#6 Hit the Save & Compile button. That's it.


&hearts You found this helpful? Please let me know. &hearts

(Read Comments)
From:
( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.