Story Layout Tutorial

This tutorial is organized as a series of examples that will (hopefully) get you comfortable with the layout maker. It's not necessary to read every section to learn to make a story layout, but if you do you should be able to make any style layout you like.

If you have any questions, check out the FAQ for layouts. If your question isn't covered, feel free to ask there.

If you'd like to request a layout, do so here. If you'd like to request a story banner, do so here. If you're looking for public story layouts, they're here.

Intro to Story Layouts
If your new to Mibba, new to layouts, or just deeply confused about the new layout maker. Includes how to create a new layout, what all the sections are for, and the mysteries of overrides (or, why your changes don't always show up).
Changing Backgrounds
Colors, patterns, and single images.
Adding a Banner
In ten easy steps or less!
Borders
The old-fashioned kind and the magic of rounded edges.
Pattern Borders / Sidebars
Padding is actually useful!
Floating Banners
It's magic! Actually it's transparency and margins.
Changing Text
Everything you ever wanted to know and a bunch of stuff you probably didn't.
Shadows
The dark and creepy kind. Or the light and glowy kind. Whatever kind you want, really.
Saving and Applying Your Layout
Because what's the point of learning all the other stuff if you don't know how to do this?

To create a new layout, go to My Mibba >> Stories >> Layouts and click the aqua "New layout" button. You'll be asked to select a template for your layout; if you're creating a new layout from scratch, select "Default".

The story layout maker has seven sections, each with three subsections. Each section controls a different part of your layout. The subsections for each section are always Background (where you change the background color and/or background image for that section), Text (where you change the way text in that section looks) and Box (where you can change the width, margin, padding, border, and shadow of that section).

The Seven Sections

Here's an overview of where each section is and what it's used for:

• Page: Page is the largest box; it covers the entire story layout. Because of that, this section is only useful for changing the background of your layout.
  
  
  
  Content: The content box holds all the content of your story. Text settings in this section will be overridden by the text settings of the sections below.
  
  
  
  Title: This is the story title. This shows up on every page of your story and is where banners are usually inserted.
  
  
  
  Subtitle: This is the chapter title. It only shows up on chapter pages of your story.
  
  
  
  Text: The text settings in this section will be overridden on the summary page of your story, but will appear on chapter pages.
  
  
  
  Summary: What you type in the "Summary" box for your story shows up here. It only appears on the summary page.
  
  
  
  Chapters: This is the list of chapter links and descriptions that shows up beneath the summary of your story on the summary page.
  
  
  
  (Access any section or subsection in the layout maker by clicking its name.)
  
  Tip: Each section title has a box on the right side. Hover over it to highlight the part of the layout that section controls.
  
  

Understanding Overrides and the Seven Sections

Story layouts can be thought of as nested boxes. Settings in the smaller boxes (ie, sections lower down on the list) override / cover up settings on bigger boxes / sections higher on the list.

Tip: Because some sections override the settings of other sections, changes you make and see in the layout maker may not appear in your final layout. For example, if you change the font through Page >> Text >> Font, all of the font will change in the layout maker, but because the text settings for Page are always overridden by those of other sections, the font will not appear to change when you save the layout and apply it to a story.

Understanding Width, Margin, and Padding

Width is (you guessed it) the width of a section. A section will be as wide as the width you input + the left padding + the right padding.

Margin is the space between two section of your layout. You can change a section's top, bottom, left, and/or right margin. If you change a section's bottom margin to 10 and the top margin of the section below to 20, the total amount of space between the two sections will be 30 px.

Padding is the space between the edge/border of a section and the content inside it. You can change a section's top, bottom, left, and/or right padding.


Things You'll Need

Before you jump into making your layout, make sure you have the following information ready:

Direct links to any images you'll use: The direct link to an image is a URL that ends in .png, ,jpg, or .gif. When you upload an picture to an image-hosting site like imgur or photobucket, you'll be given a direct link to the image. A direct link to an image looks like this:
http://imagehostingsite.com/blahblahblah.png

Tip: Make an account on an image-hosting site and always upload images you'll be using in layouts there. That way you don't have to worry about your images being moved or deleted and you'll always be able to find the direct link to your images.

The dimensions of your banner if you're inserting one: In most browsers, you can find this information by right-clicking the image and selecting "Properties", "View Image Info", or something similar. You can also paste/open your banner in an image-editing program to find the dimensions. If you open your banner in MS Paint, for example, go to Image >> Attributes to find its dimensions.

Hex codes for any colors you plan on using: You can find colors to use in your layout through the color picker in the layout maker, but if you have specific shades you know in advance you want to use, you'll need the hex codes. A hex code is a hash mark followed by six letters and/or numbers. For example, the code for white is #FFFFFF.

Tip: To find colors that match a specific image, use a pallete-generating website like CSSDrive.

[Back to the first post]

The background subsection is the same for every section. The following examples change the page background, but can be followed to alter any section.

Removing the default page background image and changing the page background color

• Make sure you're in the Page section and Background subsection ¹.
• Delete the URL in the Image field ². The background image should disappear right away.
• Click the Color field or the color swatch beside it to open the color picker ³. Select a background color through the color picker or paste a hex code into the text box.
• Click elsewhere on the page to close the color picker and admire your final result ⁴.

Adding a repeating page background pattern

• Again, you need to be in the Page section and Background subsection ¹.
• Paste the direct link to your background into the Image field ². It should show up immediately, but depending on the Position it might be blocked from view.
• Select "Repeat" from the Repeat drop-down menu ³.
• Your background pattern should fill up the screen right away ⁴.

Adding a single page background image

• If your background image isn't big enough to fill up the entire screen, follow the directions for changing the background color and pick a color to complement your image.
• Paste the direct link to your background image into the Image field of Page >> Background ¹. It should show up immediately, but depending on the Position it might be blocked from view.
• Make sure "No Repeat" is selected from the Repeat drop-down menu ².
• Select a position from the Position drop-down menu ³. Since the Content section of story layouts are automatically centered, most of your image will be blocked if you select the "Center Center" position, unless you move the content box.
• Select either "Scroll" or "Fixed" from the Attachment drop-down menu ⁴. A background image set to "Scroll" will move as you scroll down the page; a background image set to "Fixed" will stay locked in place while the rest of the page moves as you scroll.
• Admire your final product ⁵.

More about repeat settings
The other two options for Repeat are "Repeat X" and "Repeat Y". "Repeat X" will repeat the image in a horizontal line across the screen; "Repeat Y" will repeat the image in a vertical line.

[Back to the first post]

Banners can be added to a story with BBcode, but the code will have to be added to the top of every chapter posted. The following instructions explain how to insert a banner into the story title section so that it'll automatically show up on every page of a story. The same instructions can be applied to the subtitle section, but then the banner will only show up on chapter pages.

Adding a banner

• Make sure you're in the Title section and Background subsection ¹.
• Past the direct link to your banner into the Image field ². The banner should show up immediately, but you'll probably only see a small sliver of it.
• Select "No Repeat" from the Repeat drop-down menu ³. (You may want to have a repeating image in your title section for aesthetic purposes; this example simply shows what most people choose, which is to have a non-repeated image.)
• Select "Center Center" from the Position drop-down menu ⁴. (You may choose a different position for aesthetic purposes; this example simply shows what most people choose, which is to center their banners.)
• Open the Box subsection of the Title section ⁵. Scroll down to the Padding options.
• Set the Top padding to the height of your banner ⁶. You can set it to a larger number if you want extra space above your banner, but if the sum of the top and bottom padding doesn't equal at least the height of your banner, it will be partially cut off.
• If you don't want the title text to show up over your banner, go to the Text subsection of Title⁷.
• Scroll down to Size and change it to 0 ⁸. The title text should disappear immediately.
• If the sides of the banner are still cut off, or if you don't like having extra space there, you'll need to change the width of the Content section. Make sure you're in the Content section and Box subsection ⁹.
• Change the Width to at least the width of the banner ¹⁰. If you change it to exactly the width of your banner, the text below will be the same width as your banner. There will still be space around your banner and the text; this is the Content Padding.

[Back to the first post]

The default profile layout doesn't have any visible borders, but they can be added to any section. Border options can also be used to create rounded edges for any section.

Adding a border to the content section

• Go to the Content section and the Box subsection ¹. Scroll down to find the Border settings.
• Select a Style setting from the drop-down menu ². The border will not show up immediately if the width is set to 0. If the Style is set to "None", the border will not show up even with a width greater than zero.
• Change the width to set the thickness of the border ³.
• Select a Color using the color picker or paste the hex code into the text box ⁴.
• The Transparency setting can be used to make the border more or less transparent ⁵.
• Admire your final product ⁶.

Adding/removing/changing rounded edges for the content section

• Make sure you're in the Box subsection of the Content section ¹.
• Use the Radius setting to create/remove/change rounded edges ².
• If the Radius is set to 0, edges will be squared off ³.

[Back to the first post]

• Go to the Content section and Background subsection ¹.
• Paste the direct link to the pattern for the border in the Image field ². If the Repeat setting is not set to "Repeat", select it from the drop-down menu. The pattern should fill the content section right away.
• Go to the Subtitle section and Background subsection ³.
• Select a background color by using the color picker or pasting the hex code into the Color text box ⁴.
• Set the Transparency to 0 ⁵. (You may want to set it higher for aesthetic purposes – just make sure text is still readable.)
• Repeat steps 4 and 5 for the Background subsection of the Text section ⁶. (If you are not using a title banner, repeat the steps for the Title section as well.)
• To prevent the pattern from showing between sections, go to the Subtitle section and Box subsection ⁷. Scroll down to the Margin settings.
• Change the Bottom margin to 0 ⁸.
• Repeat step 8 in the Box subsection of the Title section ⁹.
• To move the text away from the edge, add padding. Go to the Text section and Box subsection ¹⁰. Scroll down to the Padding settings.
• Change the Right and Left padding to the number of your preference¹¹.
• You may want to repeat step 10 for the Box subsection of the Subtitle section ¹² and the Box subsection of the Title section ¹³.
• If you only want the pattern to show up on the sides, go to the Box subsection of the Content section and change the padding ¹⁴. If the Top and Bottom padding are set to 0, the pattern will only show up on the sides.

[Back to the first post]

Making the banner appear to "float" above the rest of the content requires use of the transparency setting and changing some margins.

Separating the banner from the text below

• Go to the Content section and Background subsection ¹.
• Set the Transparency to 100 ².
• Go to the Subtitle section and Background subsection ³.
• Select a background color by using the color picker or pasting the hex code into the Color text box ⁴.
• Set the Transparency to 0 ⁵. (You may want to set it higher for aesthetic purposes – just make sure text is still readable.)
• Repeat steps 4 and 5 for the Background subsection of the Text section ⁶.
• To close the gap between the chapter title and text, go to the Subtitle section and Box subsection ⁷. Scroll down to the Margin settings.
• Change the Bottom margin to 0 ⁸.
• Change the Top margin to an appropriate number ⁹. (You can achieve the same affect by changing the Bottom margin in Title >> Box.)
• To move the text away from the edge, add padding. Go to the Text section and Box subsection ¹⁰. Scroll down to the Padding settings.
• Change the Right and Left padding to the number of your preference ¹¹.
• You may want to repeat step 11 for the Box subsection of the Subtitle section ¹².
• To make the text section narrower (or wider) than the banner, first make sure you're in the Subtitle section and Box subsection ¹³.
• Change the Width to an appropriate number ¹⁴.
• Repeat step 14 for in the Box subsection of the Text section ¹⁵.
• To add a pattern border around the chapter title and text but not the banner, first go to the Content section and Background subsection ¹⁶ and paste the direct link to the pattern in Image field. Change the Transparency to 0 and make sure Repeat is set to "Repeat".
• Next go to the Box subsection of the Content section and change the Top, Right, and Left padding to 0 ¹⁷.
• Admire your results ¹⁸.

[Back to the first post]

Text options are the same for every section, but you should only change text settings in the Title, Subtitle, Text, Summary, and Chapters sections.

Here's a list of the text options available:

• Color: Sets the color for regular text (ie, not links). Be sure to choose colors that will be readable with the background!
• Transparency₁: Sets the transparency of regular text. This can make text difficult to read and should only be used for the story and/or chapter titles.
• Link Color: Sets the color for links. Be sure to choose colors that will be readable with the background! (This setting is not necessary in the Title or Subtitle section because that text is never a link.)
• Transparency₂: Sets the transparency of links in the text. This can make text difficult to read, so use very sparingly if at all. (This setting is not necessary in the Title or Subtitle section because that text is never a link.)
• Align: Sets the alignment for the text.
• Indent: Sets an indent for only the first line of text in a section. (In the case of the Chapters section, all the links to chapters indent.) Mibba requires a space be left between paragraphs, so the Indent setting should only be used for aesthetic purposes and not in place of proper formatting.
• Line height: The line height is the height given to each line of text. It should be at least the same value as the text size. If you set the line height too low in a section with multiple lines of text, it will render the text unreadable:
  
  
  
• Word spacing: Sets the amount of space between each word.
• Letter spacing: Sets the amount of space between each letter.
• Font: Sets the fontface for the text. (More than one font is listed on each line because if the computer used to view the story does not have the first font installed, it'll use the second font on the list.)
• Size: Sets the font size for the text.
• Style: This option has two settings, "Normal" and "Italic". If set to "Italic", all of the text will automatically be italicized. This setting is most useful for story and/or chapter titles.
• Weight: This option has two settings, "Normal" and "Bold". If set to "Bold", all of the text will automatically be bolded. This setting is most useful for story and/or chapter titles.
• Variant: This option has two settings, "Normal" and "Small caps". If set to "Small caps", all of the text will automatically be changed to all capitals, with formerly lowercase letters appearing smaller than formerly uppercase ones.
  
  
  
• Transform: This option has four settings, "Normal", "Capitalize", "Uppercase", and "Lowercase". "Capitalize" will change the first letter of every word to uppercase, "Uppercase" will change all lowercase letters to uppercase, and "Lowercase" will change all uppercase letters to lowercase. All stories and titles on Mibba must be properly capitalized, but these settings can be useful for changing the look of story and/or chapter titles. (For example, if you want your story title to be all lowercase, you can name the story in proper title case so as to follow Mibba's rules, but set the story title to lowercase in the layout maker so that it appears that way within your story.)
  
  
  
• Decoration: This option has four settings, "None", "Underline", "Overline", and "Line-Through". This option is most useful for story and/or chapter titles.
  
  
  
• Shadow options: The shadow options are discussed further in this post. These options are most useful for story and/or chapter titles.

Changing text in chapters

• Text on chapter pages (ie, chapter content and author's notes) is changed through the Text section and Text subsection ¹. Remember that text must be legible!
• Chapter titles are changed through the Subtitle section and Text subsection ². It is not required that chapter titles be visible; to hide chapter titles, set the Size to 0.

Changing text on the summary page

• The text of your summary is changed through the Summary section and Text subsection ¹.
• The text of links to and descriptions of chapters are changed through the Chapters section and Text subsection ².
• The story title is changed through the Title section and Text subsection ³. It is not required that the story title be visible; to hide the story title, set the Size to 0.

[Back to the first post]

Shadows are a new feature of the layout maker. Shadows do not work on Internet Explorer 8 or below. (Neither does transparency. Two good reasons to switch browsers!)

Shadow options can be found in the Text and Box subsection of every section. Four options control shadows:

• Color: Sets the color of the shadow.
• Radius: Sets the size of the shadow, ie, how far away from the section/letter the shadow goes.
• Offset X: When set to 0 the shadow will be directly behind the section/text; when increased, the shadow will move to the right.
• Offset Y: When set to 0 the shadow will be directly behind the section/text; when increased, the shadow will move down.

An example of a shadow around a section (changed in the Box subsection):


An example of a shadow around text (changed in the Text subsection):


Shadows can make text illegible, so use them sparingly! Remember that your story content must be readable.

[Back to the first post]

Saving your layout is the most important part of the process! Once saved, your layout will be listed on your layouts list (My Mibba >> Stories >> Layouts). You'll be able to make it public, edit it further, or delete it through that list.

Saving your layout

• Click the teal "SAVE THIS LAYOUT" bar ¹.
• Make sure "Create layout" is selected from the Create or update drop-down menu ². If "Create layout" is not selected, you will save over an old layout.
• Title your layout something memorable so you'll be able to assign it to the correct story ³.
• Click save ⁴! A progress bar will appear next to the word "Save"; don't leave the page until the bar has disappeared or you will lose your layout. (Don't worry; it's usually very quick.)

Applying Your Layout

• Go to My Mibba >> Stories. This will take you to a list of all the stories you've created on the site.
• Click the "Edit" button for the story you've made the layout for.
  
  
  
• Scroll down to the Layout drop-down menu and select the layout you want to use for the story. The list is from newest to oldest.
  
  
  
• Once you submit your changes, the layout will be applied to your story!

[Back to the first post]