For a comprehensive look at creating a custom story layout, please visit Mibba's Knowledge Base article: Creating a Custom Story Layout.
Q. Can someone make a _____ layout for me?
Please ask for a layout in the Request A Layout Thread. Most users with Mibba Layout Websites, listed here, will accept requests; be sure to check their guidelines for requests before submitting one.
Q. Where can I find premade _______ layouts?
Right now Mibba's layout maker works best with the Google Chrome internet browser. You can download Google Chrome here for free.
Q. What's a direct link to an image and where do I find it?
All images used in story, poem, blog, or profile layouts must be uploaded somewhere on the internet (ie, you can't upload them to Mibba from your computer). An image that has been uploaded to the internet is located on a unique page that ends in the file type of the image (.jpg, .png, .gif).
The method for finding the direct link varies from browser to browser, but if you right-click the image, you should have an option along the lines of "Properties" or "View image info". Click that and you'll be able to find the location of that image.
That said, when using an image in a layout, you should upload it to a image-hosting site (eg, imgur, photobucket). If you don't, you risk losing the image if whoever put the image on the site you found it on moves or deletes it. You're also using that website's bandwidth without their permission, which isn't nice. When you upload an image to an image-hosting site, you'll be given several different links/lines of code, one of which will be labeled "Direct link". Copy that one to use in layouts on Mibba.
The majority of this FAQ was taken from lovecraft's original thread; she also deserves credit for the majority of my understanding of making layouts on Mibba.
Some basic profile names:
CSS and HTML are now entered on the same page. Go to My Mibba >> Profile >> Custom profile. All your CSS code should be entered between these two tags:
<style type="text/css">
CSS HERE
</style>
Your HTML code should be entered below that.
Q. How do I change the color of the font in [example] section?
Font colors for any section are changed with this code in your CSS: #example {color: #000000;}
Q. How do I change the background color of [example] section?
Background colors for any section are changed using this code in your CSS: #example {background-color: #00ff00; }
Q. How do I align text in [example] section?
Use this code in your CSS: #[example] {text-align: center;}
You can set text-align to right, left, or justify.
Q. How do I change the font of [example] section?
Fonts in any sections are changed using this code in your CSS: #example {font-family: times;}
You can use any font, but it won't show up if it's not installed on the computer used to view your profile. A list of web-safe fonts can be found here. Remember that if the font name is more than one word, it must be in quotation marks.
Q. How do I make a background color transparent so I can see the picture behind it?
Use this code in your CSS: #example {background-color: transparent;}
Q. I want to put [example] in a scrollbox, how do I do that?
Use this code in your CSS: #example {height: 300px; overflow:auto;}
Adjust height to what suits your section.
Q. How do I edit the links at the top of the page?
Use this code in your CSS: html body div #menu, html body div #menu a, { }
Q. How can I make my [example] links change color/font/size when I mouse over them?
Use this code in your CSS: #example a:hover { }
Q. How do I stop the menu links from being underlined when I hover over them?
Use this code in your CSS: html body div #menu a:hover {text-decoration: none;}
Q. Which keywords still work with New Mibba and which don't?
{USERNAME}, {INFO}, {STORIES}, {ARTICLES}, and {POEMS} still work. {JOURNALS} works for blogs. Be aware that empty stories show up with the {STORIES} keyword; you may want to limit the number of stories shown for that reason.
The following keywords do not work anymore: {IMAGE}, {PHOTOS}, {FRIENDS}, {ABOUT}, and {COMMENTS}.
Q. I'm using the stories/poems/articles keyword; how can I make it show X number of stories/poems/articles?
The format is {KEYWORD:X} If for example you want your stories list to show 25 stories, put {STORIES:25}.
Q. How do I add an image to my [example] background?
Use this code in your CSS:
Use this code:
Q. How do I add a banner to my profile?
There are two ways. If you'd like a pattern/image as the background as well as a banner, use this code at the very top of your HTML: <img src="direct link to image">
You can also set up the body section of your CSS like this:
Q. Where do I access the story layout maker?
You can access the layout maker here. To create a new layout, simply click the new layout button to the right.
Q. My summary page looks the way I want it, but how do I change the text on my chapter pages?
Go to Text >> Text to change the fontface, color, and size of the font for your chapters.
Q. The text on my chapter pages is all jumbled together and unreadable, help?
Your line height is set too low. Set it to at least the size of your font through Text >> Text >> Line height.
Q. How do I get a banner for my story?
To learn to make your own story banners, you can visit the Graphic Making Tutorials thread to find tutorials for making banners written by other Mibba users. You can ask questions in the Photoediting Questions & Tips thread, which also has a list of tutorials and other resources in the first post.
You can request a story banner here or use one of the pre-made story banners in this thread.
Q. How do I insert a banner into my story layout?
Directions for doing so can be found here.
Q. How do I insert a banner into my summary or at the top of chapters?
Do so with BBcode. The code is:
[img]direct link to banner[/img]
Q. Where can I find page/story dividers and how do I use them in my story?
You can find or request page dividers in this thread.
To insert them in a story, use BBcode:
[img]direct link to image[/img]
Q. How do I move the content box from the center of the layout?
Go to Content >> Box >> Margin; you should see the right and left margin blank except for a check box. Checking "Left" will change the left margin to 0 (ie, move the content box to the left side of the screen); checking "Right" will change the right margin to 0 (ie, move the content box to the right side of the screen).
Q. I made someone / someone made me a story layout, how do I / they transfer it?
The author of the story needs to add the layout-maker as a co-author. (Do so by going to My Mibba >> Stories >> Stories and click the "Authors" button for the story.) The story will then appear on the layout-maker's story page, so they can apply the layout as they normally would. Once the layout is applied, the author can remove the layout-maker as a co-author and the layout will stay behind. The author won't be able to edit the layout, though, and any changes the layout-maker makes to the layout will apply to the story, even after the layout-maker has been removed as an author.
Q. Where do I access the poem layout maker?
You can access the layout maker here. To create a new layout, simply click the new layout button to the right.
Q. Where do I access the blog layout maker?
You can access the layout maker here. To create a new layout, simply click the new layout button to the right.
Q. How do I change the color of links in the text of my blog?
Change to the color you want at Page > Text > Link color.
Helpful Links
Story LinksPoem Links
General Questions
Q. Can someone make a _____ layout for me?
Please ask for a layout in the Request A Layout Thread. Most users with Mibba Layout Websites, listed here, will accept requests; be sure to check their guidelines for requests before submitting one.
Q. Where can I find premade _______ layouts?
- For stories: here
- For poems: here
- For blogs: here
- For profiles: In this thread, or on the Mibba layout websites listed in this thread.
Right now Mibba's layout maker works best with the Google Chrome internet browser. You can download Google Chrome here for free.
Q. What's a direct link to an image and where do I find it?
All images used in story, poem, blog, or profile layouts must be uploaded somewhere on the internet (ie, you can't upload them to Mibba from your computer). An image that has been uploaded to the internet is located on a unique page that ends in the file type of the image (.jpg, .png, .gif).
The method for finding the direct link varies from browser to browser, but if you right-click the image, you should have an option along the lines of "Properties" or "View image info". Click that and you'll be able to find the location of that image.
That said, when using an image in a layout, you should upload it to a image-hosting site (eg, imgur, photobucket). If you don't, you risk losing the image if whoever put the image on the site you found it on moves or deletes it. You're also using that website's bandwidth without their permission, which isn't nice. When you upload an image to an image-hosting site, you'll be given several different links/lines of code, one of which will be labeled "Direct link". Copy that one to use in layouts on Mibba.
Custom Profile FAQ
The majority of this FAQ was taken from lovecraft's original thread; she also deserves credit for the majority of my understanding of making layouts on Mibba.
Some basic profile names:
- <div>: A <div> is a section of your profile. A div that looks like this: <div id="stories"> is called stories. When you use CSS, you need to know these names to change the colors and other details of that section. So, if you wanted to change the color of your font in your stories section, you would use this code: #stories {color:#ff0000;}
Header: A header is the title of your section. The code for headers is <h2>. The code for all h2 headers is h2 { }. The code for just the header in a div called stories is #stories h2 { }.
Links: Links are links to different pages. They use the code a. The codes for links in a div called poems is #poems a.
CSS and HTML are now entered on the same page. Go to My Mibba >> Profile >> Custom profile. All your CSS code should be entered between these two tags:
<style type="text/css">
CSS HERE
</style>
Your HTML code should be entered below that.
Q. How do I change the color of the font in [example] section?
Font colors for any section are changed with this code in your CSS: #example {color: #000000;}
Q. How do I change the background color of [example] section?
Background colors for any section are changed using this code in your CSS: #example {background-color: #00ff00; }
Q. How do I align text in [example] section?
Use this code in your CSS: #[example] {text-align: center;}
You can set text-align to right, left, or justify.
Q. How do I change the font of [example] section?
Fonts in any sections are changed using this code in your CSS: #example {font-family: times;}
You can use any font, but it won't show up if it's not installed on the computer used to view your profile. A list of web-safe fonts can be found here. Remember that if the font name is more than one word, it must be in quotation marks.
Q. How do I make a background color transparent so I can see the picture behind it?
Use this code in your CSS: #example {background-color: transparent;}
Q. I want to put [example] in a scrollbox, how do I do that?
Use this code in your CSS: #example {height: 300px; overflow:auto;}
Adjust height to what suits your section.
Q. How do I edit the links at the top of the page?
Use this code in your CSS: html body div #menu, html body div #menu a, { }
Q. How can I make my [example] links change color/font/size when I mouse over them?
Use this code in your CSS: #example a:hover { }
Q. How do I stop the menu links from being underlined when I hover over them?
Use this code in your CSS: html body div #menu a:hover {text-decoration: none;}
Q. Which keywords still work with New Mibba and which don't?
{USERNAME}, {INFO}, {STORIES}, {ARTICLES}, and {POEMS} still work. {JOURNALS} works for blogs. Be aware that empty stories show up with the {STORIES} keyword; you may want to limit the number of stories shown for that reason.
The following keywords do not work anymore: {IMAGE}, {PHOTOS}, {FRIENDS}, {ABOUT}, and {COMMENTS}.
Q. I'm using the stories/poems/articles keyword; how can I make it show X number of stories/poems/articles?
The format is {KEYWORD:X} If for example you want your stories list to show 25 stories, put {STORIES:25}.
Q. How do I add an image to my [example] background?
Use this code in your CSS:
- #example {background-image: url(direct link to image); background-position: top; /*can be left, right, center, bottom, top left, top right, center left, center right, bottom left, or bottom right*/ background-repeat: no-repeat; /*can be repeat, repeat-x, or repeat-y*/}
Use this code:
- body {background-image: url(direct link to image); background-position: top; background-repeat: no-repeat; margin-top: 300px;}
- body {background-image: url(direct link to image); background-position: top; background-repeat: no-repeat;}
#main {margin-top: 300px;}
Q. How do I add a banner to my profile?
There are two ways. If you'd like a pattern/image as the background as well as a banner, use this code at the very top of your HTML: <img src="direct link to image">
You can also set up the body section of your CSS like this:
- body {background-color:#hex;
background-image: url(direct link to image);
background-position: center top;
background-repeat: no-repeat;}
Story Layout FAQ
Q. Where do I access the story layout maker?
You can access the layout maker here. To create a new layout, simply click the new layout button to the right.
Q. My summary page looks the way I want it, but how do I change the text on my chapter pages?
Go to Text >> Text to change the fontface, color, and size of the font for your chapters.
Q. The text on my chapter pages is all jumbled together and unreadable, help?
Your line height is set too low. Set it to at least the size of your font through Text >> Text >> Line height.
Q. How do I get a banner for my story?
To learn to make your own story banners, you can visit the Graphic Making Tutorials thread to find tutorials for making banners written by other Mibba users. You can ask questions in the Photoediting Questions & Tips thread, which also has a list of tutorials and other resources in the first post.
You can request a story banner here or use one of the pre-made story banners in this thread.
Q. How do I insert a banner into my story layout?
Directions for doing so can be found here.
Q. How do I insert a banner into my summary or at the top of chapters?
Do so with BBcode. The code is:
[img]direct link to banner[/img]
Q. Where can I find page/story dividers and how do I use them in my story?
You can find or request page dividers in this thread.
To insert them in a story, use BBcode:
[img]direct link to image[/img]
Q. How do I move the content box from the center of the layout?
Go to Content >> Box >> Margin; you should see the right and left margin blank except for a check box. Checking "Left" will change the left margin to 0 (ie, move the content box to the left side of the screen); checking "Right" will change the right margin to 0 (ie, move the content box to the right side of the screen).
Q. I made someone / someone made me a story layout, how do I / they transfer it?
The author of the story needs to add the layout-maker as a co-author. (Do so by going to My Mibba >> Stories >> Stories and click the "Authors" button for the story.) The story will then appear on the layout-maker's story page, so they can apply the layout as they normally would. Once the layout is applied, the author can remove the layout-maker as a co-author and the layout will stay behind. The author won't be able to edit the layout, though, and any changes the layout-maker makes to the layout will apply to the story, even after the layout-maker has been removed as an author.
Poem Layout FAQ
Q. Where do I access the poem layout maker?
You can access the layout maker here. To create a new layout, simply click the new layout button to the right.
Blog Layout FAQ
Q. Where do I access the blog layout maker?
You can access the layout maker here. To create a new layout, simply click the new layout button to the right.
Q. How do I change the color of links in the text of my blog?
Change to the color you want at Page > Text > Link color.
Helpful Links
Story LinksPoem Links
- Simple Custom Profile Layout Tutorial, Part I and Part II – instructions on making a single-column profile layout with New Mibba, derived from lovecraft's Custom Profile Layout Tutorial
- Instructions for using CSS-only layouts, which can be used in conjunction with lovecraft's Default Profile Tutorial
- CSS Cheat Sheet
- Styling Backgrounds with CSS
- Sytling Text with CSS
- Styling Links with CSS
- Color pickers: one | two
- Color list
- Image-hosting sites for banners / background images / etc.: imgur | photobucket | tinypic | imageshack
If you have any questions you've seen frequently asked that I've missed, please post.
May 29th, 2012 at 07:33am