Old School Layouts

Nostalgic for your old default layout? Upset that that CSS code you saved is useless? Not so! The Old Mibba default layout relied on special keywords in curly brackets (like {USERNAME}). These keywords fetched certain information to automatically put in your layout so that you wouldn't have to, for example, edit your HTML every time you updated a story. Some of these keywords no longer work – most notably the one that fetched your "About" section from the page where you entered it with BBcode – but many still do, and your About section can be written in your HTML.

The following keywords still work:

• {USERNAME}
• {INFO}
• {STORIES}
• {ARTICLES}
• {POEMS}
• {JOURNALS}

The following keywords do not work:

• {FRIENDS}
• {PHOTOS}
• {COMMENTS}

The {ABOUT} keyword does not work, but can be replaced very easily with HTML.

To get back the default layout, go to My Mibba >> Profile >> Custom profile and paste this into your code box:<style type="text/css">
html body div #menu, html body div #menu a {
font-family: arial;
font-size:11.5px;
background-color:#1b4c7c;
color:#ffffff;}

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;}

#articles h2 {
background-color: #24578a;
color: #ffffff;
font-size: 20px;
font-family: arial;
text-align: left;}

#articles {
background-color: #f76229;
color: #ffffff;}

#articles ul li h3 a {color: #ffffff;
font-family: arial;
font-size:14px;
text-align:left;}

#articles ul li span {color: #ffffff;
font-family: arial;
font-size: 11px;
text-align: left;}

#articles li {
background-color: #e5480d;}

#articles ul li span a:hover, #stories ul li h3 a:hover {
text-decoration:underline;}

#articles li img {
background-color: #e5480d;}

#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;}

#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;}
</style>

<div id="main">
<div id="info-section">
<h1>{USERNAME}</h1>

<div id="image">
<img src="DIRECT LINK TO IMAGE">
</div>

<!-- info_start -->
<div id="info">
{INFO}
</div>
<!-- info_end -->

<!-- stories_start -->
<div id="stories">
<h2>Stories</h2>
{STORIES}
</div>
<!-- stories_end -->

<!-- articles_start -->
<div id="articles">
<h2>Articles</h2>
{ARTICLES}
</div>
<!-- articles_end -->

<!-- poems_start -->
<div id="poems">
<h2>Poems</h2>
{POEMS}
</div>
<!-- poems_end -->

<!-- journals_start -->
<div id="journals">
<h2>Blogs</h2>
{JOURNALS}
</div>
<!-- journals_end -->

</div>

<div id="about-section">

<!-- about_start -->
<div id="about">
<h2>About</h2>
<div id="about-content">
This is where you write your About Me.
</div>
</div>
<!-- about_end -->

</div>
</div>To use a CSS-only layout from Old Mibba, replace the code between the blue lines with the code you want to use. Unnecessary CSS codes (eg, codes that alter the comments section that no longer exists) won't affect the layout, but if you want to make a new layout, the CSS listed above is all you need to edit.

{STORIES}
The keyword for stories will show empty stories; for this reason you may need to limit the number of stories it shows. To do so, change {STORIES} to {STORIES:X}, "X" being the number of stories you want shown.

Profile image
Because {IMAGE} no longer works, you need to replace "DIRECT LINK TO IMAGE" with the direct link to the image you want to use, even if it's a picture of you posted on Mibba. If you your photo is too wide, add width="300" (or whatever number you find appropriate) between the " and the >.

About section
Your about section must be written into your HTML on New Mibba; luckily, this is very easy to do! Just delete the sentence in red and type away. A few key codes:

To insert line breaks: Use <br>. You can also define paragraphs by using <p> at the beginning and </p> at the end.

To bold, italicize, underline, or strikethrough text: Use the following:<b>bold</b>
<i>italic</i>
<u>underline</u>
<s>strikethrough</s>To insert links: Use this format: <a href="URL">text</a>. So a link to Mibba would look like this:<a href="http://mibba.com">Mibba</a>To insert images: Use <img src="direct link to image">. (The same way you insert a profile image.)

