Navigate

Need More Help?

If this page still leaves you confused, then you might want to visit one of these great CSS help sites!

Credit

CSS layout by me, srawasfrozen. Get one like it @ KillTheLights CSS

Quick CSS help by Sra

Hi there, I'm Sra, and the first thing you need to know about this page is that the purpose is to teach you useful tricks to help you edit CSS. I get a lot of questions everyday regarding my layouts such as, How do I make my pets smaller on my lookup? or How do I get rid of the trophies section? I know that everyone is different in the way they want to express themselves, and I'm here to help you do that. (:

Editing Lookups

There are many things you can do with a lookup since there's just so much going on. You have content modules everywhere, backgrounds to change, text colors to edit, pictures to add, etc. Lets start with the content modules.

A lot of people don't like displaying all of their stats, but some people do so thats why on all of my premades I try to keep as many present as possible. But if you ever want to remove one here's how you do it:

TO GET RID OF A CONTENT MODULE:

Let's take the trophies content module for example. To get rid of the trophies, you would put this code in between your style tags:

#usertrophies{//display:none;display:none;}

Make sure there is something before this code or else it won't work. For example, put the code for background color before it:

body{background:#000000;} #usertrophies{//display:none;display:none;}

OTHER CONTENT MODULES YOU CAN GET RID OF:

Now for the rest of them. Here's a list of the other content modules: #usercollections, #userinfo, #usershop, #userneohome, #userneopets. (You'll probably notice that I get rid of the neohome in most of my lookups).

EDITING CONTENT MODULE IMAGES:

Sometimes, when you have too many pets or trophies, your content modules get stretched really big and distort your lookup. To fix this problem, just make your pets/trophies smaller so they all fit nicely. To change the size just use this code:

#userneopets img{width:110px; height:110px;} #usertrophies img{width:50px; height:50px;}

Now, you don't have to use those exact numbers. Those are just the sizes that I normally use for my layouts. If you wanted them to be slightly bigger or smaller go ahead and change the numbers yourself.

NOTE: Keep the width and height equal if you want to maintain the image quality. Making the width size different from the height will result in distortion of the image. In other words, just don't do it.

WRAP AROUND TEXT:

To spice up an image on my lookup I sometimes like to wrap my text around it to get rid of any blank white spaces. Here's an example of what I mean:

Here's some sample text that I wrapped around a picture of Tom Kaulitz, lead guitarist of the band Tokio Hotel. He has a twin brother named Bill who was born only 10 minutes after him. Isn't he cute? Well this is a picture of him from when he was younger. Maybe 14 or 15 years old. Now he is 20 and looks much different. But not bad different. He still looks amazing! Just in case you're wondering why I'm rambling, its just because this effect looks better when theres more text wrapping around the image. I'm really not as obsessed with Tokio Hotel as you may be thinking at this point. Or maybe I am. Haha. xD

See what I mean by wrap around text? Well, if you want to try this out then use this code:

<img src="http://i38.tinypic.com/10r8t5c.jpg" align="left"> Text goes here. Wrap your text around here and type as much as you want. When you're finished then use this code here: <br clear="left">

Of course, when using this code, replace the URL I used with the URL of the image you want to use. Make sure the image isn't too big or else you will have to type a lot to make the text wrap around. This works best with smaller images and icons.

NOTE: You can also make the image aligned to the right by inserting the word right where you see the word left in the code. This also looks very nice, so try it out sometime.