I posted this on the boards in the profile section as well, but I know a lot of people don't venture into the black hole that is the forums, soo....
Allright, so when I first joined mibba, I started looking at people's profiles, and noticing how spiffy and colorful they were. I was really jealous of their custom layouts, but I didn't know how to make them myself. So, I did what all new people do, and requested a layout. Now, for anyone who's ever asked in that thread, you know that a layout is almost never made. Tired of waiting for a profile, I used one of the premade layouts for a while.
Eventually, I caved and taught myself CSS by editing a premade layout with colors that I liked -which didn't go over too well with the original maker- and seemed like a very roundabout and difficult way to learn CSS.
Recently, I decided to do something about the lack of knowledge there is for a new mibbian wanting to edit their profile. And I came up with, the Mibba CSS tutorial.
First, some basic things to know. Divs are going to be referred to in this guide, and a div is basically a section of your HTML.
CSS and HTML work together to create a page. HTML is the raw data, and CSS makes it pretty. For the most part, this is a tutorial on changing colors, fonts sizes and alignments of the default profile layout. We might get into fancy stuff later.
If I've missed an important code, please POST!
So. First step first. You're going to need to change your CSS codes to this:
html body div #menu, html body div #menu a {font-family: arial; font-size:11.5px; background-color:#1b4c7c; color:#ffffff; }
html body div #options, html body div #options a { font-family:arial; font-size:11px; background-color: #24578a; color:#ebec9e; }
html body div #options span a, html body div #options span { font-family:arial; font-size:11px; background-color: #24578a; color:#89e1a8; }
html body div #options span a:hover, html body div #options a:hover, html body div #menu a:hover {text-decoration:underline;}
body {background-color: #336699; background-image: url(); background-position:center top; background-repeat: repeat-x; /*can be repeat-y, no-repeat*/ background-attachment: scroll; /*can be fixed*/}
#main {background-color:#f76229; color:#ffffff; border: solid 10px #24578a; background-image:url();}
#info-section {background-color: #24578a; color:#ffffff;}
#about-section {background-color: #fefefe; color:#000000; }
h1 {background-color:#24578a; color: #ffffff; text-align:left; font-family: arial; font-size:20px; }
#image {background-color: #f76229; }
#image img {background-color: #fa7542; border: solid 1px #e14509; }
#info {background-color: #f76229 }
#info dt { font-family: arial; font-size:13px; text-align:right; background-color: #e5480d; color: #ffffff; }
#info dd { font-family: arial; font-size:13px; text-align:left; background-color: #e5480d; color: #ffffff; }
#stories h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
#stories {background-color: #f76229; color: #ffffff; }
#stories ul li h3 a { color: #ffffff; font-family: arial; font-size:14px; text-align:left; }
#stories ul li span { color: #ffffff; font-family: arial; font-size: 11px; text-align: left; }
#stories ul li span a { color: #ffffff; font-family: arial; font-size: 11px; }
#stories li { background-color: #e5480d; }
#stories ul li span a:hover, #stories ul li h3 a:hover {text-decoration:underline;}
#poems h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
#poems {background-color: #f76229; color: #ffffff; }
#poems ul li h3 a { color: #ffffff; font-family: arial; font-size:14px; text-align:left; }
#poems ul li span { color: #ffffff; font-family: arial; font-size: 11px; text-align: left; }
#poems li { background-color: #e5480d; }
#poems ul li h3 a:hover {text-decoration:underline;}
#journals h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
#journals {background-color: #f76229; color: #ffffff; }
#journals ul li h3 a { color: #ffffff; font-family: arial; font-size:14px; text-align:left; }
#journals ul li span { color: #ffffff; font-family: arial; font-size: 11px; text-align: left; }
#journals li { background-color: #e5480d; }
#journals ul li h3 a:hover {text-decoration:underline;}
#photos h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
#photos {background-color: #f76229;}
#photos .photo {background-color: #fa7542; border: solid 1px #e14509; }
#photos .photo div {color: #ffffff; background-color: #e5480d; text-align: center; font-family: arial; font-size: 11px; }
#friends h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
#friends img { background-color: #e5480d; }
#friends div { color: #992d0d; font-family: arial; text-align: center; font-size: 11px; }
#friends { background-color: #f76229; }
#about h2 { background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
#about {background-color: #ffffff;}
#about-content {background-color: #ffffff; color: #444444; font-family: arial; font-size: 12px; text-align: left; }
#comments h2 { background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
#comment-area {background-color: #ffffff; }
.options{ color: #666666;}
.options a { color: #f85800; }
.options .number {color: #666666;}
a.report { color: #f85800;}/*REPORT COMMENT LINK*/
a.comment-delete{ color: #f85800;}/*DELETE COMMENT LINK*/
.pages { background-color:#ffefe9; }
.pages .info { color:#e5480d; }
#comment-list {background-color:#ffffff;}
#comment-list li {color:#333333; background-color:#f2f4f6; font-family:arial; font-size:12px; }
#comment-list img { background-color: #ffffff;}
.add-comment {background-color: #f2f4f6}
.add-comment a { color:#f85800; }
If you copy and paste that into your CSS, it will not change your layout. It is the basic codes for your mibba page that will be changed to suit what you would like.
Allright, so now you have all of your codes that you need to change. Next step? Start changing them. (All things have been linked to images of the attributes being changed, click the links to see what you're changing.)
We'll begin with your top menu.
It's the first code of your CSS, and it looks like this:
html body div #menu, html body div #menu a {font-family: arial; font-size:11.5px; background-color:#1b4c7c; color:#ffffff; }
We're going to change that a little, so you can see what does what.
First, change the part that says color:#ffffff; to color:#000000; (Or any other Hexadecimal color code)
Press "Save Changes", open your profile in a new window or tab, and refresh your page. The white font in your top menu should now be black.
If a code doesn't work, check back to your CSS, and make sure you are not missing any brackets, semicolons or #signs.
Next step, changing the colors of the top menu span and the top menu options.
The options are the next line of code:
html body div #options, html body div #options a { font-family:arial; font-size:11px; background-color: #24578a; color:#ebec9e; }
And the span the next after:
html body div #options span a, html body div #options span { font-family:arial; font-size:11px; background-color: #24578a; color:#89e1a8; }
Again, change the color codes to color:#000000;
Save Changes, tab and refresh your page to make sure it has worked.
Allright, so our text is black. It's not very visible, so we're going to change the background color of our menus to white.
Look for the part of the code that says this: background-color: #24578a;.
Change it to this: background-color: #ffffff; in all three sections (span, options and menu).
Save changes and refresh your page.
Our top menus have a white background and black text. Time to change the style of the font.
Font is changed using a number of different codes. These are all listed at the bottom of this post, but for now, we're going to change the font-face and the size.
The section of code you're looking for is this: font-family:arial; font-size:11(.5)px;
Change those codes to font-family: times; font-size: 10px;.
Save changes, and refresh your profile.
Your text should now be times new roman, and size 10.
We're going to skip the next line of code for now, but we'll come back to it.
The next change on our pages is our background.
This code is what makes the page be a plain blue:
body {background-color: #336699; background-image: url(); background-position:center top; background-repeat: repeat-x; /*can be repeat-y, no-repeat*/ background-attachment: scroll; /*can be fixed*/}
We're going to add an image, change color, and add a top margin so we can see our image.
First, the image. We need to find an image on photobucket, or any similar site.
I chose this image to use for our example, but you can use any image you like.
To change the background image, you change this part of the code: background-image: url(); to this:
background-image: url(http://i179.photobucket.com/albums/w299/frango09/a4copyretro.jpg);
Save changes, and refresh your page.
You should have a background image that is repeating all over your page.
To change the repeat, from repeating horizontally, to no repeat, change this code:background-repeat: repeat-x; /*can be repeat-y, no-repeat*/
To this code: background-repeat: no-repeat;
Save changes, and refresh your page.
To change the position, from center top to bottom right, change this code: background-position:center top;
To this code: background-position: bottom-right;
We're going to leave the background-attachment as it is.
We also need to change our pages background color to match our image.
Change this code: background-color: #336699;.
To this code: background-color: #ffffff;
Now, our Main div. This is the section that holds all of our content on the page.
The code for our main div is this: #main {background-color:#f76229; color:#ffffff; border: solid 10px #24578a; background-image:url();}
First, we're going to change the background color.
The code within that that changes our background color is this: background-color:#f76229;.
We're going to make our background color transparent so we can see our background image.
Change your code for the background color to this: background-color:transparent;
Save changes, and refresh your profile.
Your background color should now be transparent. You won't be able to see the background image because there are other things in the way, but the bottom left corner of your div should be white(showing the page background).
Next, we're going to change the font color to black.
This is not actually going to change anything yet, because all of our text have codes of their own, but the code does work.
The piece of code your looking to change is: color:#ffffff; (White font)
You're going to change it to: color:#000000; (black font)
Save changes and refresh your page.
Next, we're going to change the border.
The code for the border of your main div is this: border: solid 10px #24578a;
If you'd like the border to disappear, you can do two things. Change 10px to 0px or change #24578a to transparent.
The parts of this code (border: solid 10px #24578a;) each change a different thing. Solid means the border is solid, 10px means the border is 10px wide, and #24578a means the border is that color (blue).
We're going to get rid of the border entirely, by changing the width.
Change 10px to 0px.
Save changes and refresh your page.
The last part of the code is this: background-image: url();
This code isn't going to be changed, unless you'd like to add an image to your background. If it's removed, the main div turns orange, I'm not sure why.
Next, we're going to change the info section.
The code for the info-section is: #info-section {background-color: #24578a; color:#ffffff;}
We're going to change the background color first. Change this part of the code: background-color: #24578a; to background-color:transparent;.
Save changes, and refresh your page.
The strip of blue between your info-section and about-section should now be transparent.
The font color is changed using this code: color:#ffffff;.
Change that code to: color:#000000;
Save changes, and refresh your page.
It won't have changed anything, because everything already has a color specification.
Next, we're going to change our Username. (h1)
This line of code changes our Username. h1 {background-color:#24578a; color: #ffffff; text-align:left; font-family: arial; font-size:20px; }
First, we'll change the background color to match our image.
Change background-color:#24578a; to background-color:#b6f535;
Save changes and refresh your page.
The background of your username should now be green.
We're also going to change the font style and font color.
For the color, change color:#ffffff; to color:#000000;
For the style, change font-family:arial; to font-family:times;
Save changes, and refresh your page.
Your font should now be black, and times new roman.
Next, we're going to change your profile pictures background/area.
This is the code for the area around the image. #image {background-color: #f76229; }
We're going to make the background transparent, by changing background-color:#f76229; to background-color:transparent;
Save changes, and refresh your page.
Next, we're going to change the frame around your picture.
It is edited using this code: #image img {background-color: #fa7542; border: solid 1px #e14509; }
First, lets change the background color to match our image.
Change background-color: #fa7542; to background-color: #fedcfd;
Save changes, and refresh your page.
We're also going to make the border thicker, and black.
Change border: solid 1px #e14509;.
1px -> 4px;
#e14509 -> #000000
Next, we're going to change our Info.
The code for the background of our info is this:#info {background-color: #f76229 }
We're just going to change the background-color to transparent.
Replace the color code with transparent.
Save changes, refresh your page to make sure it worked.
The code for the left side of our info (the "questions") is this:
#info dt { font-family: arial; font-size:13px; text-align:right; background-color: #e5480d; color: #ffffff; }
Let's change the background color first. We're going to change it to match our image.
Change background-color: #e5480d; to background-color: #fedcfd;
Save changes, and refresh your page.
Next, the font.
Change color:#ffffff; to color:#000000; to turn the font black.
Change font-family: arial; to font-family:times; to change the font to times.
Change font-size:13px; to font-size:10px; to change the font size.
Do the same with the next line of codes that change your answers.
Change #info dd { font-family: arial; font-size:13px; text-align:left; background-color: #e5480d; color: #ffffff; }
to #info dd { font-family: times; font-size:10px; text-align:left; background-color: #fedcfd; color: #000000; }
Save changes, and refresh your page. Your info section should have black, times new roman text on a pale pink background.
Next, we're going to take a look at our stories section. The codes that change our story section are these:
The header.
#stories h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
The background/default font color
#stories {background-color: #f76229; color: #ffffff; }
The story title links.
#stories ul li h3 a { color: #ffffff; font-family: arial; font-size:14px; text-align:left; }
The date/update info
#stories ul li span { color: #ffffff; font-family: arial; font-size: 11px; text-align: left; }
The most recent chapter link
#stories ul li span a { color: #ffffff; font-family: arial; font-size: 11px; }
The orange rectangle that contains your story title/links
#stories li { background-color: #e5480d; }
v We'll edit this one later.
#stories ul li span a:hover, #stories ul li h3 a:hover {text-decoration:underline;}
So first, we're going to edit our header/title for the story section.
This is the code we have to change: #stories h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
We're going to change the background color, the font family and the font color so that our header looks like our username.
First, the background color needs to be changed to green.
Change background-color:#24578a; to background-color:#b6f535.
Save changes, refresh your page.
Let's change the font as well.
Change color:#ffffff; to color:#000000; to change the font color to black.
Change font-family:arial; to font-family:times; to change the font style to times new roman.
Save changes, and refresh your page.
Next, we're going to change the background of the entire section to transparent.
Change this code: #stories {background-color: #f76229; color: #ffffff; }
Change the background-color code to transparent.
Next, our story title links. They are changed using this code:
#stories ul li h3 a { color: #ffffff; font-family: arial; font-size:14px; text-align:left; }
First, the font.
Change color:#ffffff; to color:#000000; To change the font color to black.
Change font-family:arial; to font-family:times; to change the font style to times new roman.
Change font-size:14px; to font-size:12px; to change the font size.
Save changes, and refresh your page.
This code changes your span (ie, "Latest update: Chapter 1 on May 3rd, 2009")
#stories ul li span { color: #ffffff; font-family: arial; font-size: 11px; text-align: left; }
Change color:#ffffff; to color:#000000; to change the font color to black.
Change font-family:arial; to font-family:times; to change the font style to times new roman.
Change font-size: 11px; to font-size:10px; to change the font size.
Save changes, and refresh your page.
Next, the Chapter link.
This code changes the most recent chapter's link.
#stories ul li span a { color: #ffffff; font-family: arial; font-size: 11px; }
Change color:#ffffff; to color:#000000; to change the font color to black.
Change font-family:arial; to font-family:times; to change the font face to times new roman.
Change font-size:11px; to font-size:10.5px; to change the font size.
Save changes and refresh your page.
The last code in your story section is this:
#stories li { background-color: #e5480d; } and it changes the little orange rectangles.
Change background-color: #e5480d; to background-color: #fedcfd; to change the background color to pale pink.
You're going to do the same thing for the next sections, your poems, and your journals.
Every time you see color:#ffffff;, you're going to change it to color:#000000;, to change the font color to black.
Every time you see font-family:arial; you're going to change it to font-family:times; to change the font face to times new roman.
Every time you see font-size:14px; change it to font-size:12px;
Every time you see font-size:11px; change it to font-size:10px;
When the code says background-color: #f76229; that means the section is light orange. This generally means the section is the entire background. Change it to background-color:transparent;
When the code says background-color: #24578a; that means the background is blue. This is referring to the background of headers (journals, stories, etc.) Change this code to background-color:#b6f535; to make it green.
When the code says background-color:#e5480d; that means the background color is dark orange.
Change the code to background-color:#fedcfd to change the color to light pink.
Remember to save your changes and refresh your profile after every change to make sure it worked.
The next section is our photos section. These are all the codes for your photo section.
Your header:
#photos h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
The section:
#photos {background-color: #f76229;}
The images
#photos .photo {background-color: #fa7542; border: solid 1px #e14509; }
The number of comments/text
#photos .photo div {color: #ffffff; background-color: #e5480d; text-align: center; font-family: arial; font-size: 11px; }
First, the header. We're going to turn the background green, and change the font to black times new roman.
Change background-color: #24578a; to background-color:#b6f535
Change color: #ffffff; to color:#000000;
Change font-family: arial; to font-family:times;
Save changes, and refresh your page.
Next, the entire section needs to be transparent.
The code that you're changing is #photos {background-color: #f76229;}.
Change background-color:#f76229; to background-color:transparent;
Save changes, and refresh your page.
Next, the image backgrounds.
The code that is being changed is #photos .photo {background-color: #fa7542; border: solid 1px #e14509; }.
Change background-color:#fa7542; to background-color:#fedcfd; to make the background color pale pink.
Change border: solid 1px #e14509; to border: solid 3px #000000; to make the border thicker and black.
Saves changes, and refresh your page.
Lastly, the code for the text under your images.
The code is #photos .photo div {color: #ffffff; background-color: #e5480d; text-align: center; font-family: arial; font-size: 11px; }
Change color:#ffffff; to color:#000000; to change the font to black.
Change background-color:#e5480d; to background-color: #fedcfd; to make the background pale pink.
Change font-family:arial; to font-family:times; to make your font face times new roman.
Change font-size:11px; to font-size:10px; to make your font smaller.
Save changes, and refresh your page.
Your next section is your friends section. These are the codes for your friends section:
The header/title.
#friends h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
The images/avatars
#friends img { background-color: #e5480d; }
The usernames
#friends div { color: #992d0d; font-family: arial; text-align: center; font-size: 11px; }
The friends section
#friends { background-color: #f76229; }
First, the header. This is the code: #friends h2 {background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
We're going to turn the background green, and change the font to black times new roman.
Change background-color: #24578a; to background-color:#b6f535
Change color: #ffffff; to color:#000000;
Change font-family: arial; to font-family:times;
Save changes, and refresh your page.
Next, the images.
The code is: #friends img { background-color: #e5480d; }
We're going to add a border, and change the background color to pale pink.
Add this code: border:solid 3px #000000; to add a solid black border
Change background-color:#e5480d; to background-color:#fedcfd; to change the background color to pink.
Save changes, and refresh your page.
Next, the usernames. The usernames are changed using this code:
#friends div { color: #992d0d; font-family: arial; text-align: center; font-size: 11px; }
First, change color: #992d0d; to color:#000000; to change the font color to black.
Change font-family:arial; to font-family:times to change the font to times new roman.
Change font-size:11px; to font-size:10px; to make the font smaller.
Save changes, and refresh your page.
Lastly, the background color for the section.
The code is #friends { background-color: #f76229; }
Change background-color:#f76299; to background-color:transparent;.
Save changes, and refresh your page.
Congratulations! You've edited the entire left section of your profile. Now to the other side, your About Me and your Comments.
First, the background of the entire section. The code for the section is:
#about-section {background-color: #fefefe; color:#000000; }
Change background-color: #fefefe; to background-color:transparent;
Save changes, and refresh your page.
Next, modifying your about-me.
You can do all sorts of things with this section, but for now, we're just going to change a few things.
First, the header:
Change this code: #about h2 { background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
Change background-color: #24578a; to background-color:#b6f535
Change color: #ffffff; to color:#000000;
Change font-family: arial; to font-family:times;
Save changes, and refresh your page.
Next, the actual content.
The background for the entire section is changed with this code:
#about {background-color:#ffffff;}
Change background-color:#ffffff; to background-color:#fedcfd;
The section where you enter text is changed with this code:
#about-content {background-color: #ffffff; color: #000000; font-family: arial; font-size: 11px; text-align: left; }
Leave the background color as it is, as well as the font color.
Change font-family: arial; to font-family:times; to change the font face to times.
Change font-size:11px; to font-size:10px;
Add border-left:solid 3px #ffffff;, so that your text is easier to read.
Update! Comment codes
Like always, we're starting with the header.
The code is this:
#comment-area h2 { background-color: #24578a; color: #ffffff; font-size: 20px; font-family: arial; text-align: left; }
Change background-color: #24578a; to background-color:#b6f535
Change color: #ffffff; to color:#000000;
Change font-family: arial; to font-family:times;
Save changes, refresh your page.
The codes get a little confused after that, but the next is this:
#comment-area {background-color: #ffffff; }
Change background-color:#ffffff; to background-color:transparent;
Save changes, refresh your page.
The next few codes apply to the date/time stamp on each individual comment.
The text:
.options{ color: #666666;}
The Username/user link:
.options a { color: #f85800; }
The number
.options .number {color: #666666;}
Change all of the color:#666666/color:#f85800 to color:#000000; to turn the font black.
Add the code font-family:times; to each section to make the font times new roman.
Add the code font-size:11px; to make the font smaller.
Save changes, refresh your page.
Next, the code for the Report link:
a.report { color: #f85800;}/*REPORT COMMENT LINK*/
Change color:#f85800; to color:#000000;.
Add the code font-family:times; to make the font times new roman.
Add the code font-size:11px; to make the font smaller.
Save changes, refresh your page.
Next, the Delete link:
a.comment-delete{ color: #f85800;}/*DELETE COMMENT LINK*/
Change color:#f85800; to color:#000000;.
Add the code font-family:times; to make the font times new roman.
Add the code font-size:11px; to make the font smaller.
Save changes, refresh your page.
Next, the "Pages" box.
.pages { background-color:#ffefe9; }
Change background-color:#ffefe9; to background-color: #fedcfd;.
Save changes, refresh your page.
Next, the Pages text (Says PAGES).
.pages .info { color:#e5480d; }
Change color:#e5480d; to color:#000000;.
Add the code font-family:times; to change the font to times new roman.
Add the code font-size:11px; to make the font smaller.
Save changes, refresh your page.
Add this code to change your PAGES links.
Forgot it in the original draft.
.pages a {color:#000000; font-size:11px; font-family:times; }
Save changes, refresh your page.
Next, the spaces between comments (Yes, there's a code for that. :XD)
#comment-list {background-color:#ffffff;}
Change background-color:#ffffff; to background-color:transparent;
Save changes, refresh your page.
Next, the actual content of your comments.
#comment-list li {color:#333333; background-color:#f2f4f6; font-family:arial; font-size:12px; }
Change color:#333333; to color:#000000; to turn your font black.
Change background-color:#f2f4f6; to background-color:#7fcbfd; to turn the background pale blue.
Change font-family:arial; to font-family:times; to change the font to times new roman.
Change font-size:12px; to font-size:10px; to make the font smaller.
Save changes, refresh your page.
Next, the avatars.
#comment-list img { background-color: #ffffff;}
You can change the background color, add a border, anything you'd like, so long as it's between those two brackets. We're going to leave it as is for the moment, however.
Finally, the Add Comment link.
The background/little box for the link.
.add-comment {background-color: #f2f4f6}
The text of the link.
.add-comment a { color:#f85800; }
First, the box:
.add-comment {background-color: #f2f4f6}
Change background-color: #f2f4f6; to background-color: #f2f4f6; to turn the background color a pale blue.
Save changes, refresh your page.
And the link:
.add-comment a { color:#f85800; }
Change color:#f85800; to color:#000000; to turn the font black.
Add font-family:times; to make the font face times new roman.
Add font-size:11px; to make the font smaller.
You're done! Congratulations. You've edited your entire profile with colors that you like, without waiting a month for (or never getting) a reply on a page or thread.
If you'd like to get into the more complicated CSS, or have a question, or spot a broken code, please post here, comment me, or PM me.
Not registered?
Create an account
