Help:Formatting content
The default skin assigned to CannaQAwiki is Monobook. This skin was chosen because it more or less—with the exception of large images and wide tables—displays well on smaller screens. It also works well for displaying this wiki's content in WordPress pages.
As much of the content on this wiki may be viewed as embedded material or on a mobile browser, it's important to remember several things:
1. Keep images small (at 200px or so) unless forced to. Screenshot images, for example, may require much larger widths to be useful to users.
NOTE: NO images should be more than 980px wide, including screenshots. This is the width of the display area.
2. Keep tables as narrow as possible and avoid using fixed widths unless you have no other choice.
3. If you're placing a series of images, tables, or other elements side-by-side, use CSS to make the content "responsive" to browser width changes. You can find several examples of this CSS code on the Main Page and Help:Books/FAQ. Let's look at the second example, demonstrated below:
Printed books can be ordered through PediaPress.
<div style="width:auto; display: inline-block;"> <div style="width:auto; float:left; padding-left:20px; padding-right:20px;"> [[File:Pediapress_book_ordering_step_1.png|thumb|200px|1) Click on "Order as a printed book"]]</div> <div style="width:auto; float:left; padding-left:20px; padding-right:20px;"> [[File:Pediapress_book_ordering_step_2.png|thumb|200px|2) Book gets loaded by PediaPress]]</div> <div style="width:auto; float:left; padding-left:20px; padding-right:20px;"> [[File:Pediapress_book_ordering_step_3.png|thumb|200px|3) Choose country, get price]]</div> </div> <br clear="all"> <div style="width:auto; display: inline-block;"> <div style="width:auto; float:left; padding-left:20px; padding-right:20px;"> [[File:PediaPress_book_ordering_step_4.png|thumb|200px|4) View preview]]</div> <div style="width:auto; float:left; padding-left:20px; padding-right:20px;"> [[File:Pediapress_book_ordering_step_5.png|thumb|200px|5) Add to cart]]</div> <div style="width:auto; float:left; padding-left:20px; padding-right:20px;"> [[File:Pediapress_book_ordering_step_6.png|thumb|200px|6) Enter shipping, billing info]]</div> </div> Printed books can be ordered through PediaPress.
Every image has CSS style applied (not a class; we don't use a built-in class because the WordPress plug-in that embeds wiki content into LIMSbook ignores wiki CSS like Monobook.css and Common.css) that floats it to the left and puts padding between it and the left and right side.
<div style="width:auto; float:left; padding-left:20px; padding-right:20px;">Your image or content</div>
When three images or elements are lined up like this they are lined up side-by-side, with padding between them. We then can take these three images and call them one inline block of elements that should be treated as a single unit. We do this by wrapping all the code for those three images in another div, as such:
<div style="width:auto; display: inline-block;">All your image/element code</div>
If we want to start a new row of images, we do the same thing. However, we have to remember after the first row is complete, a hard break is must be applied by applying the <br clear="all"> code. Using this concept you could line up two, four, or even five images in row-like fashion before starting another row using the <br clear="all"> code.
