How to create an MO Button

The following are explanations on how to create graphics that will work at once with the MO Button feature. We will assume that you know or have someone who knows how to deal with graphics in order to create the necessary images.

The organization of the buttons is quite simple. On your server, create a folder named mo_button under your files directory. That's the default, you can create a folder anywhere you'd like—although it needs to be accessible by your HTTP server. The default location is practical if you want/need to upload the images using a simple Drupal interface.

Default: sites/default/files/mo_button

In that folder, create a sub-folder. That sub-folder is the name of your button. We use m2osw as our default button and thus we have a folder named m2osw. This name is used to reference your button in your tag, so make sure that it does not include any special character that could cause problems. It is best to limit yourself to letters (a-z), numbers (0-9) and hashes or underscores (- or _).

Inside that sub-folder, you want to add the button images. We currently support 11 images as follow:

• Top-left corner (top_left_corner)
• Top (top)
• Top-right corner (top_right_corner)
• Left edge (left_edge)
• Left icon (left_icon)
• Background (background)
• Right icon (right_icon)
• Right edge (right_edge)
• Bottom-left corner (bottom_left_corner)
• Bottom (bottom)
• Bottom-right corner (bottom_right_corner)

The order is the order in which the images are used (except for the background.) Only the left and right icons are optional. All the other images are currently mandatory.

The width and height of different images must match between each others. This is important for the button to look right.

As you can see, a button is a table of 5 columns and 3 rows. The column 2, 7, 12 and 4, 9, 14 are used for the icons. If you do not use icons, then the columns will be empty (still present in the HTML code, but hidden.)

The following describes each column with the name of the image they use and how they are being used:

1. Top-Left Corner
   The width must be equal to the width of the Bottom-Left Corner image
   The height must be equal to the height of the Top-Right Corner
   The image is not repeated
   The position is top-left
2. Top
   The height must be equal or smaller than the height of the Top-Left Corner and Top-Right Corner
   The image is repeated horizontally
   The position is top-left
3. Top—See #2
4. Top—See #2
5. Top-Right Corner
   The width must be equal to the width of the Bottom-Right Corner image
   The height must be equal to the height of the Top-Left Corner
   The image is not repeated
   The position is top-right
6. Left-Edge
   The width must be equal or smaller than the width of the Top-Left Corner and Bottom-Left Corner
   The image is repeated vertically
   The position is top-left
7. Left icon
   The size of the icon should remain reasonable, there is otherwise no constraints
   The image is not repeated
   The <img> tag is used for this image
   The position is middle-left
8. Label—this cell does not use any image, it is where the link is included
9. Right icon
   The size of the icon should remain reasonable, there is otherwise no constraints
   The image is not repeated
   The <img> tag is used for this image
   The position is middle-right
10. Right-edge
    The width must be equal or smaller than the width of the Top-Right Corner and Bottom-Right Corner
    The image is repeated vertically
    The position is top-right
11. Bottom-Left Corner
    The width must be equal to the width of the Top-Left Corner image
    The height must be equal to the height of the Bottom-Right Corner
    The image is not repeated
    The position is bottom-left
12. Bottom
    The height must be equal or smaller than the height of the Bottom-Left Corner and Bottom-Right Corner
    The image is repeated horizontally
    The position is bottom-left
13. Bottom—See #12
14. Bottom—See #12
15. Bottom-Right Corner
    The width must be equal to the width of the Top-Right Corner image
    The height must be equal to the height of the Bottom-Left Corner
    The image is not repeated
    The position is bottom-right

The Background is setup in the <table> tag itself. It is expected that you will be playing with transparency to get the background to show up inside the button as required.

The image on the left shows the Top-Left Corner of a button. We can see some gray, the main page background color. The green color represents transparency. Because it is transparent, the background will show through that green area. You can use the same trick with all the images (corners, edges, and icons.)

For a good example, please, check out our m2osw button. It includes all you need to see how it works.

If you have questions or feel like these explanations were not enough, please, post a comment below. We answer questions within 1 or 2 business days.