Homepage › Tutorials › Technology › How to Make a (Simple) Custom Profile Layout –...

How to Make a (Simple) Custom Profile Layout – Part II, CSS

^{Be sure to read How to Make a (Simple) Custom Profile Layout - Part I, HTML.}

There's a lot you can do with HTML, but without CSS it'll look pretty ugly. Read on to find out how to beautify your layout!

This tutorial has been adapted from the Custom Layout Tutorial written by the lovely and fabulous lovecraft, as well as her FAQ (updated FAQ). The bulk of it is her work; I've just updated it for New Mibba.

What's CSS?

CSS stands for Cascading Style Sheets, the key word being "style". CSS works with HTML to make websites look pretty. Some of you may be used to editing the CSS on your Old Mibba default layouts, so you'll have a headstart. Mibba no longer provides default HTML, but you can find a tutorial on making a simple HTML layout here. Now we need to create CSS to go with that HTML so that our layout doesn't stay looking like this.

On Old Mibba CSS had it's own separate page, but on New Mibba HTML and CSS are on the same page. All of your CSS code will go between these two lines at the top of the profile customization page:

_{<style type="text/css">

</style>}

Customizing Your Layout with CSS

We'll start with the menu bar, which has Mibba's navigation links. The HTML that created your menu bar is added automatically to your profile. Because we don't have access to that HTML, we can't delete those links. We can, however, change the way they look with CSS.

The CSS code for your menu bar is this:

