Customization Tutorials

[mercscilla]

If you still have questions, please comment here. Thank you.



CSS Set-Up Instructions

Go to
Customize

Go to
2. Select a New Theme

- type in the search box Flexible Squares

- and select Blue Gray or another theme

( Screenshot)

Go to
Customize your theme ( Screenshot)

Go to
Custom CSS ( Screenshot)

Make sure
you disable

- Use layout's stylesheet(s)

- Use layout's stylesheet(s) when including custom external stylesheet

- Use external stylesheets

( Screenshot)

Now
copy & paste the CSS code into the box ( Screenshot)

Hit
Save Changes ( Screenshot)



Profile Layout Set-Up

Go to
Personal Info and scroll down to the BIO section ( Screenshot)

Now
copy & paste the profile code into the box ( Screenshot)

Hit
Save Changes ( Screenshot)



Sidebar Customization

Go to
Customize Your Theme ( Screenshot)

Go to
Sidebar ( Screenshot)

Set
to YES

- Show the sidebar?

- Show the default user picture on the sidebar?

- Show the blurb/free text in the sidebar?

( Screenshot)

Now
decide which boxes you want to appear in your layout.

Set them either to YES or NO.

( Screenshot)

Do not
touch Set sidebar width, in pixels! ( Screenshot)

Hit
Save Changes ( Screenshot)



Changing the default Tiny Icons

In the CSS
scroll down to /* ------ MISC ------ */.

Now
copy & paste the following code

.ljuser img
{
width: 0px;
height: 0px;
background-repeat: no-repeat; /*so that IE users will still see an image*/
background: transparent url(URL OF YOUR USER ICON) no-repeat 0 0;
padding: 16px 0px 0px 16px;
}

.ljuser img[src*="userinfo.gif"]
{
background: transparent url(URL OF YOUR USER ICON) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px;

.ljuser img[src*="community.gif"]
{
background: transparent url(URL OF YOUR COMMUNITY ICON) no-repeat scroll 0 0 !important;
padding: 16px 0px 0px 17px;
}

img[src*="icon_protected.gif"]
{
width: 0;
height: 0;
background: (URL OF YOUR LOCK ICON);
padding: 15px 0px 0px 17px !important;
}

img[src*="icon_private.gif"]
{
width: 0;
height: 0;
background: (URL OF YOUR LOCK ICON);
padding: 15px 0px 0px 17px !important;
}

Add
the URLs of your images.

Two for the user and one for each of the other - community, friends-only entry and private entry.

Change
the properties of padding to the one of you images.

The first one is for width.

The last one is for height.

The mini icons
I've made and use can be found here.



Current Icons (music, mood, tag, location)

In the CSS
scroll down to /* ------ MAINCONTENT ------ */.

Now
change OR copy & paste the following code

.ljtags {
margin-top: 20px;
padding-left: 15px;
color: #D7BD64;
font-weight: lighter;
text-transform: lowercase;
font-family: "Tahoma", sans-serif;
background: url(URL OF YOUR TAG ICON) no-repeat center left;
}

.currentlocation {
background: url(URL OF YOUR LOCATION ICON) no-repeat left center;
padding: 0px 0px 0px 15px;
}

.currentmood {
background: url(URL OF YOUR MOOD ICON) no-repeat left center;
padding: 0px 0px 0px 15px;
}

.currentmusic {
background: url(URL OF YOUR MUSIC ICON) no-repeat left center;
padding: 0px 0px 0px 15px;
}

Add
the URLs of your images.

One for the tags, the location, the mood and the music.

Change
the last property of padding.

It is the width of you tiny icon.

I would suggest to add one/two pixels to it (i.e. 13px = 15px).

The tiny icons
are from sweetie.sublink and have been modified into b/w by me.


-> tags |
-> mood |
-> music |
-> location



Changing/Adding a header

In the CSS
scroll down to .headerimage.

Now
copy & paste the following code OR change it

.headerimage {
position: relative;
width: ###px; /* put in the width of your header */
height: ###px; /* put in the height of your header */
margin-left: auto;
margin-right: auto;
margin-top: 0px;
background-image: url(YOUR URL);
background-position: center;
background-repeat: no-repeat;
}

Add
the URL of your header and the height/width of it.

Go
go to #content and change its width to your liking.



CSS Set-Up Anleitung

Gehe zu
Customize

Gehe zu
2. Select a New Theme

- tippe in die Such-Box Flexible Squares

- und wähle Blue Gray oder ein anderes Motiv

( Screenshot)

Gehe zu
Customize your theme ( Screenshot)

Gehe zu
Custom CSS ( Screenshot)

Achte darauf
dass

- Use layout's stylesheet(s)

- Use layout's stylesheet(s) when including custom external stylesheet

- Use external stylesheets

deaktiviert sind.

( Screenshot)

Jetzt
kopiere & einfüge den CSS Code in die Box ( Screenshot)

Drücke
Save Changes ( Screenshot)