---

If you don't want to use the old default layout but want to use the keywords to add (a) story/article/poem/blog section(s) to your profile, you'll need the following CSS codes (all of which assume you'll give the div holding the keyword the same name as the keyword):

{INFO}#info dt { }
#info dd { }{STORIES}#stories ul li h3 a { } /*controls title of story*/
#stories ul li span { } /*controls text with last update link and date*/
#stories ul li span a { } /*controls link to last chapter*/
#stories li { } /*controls box containing each story*/
#stories ul li span a:hover, #stories ul li h3 a:hover { } /*controls behavior of links when hovering over them*/{ARTICLES}#articles ul li h3 a { } /*controls title of article*/
#articles ul li span { } /*controls text with the publish date*/
#articles li { } /*controls box containing each article*/
#articles ul li span a:hover, #stories ul li h3 a:hover { } /*controls behavior of links when hovering over them*/
#articles li img { } /*controls icon image accompanying article*/{POEMS}#poems ul li h3 a { } /*controls title of poem*/
#poems ul li span { } /*controls text with publish date*/
#poems li { } /*controls box containing each poem*/
#poems ul li h3 a:hover { } /*controls behavior of links when hovering over them*/{JOURNALS}#journals ul li h3 a { } /*controls title of blog*/
#journals ul li span { } /*controls text with publish date*/
#journals li { } /*controls box containing each blog*/
#journals ul li h3 a:hover { } /*controls behavior of links when hovering over them*/

---

The Default Profile Tutorial explains how to customize your CSS. Not all of it is relevant anymore; you can skip the parts that explain how to edit codes not included in the CSS above.

*Big thanks to Sunber for her help with this.

When I try to use the coding you posted in the quote, I get some text at the top of the profile - like this. Any idea how to get rid of it?

^Well that's embarrassing; turns out I made not one but two typos in the "<style type="text/css">" line. That's why all that text was showing up at the top (it's the CSS). It's fixed now though; should work all right.

^ Thanks. I wanted to make a screencap of it for Tumblr.

While your "code box" is extremely helpful (thank you!), then I'm still having some trouble:
I've tried changing a few things and messing about with it, and I have been able to get far, but my first trouble is: how do I change the color of where it says "Stories" and "poems" and such in the side bar (not the menu at the top)? I can't figure out where to change what in the HTML code text to do so.
Also, how do you make a greater margin at the top of the page (above the menu)? Is that not possible anymore?
Furthermore, the image I've put on my profile is way too big - am I forced to find a smaller image or can I change the size of it somehow?
Lastly, there are some of the coding I don't understand (I've tried changing colors or text size and so on, but nothing seems to change when I do); is there somewhere I can find a "dictionary" or a guide to what some of all these codes mean (such as "#stories li" or "#poems ul li h3 a")?

I hope you can help me in some (any) way.
Thank you.

Devihla:

how do I change the color of where it says "Stories" and "poems" and such in the side bar (not the menu at the top)? I can't figure out where to change what in the HTML code text to do so.

Changing color should always be done in your CSS code (anything between <style type="text/css"> and </style>). #stories h2 controls the header above your stories section; #poems h2 controls the one for poems (and as you might imagine, #journals h2 controls the header for journals/blogs; #about h2 for the about section, etc.) If you want them all to look the same, you can combine the codes like this:
#stories h2, #poems h2 {color: #fff;}
That would change the font color of both the poems and stories header to white.

Devihla:

Also, how do you make a greater margin at the top of the page (above the menu)? Is that not possible anymore?

Add margin-top: ###px; to body (in your CSS) with whatever number you'd like the margin to be.

Devihla:

Furthermore, the image I've put on my profile is way too big - am I forced to find a smaller image or can I change the size of it somehow?

Find this part in your HTML: <img src="DIRECT LINK TO IMAGE"> and change it to
<img src="DIRECT LINK TO IMAGE" width="###">. That'll resize it without cropping (and it'll maintain the aspect ratio so you won't need to change the height). You may need to experiment a bit to find the right size, but if this is for the space above your info section and stories/poems/etc., 300 is a good bet.

Devihla:

Lastly, there are some of the coding I don't understand (I've tried changing colors or text size and so on, but nothing seems to change when I do); is there somewhere I can find a "dictionary" or a guide to what some of all these codes mean (such as "#stories li" or "#poems ul li h3 a")?