_{html body div #menu, html body div #menu a { }}

Paste that in between the <style> tags of your layout. This code actually controls two elements of your menu bar: the menu bar and its text (that's what's covered by html body div #menu) and any links on the menu bar (that's html body div #menu a). Since all of the text on our menu bar is links, we're going to combine the code. The comma separates the two elements we're changing so it's not read as one long name.

Let's start changing our menu bar! We're going to change the background, the font, and the font color.

Background color is controlled by this code: background-color: #hex;. You probably recognize hex codes; they're a hash mark followed by six letters and/or numbers and are used to change colors in the Mibba layout makers and with BBcode on the boards and in comments. This website has a list of some common colors and their hex values. (It also has a lot more information on HTML and CSS for when you're ready to start exploring other ways to customize your profile!) You can also use a color picker like this one to find specific shades, or a website like this to generate a palette based on an image like the one in our layout, for example.

If we want the background of our menu bar to match the background of the rest of our page, there's an easy way to do that before we even choose a color. Instead of putting a hex code, just put: background-color: transparent;.

Font is controlled by the code font-family: font name;. We can fill in any font name we like; however, if that font isn't installed on the computer used to view our profile, it'll show up as a default font, which might be ugly. To avoid that happening, we'll use a font installed on nearly every computer: font-family: Georgia;.

Font color is changed with this code: color: #hex;. Let's use a dark blue from our image's color palette: color: #212e36;.

We put all these codes between the curly brackets:

_{html body div #menu, html body div #menu a {background-color: transparent; font-family: Georgia; color: #212e36;}}

Notice how every property (eg, background-color) is separated from its value (eg, transparent) by a colon, and how after each value we have a semicolon.

Once we save our changes, our profile will look like this. That background color is very plain, isn't it? Let's change it!

Our page's background is controlled by this code:

_{body { }}

Let's try changing the background color to a light blue like #d8f0f4.

_{body {background-color: #d8f0f4;}}

Now our profile looks like this. Still plain, so let's add a background image! We're going to keep the background color code in, though, so if for any reason our image doesn't load, our profile won't be that old Mibba-blue color.

To add a background image, we need a few codes. First, background-image: url(direct link to image);. This tells our layout where to find the image that'll be our background. We're going to use this image. Since our image is small, we want it to repeat all over the page. To ensure that happens, we'll use the code background-repeat: repeat;. There are other codes to control background images, but we don't need them right now. Let's add our new codes to body and hit submit!

_{body {background-color: #d8f0f4; background-image: url(http://i.imgur.com/bFQ6V.png); background-repeat: repeat;}}

Now that we have the menu bar and background image, let's deal with the content of our layout, which is what we spent all that time making in the HTML part of the tutorial. Remember those IDs you assigned? They're coded in CSS with the hash mark, so <div id="container"> becomes #container { }.

Our containing div is the best place to assign the width of our layout's content. Since we have an image on top, we're going to use its width for container. Our image is 500px wide, so the code we use is width: 500px;.

Add this to the CSS and see how it changes:

_{#container {width: 500px;}}

Doesn't that look better?

Our header is close to all those menu bar links, so we're going to move everything down with the margin code. Let's move the container div down 25px.

_{#container {width: 500px; margin: 25 px;}}

Here's what our layout should look like now. We've actually added a margin around our entire container div, although its only visible effect is on the top. If we wanted to add a margin only to the top, we would write margin-top instead of margin (or -bottom, -right, or -left if we wanted to add or have different margins there).

Our text is a little hard to read on our background, so we're going to add a solid color background to TDs two, three, and four. We'll just use plain white, which is #fff.

Since we want TDs two, three, and four to look the same, we're going to group them all together. Add this to your CSS:

_{#two, #three, #four {background-color: #fff;}}

This is what your layout will look like now. Notice how the text is squished up against the edges of our text areas. To fix this, we're going to add padding:

_{#two, #three, #four {background-color: #fff; padding: 8px;}}

That's better, but we still have another problem: TD two is much narrower than TD three. We'll fix that using the width property again. We want them to be even, and since half of 500 is 250, we'll give each a width of 250px. We don't want TD four to be 250px wide, though, so we're going to start a new line that looks like this:

_{#two, #three {width: 250px;}}

Better, right? Now let's tackle the text. First we'll deal with alignment. Let's make TDs two and three center-aligned and TD four justified.

_{#two, #three {width: 250px; text-align: center;}

#four {text-align: justify;}}

Here's how it'll look now. Notice how our headers in two, three, and four change with the text – we haven't told headers what to look like yet, so they look the way the TD they're in tells them to.

Now let's change the font family, color, and size. You already know how to do the first two. To change font size, use font-size: #px;. We're going to make our text Tahoma, the same dark blue as our menu bar, and 11px.

_{#two, #three, #four {background-color: #fff; padding: 8px; font-family: tahoma; color: #212e36; font-size: 11px;}}

Our text looks a little nicer now, but the links are still the default orange. Link text will change font and size like normal text, but not color; that has to be done separately. Let's make ours green. All we need is a:

_{a {color: #3f7464;}}

Here's what our links look like now.

Our headers need some attention. Until now, they've been inheriting the font style from their TD – our header in TD one hasn't received any formatting. Remember that we labeled our headers as <div class="head">. Because head is a class, it starts with a period instead of a hash mark.

_{.head { }}

Let's change our headers to Georgia, a dark green color, size 20px, and center-aligned.

_{.head {font-family: Georgia; color: #192e28; font-size: 20px; text-align: center;}}

The headers for TDs two, three, and four look okay, but the header in TD one looks a little small for its position. Can we change just that header? Absolutely! Just add this:

_{#one .head {font-size: 50px;}}

Now our header in TD one is nice and big.

You may want to end your profile coding there, but there's still a lot more you can do! We'll look at one last change we can make.

Right now, bold text looks the way we expect it to, but what if we wanted ever word we close in <b> tags to not just be bold, but also to turn purple? We can do that by adding this to our CSS:

_{b {font-color: #50193E;}}

Now whenever we bold text, it'll show up purple. We can do this with any HTML text modifier, and we can do a lot more than change it's color.

That's it for CSS! Your final CSS code should look like this:

_{<style type="text/css">

html body div #menu, html body div #menu a {background-color: transparent; font-family: Georgia; color: #212e36;}

body {background-color: #d8f0f4; background-image: url(http://i.imgur.com/bFQ6V.png);}

#container {width: 500px; margin: 25px;}

#two, #three, #four {background-color: #fff; padding: 8px; font-family: tahoma; color: #212e36; font-size: 11px;}

#two, #three {width: 250px; text-align: center;}

#four {text-align: justify;}

a {color: #3f7464;}

.head {font-family: Georgia; color: #192e28; font-size: 20px; text-align: center;}

#one .head {font-size: 50px;}

b {color: #50193E;}

</style>}

Beneath should be the HTML created in the first part of this tutorial.

Personalizing Your Layout

You probably don't want a layout full of filler text and links to Mibba's homepage, so here I'll show you how I would use this layout for myself. The most important thing you'll need for this part is your user number. Your user number is the number associated with your account. Mine is 3858, so my info page url will be:

_{http://www.mibba.com/Member/3858}

and the custom profile url we just made will be:

_{http://www.mibba.com/Member/3858/Profile}

Let's start with TD one. Here's what we have now:

_{<td colspan="2" id="one">

<div class="head">Header</div>

<img src="http://i.imgur.com/RNEic.jpg">

</td>}

But I don't want the top of my profile to say "Header"; I want it to say my username. I could just type in my username, but then I'd have to come back and change it if I changed my username. A handy trick to avoid this is to use {USERNAME}

_{<td colspan="2" id="one">

<div class="head">{USERNAME}</div>

<img src="http://i.imgur.com/RNEic.jpg">

</td>}

As you can see, {USERNAME} has been replaced with my current username.

Now for TDs two and three, where we have all those links:

_{<tr>

<td id="two">

<div class="head">Header</div>

<a href="http://mibba.com">Mibba</a><br>

<a href="http://mibba.com">Mibba</a><br>

<a href="http://mibba.com">Mibba</a><br>

<a href="http://mibba.com">Mibba</a><br>

</td>

<td id="three">

<div class="head">Header</div>

<a href="http://mibba.com">Mibba</a><br>

<a href="http://mibba.com">Mibba again</a><br>

<a href="http://mibba.com">yet more Mibba</a><br>

<a href="http://mibba.com">hey do you need a link to Mibba?</a><br>

</td>

</tr>}

I want the first link to be to my story's page. Everyone's story page url is:

_{http://www.mibba.com/Member/USER_NUMBER/Stories/}

Since my user number is 3858, my stories url is:

_{http://www.mibba.com/Member/3858/Stories/}

I can just change "Stories" to "Comments", "Poems", "Blog", or "Articles" to make the link go to those pages, or any of my other Mibba pages I might want to link to.

Here's my final links section:

_{<tr>

<td id="two">

<div class="head">read things I wrote and/or talk to me</div>

<a href="http://www.mibba.com/Member/3858/Stories/">Stories</a><br>

<a href="http://www.mibba.com/Member/3858/Comments/">Comments</a><br>

<a href="http://www.mibba.com/Member/3858/Friends/">Friends</a><br>

<a href="http://www.mibba.com/Member/3858/Blog/">Blog</a><br>

</td>

<td id="three">

<div class="head">sometimes I'm not on Mibba</div>

<a href="http://isklajm.tumblr.com">tumblr</a><br>

<a href="http://isklajm.tumblr.com">There's nothing on my tumblr though; don't go there.</a><br>

<a href="http://mibba.com">This link totally isn't to Mibba.</a><br>

<a href="http://mibba.com">It's to. um. Facebook?</a><br>

</td>

</tr>}

Because my headers and one of my links were too long, they spilled into two lines, which messed up the symmetry. Ah, well.

Last is TD four:

_{<td colspan="2" id="four">

<div class="head">Header</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>

<b>Bold</b> | <i>Italic</i> | <s>Strikethrough</s> | <u>Underline</u>

</div>}

I'm just going to write up a simple About Me:

_{<td colspan="2" id="four">

<div class="head">About Me</div>

My name's <b>Mina</b>. I'm twenty-one and live in north Jersey. I just graduated college, which means now when I watch cartoons in my pajamas, I'm watching cartoons in my pajams <i>with a bachelor's degree</i>. <br>

<br>

I know a little bit about <u>HTML and CSS</u>, even less about <s>srs coding</s>, and vastly more about <b>Harry Potter</b>.

</td>}

This is what it looks like, and this is what the profile looks like altogether, personalized for me.

Beyond the Tutorial

This tutorial gives only a small glimpse of what you can do with HTML and CSS. The best way to learn is to experiment! Remember that you can change the margin, padding, font, background, and more of anything we assigned an ID in the HTML. You change also your HTML to change the format of your layout if you don't like the single-column style.

Here are a few helpful links to learn how to customize your layout even further:

CSS Cheat Sheet gives a quick guide to CSS. Not everything applies to make a Mibba layout, but it's useful for when you forget how to change the size of text or mix up margins and padding.
W3Schools is a great resource for all things HTML and CSS (and more). Check out their explanations of styling background, text, and links to find more ways to customize your profile!
To find hex codes to use in your layout, use this list of colors, a colorpicker like this one or this one, or a color palette generator.
If you run into trouble, just head over to Mibba's Layouts board. You can make a thread asking for help, or check out the FAQ.