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:
To get back the default layout, go to My Mibba >> Profile >> Custom profile and paste this into your code box:
{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:
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}
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.
The following keywords still work:
- {USERNAME}
- {INFO}
- {STORIES}
- {ARTICLES}
- {POEMS}
- {JOURNALS}
- {FRIENDS}
- {PHOTOS}
- {COMMENTS}
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.
May 28th, 2012 at 04:09pm