The second part of the original post (after the part explaining how to write your about section) has a list with the CSS and an commented out explanation of what it does for the {STORIES}, {POEMS}, etc. keywords. Using your examples, #stories li controls the box containing each story (so you'd probably only want to use it to change the background color or add a background image) and #poems ul li h3 a controls the title of each poem. Those are usually the most difficult to understand because they're not coded in the HTML, but if you'd like an explanation of what the other codes control, just let me know.

I'm guessing the comment button/pop-up box function doesn't work anymore, too?

As in, the code which looks something like:
<a class="comment-add profile-000000" rel="nofollow" href="javascript:void(0);">Leave a comment</a> <br>

^No, it doesn't. Comments are different now – they're sort of like personal threads – so there's no more pop-up box.

@ battalions
Yeah, I thought so... :( Oh well. Thanks for replying! :)

I'm sorry if I missed this, but I figured it was easier to ask then keep looking.
Is there a way to change the width of the boxes? Such as the 'About Me' section?

@ Beckaay!
Yup. It depends on what the div holding your about section is named, but if you're using the code in the first post, you'll need to find this:
#about {code code code}
and add width: #px; between the curly brackets with whatever number you want filled in.

@battalions
Firstly, thanks for replying!
Second.. I put it here, is this the right place?:

#about h2 {
background-color: #24578a;
color: #ffffff;
font-size: 20px;
font-family: arial;
text-align: left;}

#about {
width:700#px
background-color: #ffffff;}

#about-content {
background-color: #ffffff;
color: #444444;
font-family: arial;
font-size: 12px;
text-align: left;}
</style>

If so, it hasn't worked :/

Also, sorry to be a pain, but is there a way to make my profile in to just one column? Or do I need to look on the custom layout threads for that?

@ Beckaay!
You're not being a pain at all. For changing the width you just need to take the hash mark out so the middle part is this:
#about {
width:700px
background-color: #ffffff;}
It should work if you do.

The code in the first post is basically for people who got used to editing CSS with Old Mibba and didn't want to learn HTML when New Mibba came and got rid of the default layout. If you want to start changing structural stuff, like rearranging parts of the layout, you've got to learn a little HTML. There's a tutorial here for the HTML of a single column layout and then a part two dealing with CSS. (It's the custom layout tutorial thread updated for New Mibba.)

@battalions
Those tutorials were perfect, I now have something to play with for the rest of the day, thank you so much!

Edit:
Sorry.. again.. I've added this code:

html body div #menu a:hover {
font-style:italic;
font-size:17px}

and I'm sure you know what it does, but I was just wondering if there was a way to stop it from underlining them the links being hovered on? I can't seem to find how to do it -_-

@ battalions
Sorry! I just realised that it would probably be useful if I replied to you rather than just commenting again.. I don't know how to/if I can remove the above comment, but uh yeah, this is just so you know I've answered you :)

@ Beckaay!
Add text-decoration:none; between the curly brackets.

If you have more questions, ask in the FAQ thread. We're trying to keep the Layouts board organized so that all the questions are in one place. (I'm going to add yours to the first post, actually; it's a pretty common question.)

@ battalions
That's brilliant thank you! I think I'm done for now anyway but I'll look there next time! Thank you for all your help