Creating Custom Blog Layouts

To create a new layout, go to My Mibba >> Blog >> Layouts and click the aqua "New layout" button.


The Five Sections


The blog layout maker has five 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).

Image

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 blog layout. This section is most useful for changing the background of your layout; it's also where you can change the color of links in your blog content. 1

    Content: The content box holds all the content of your blog. Text settings in this section will be overridden by the text settings of the sections below. 2

    Title: This is the blog title. This is where you can insert a banner into your layout. 3

    Text: This section holds the text of your blog entry. 4

    Time: This section holds the time stamp of your blog. 5

    (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. 6

Understanding Width, Margin, and Padding


Image

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.


Changing Backgrounds


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

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

Adding a repeating page background pattern

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

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 1. 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 2.
  • Select a position from the Position drop-down menu 3. Since the Content section of blog 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 4. 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 5.

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.



Adding a Banner


Image


Banners can be added to your blog with BBcode, but the code will have to be added every time you post a blog. The following instructions explain how to insert a banner into the title section so that it'll automatically show up on every blog post.

Adding a banner

  • Make sure you're in the Title section and Background subsection 1.
  • Past the direct link to your banner into the Image field 2. 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 3. (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 4. (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 5. Scroll down to the Padding options.
  • Set the Top padding to the height of your banner 6. 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 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 9.
  • Change the Width to at least the width of the banner 10. 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.

Changing the position of the blog title

  • If you insert a banner following the instructions above, the text of your blog title will show up beneath the banner. To move the text so it's positioned over your banner, go to the Title section and Box subsection 1.
  • Setting the Top Padding to the height of the banner and the Bottom Padding to zero is what moved the title text to below the banner image 2. To move the title text to the top of the banner, set the Bottom Padding to the height of the banner and the Top Padding to zero 3.
  • To move the title text to the middle of the banner, divide the height of your banner by two and set the result as the Top and Bottom Padding 4. (If the height of your banner is an odd number, you'll need to round.)
  • If your still unhappy with the position of your title text, experiment with the padding until the title is where you want it 5. Just remember that a larger number on top will move the text down and vice-versa.
  • If you'd like to get rid of the space between the Title section and the Text section, you'll need to change the Bottom Margin of the Title section to zero (see in instructions in steps 7 and 8 of "Pattern Borders / Sidebars"). You'll also need to change the line height of the title text. To do so, go to the Title section and Text subsection 6.
  • Scroll down to the Line height setting and change it to zero 7. This will eliminate the gap between the Title and Text sections, assuming you've set the margins to zero. Note that if you use this method, long blog titles will overlap and be unreadable.

Borders


The default blog 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 1. Scroll down to find the Border settings.
  • Select a Style setting from the drop-down menu 2. The border will not show up immediately if the width is set to zero. 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 3.
  • Select a Color using the color picker or paste the hex code into the text box 4.
  • The Transparency setting can be used to make the border more or less transparent 5.
  • Admire your final product 6.

Adding/removing/changing rounded edges for the content section

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

Pattern Borders / Sidebars


Image

  • Go to the Content section and Background subsection 1.
  • Paste the direct link to the pattern for the border in the Image field 2. 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 Text section and Background subsection 3.
  • Select a background color by using the color picker or pasting the hex code into the Color text box 4.
  • Set the Transparency to 0 5. (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 Time section 6. (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 Title section and Box subsection 7. Scroll down to the Margin settings.
  • Change the Bottom margin to 0 8.
  • If you're using a banner with title text over it, follow steps 5 and 6 in [url= ]Changing the position of the blog title[/url] to change the line height to zero.
  • To move the text away from the edge, add padding. Go to the Text section and Box subsection 9. Scroll down to the Padding settings.
  • Change the Right and Left padding to the number of your preference10.
  • You may want to repeat step 10 for the Box subsection of the Time section 11 and the Box subsection of the Title section 12.
  • 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 13. If the Top and Bottom padding are set to 0, the pattern will only show up on the sides.

Changing Text


Text options are the same for every section, but you should only change text settings in the Title, Text, and Time sections, as well as link color in the Page section.

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!
  • Transparency1: Sets the transparency of regular text. This can make text difficult to read and should only be used for the blog title.
  • 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 Time section because the time stamp is never a link.)
  • Transparency2: 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 Time section because the time stamp 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. 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. 1
  • 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 your blog 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 the blog title and the time stamp.
  • 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 blog title and the time stamp.
  • 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. 2
  • 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. 3
  • Decoration: This option has four settings, "None", "Underline", "Overline", and "Line-Through". This option is most useful for the blog title and the time stamp. 4
  • Shadow options: The shadow options are discussed further in [url= ]this[/url] section. These options are most useful for the blog title and time stamp.
  • Page >> Text 1 controls only the color of links within your blog content.
  • Title >> Text 2 controls the titles of your blog posts.
  • Text >> Text 3 controls the text that makes up the content of your blog posts.
  • Time >> Text 4 controls the time stamp for your blog posts.

Shadows


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). 1
An example of a shadow around text (changed in the Text subsection). 2
Shadows can make text illegible, so use them sparingly!


Saving and Applying Your Layout


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

Saving Your Layout

  • Click the teal "SAVE THIS LAYOUT" bar 1.
  • Make sure "Create layout" is selected from the Create or update drop-down menu 2. If "Create layout" is not selected, you will save over an old layout.
  • Title your layout as desired 3.
  • Click save 4! 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 >> Blog >> Layouts. This will take you to a list of all the blog layouts you've created.
  • Click "Set as my layout" 1
  • That's it! Your layout is now applied to your blog.

Other articles