June 2021

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

Tags

Powered by InsaneJournal

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

Comments

What is Breitling? Do you know Breitling Watches? Buy these Breitling Watches sale on line.More cheap Breitling Watches for sale! Breitling replica Watches looklike a wonder.
Please dicount Breitling Watches for yourself. Breitling Watch is your best friend. Breitling Watch sale well.Looking these cheap Breitling Watch online. Because Breitling replica Watch is a wonder! So do please dicount Breitling Watch for youselves!!! 小强测试!!!!
replica watch are the hottest affairs items in the bazaar for fake watch .
replica watch are the hottest affairs items in the bazaar for fake watch .