This page is an outline of custom formatting features implemented for use in the Morrowind Modding Wiki. To use these in Obsidian, enable all MMW_ CSS snippets in Obsidian’s ‘Appearance’ settings so they render correctly in Obsidian.
Formatting
Image Adjustments
Image adjustments from SIRvb’s Image Adjustments CSS snippet are incorporated into MMW. Some examples of how it can be used include:
resizing images
displaying images as a banner across the page or across a callout
image-warp (using the CSS ‘float’ property), allowing text and other content to wrap around an image.
Keyboard-Styled Text
Text can be styled like the keys of a keyboard by wrapping text within <kbd> </kbd> HTML tags. For example, <kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>del</kbd> gets rendered as ctrl + alt + del.
These should be used for any instance where programs’ default hotkeys (ones which are not customizable, or are the default keybinding) are mentioned.
Closing HTML tags
<kbd> is an HTML tag. It is used to surround an ‘element’ (in this case, a piece of text). As it is not self-closing, the second tag in a pair of tags needs a forward slash (/) to ‘close’ it.
Example: <kbd> </kbd>.
Callout Adjustments
MMW borrows a large number of Callout Adjustments from SIRvb’s ‘ITS Theme’ for Obsidian. These add much-needed flexibility for styling and positioning callouts.
The sizing is a percentage, relative to the callout’s parent. Using |wmed as an example:
if placed directly in the page body, it would take up 60% page-width.
if nested within another callout, it would only take up 60% of the ‘parent’ callout’s width.
Sizing can be made to use pixels instead of percentage by adding |static.
Attributes
Callout Width %
Callout Width px
wmicro
10%
50px
wtiny
20%
100px
wsmall
30%
200px
ws-med
40%
300px
wm-sm
50%
400px
wmed
60%
500px
wm-tl
80%
600px
wtall
95%
700px
wfull
100%
wfit
Auto
Auto
Custom Callouts
In addition to the default Obsidian Callouts, MMW also adds the following custom Callouts:
Column Callout
The [!column] callout lets you display content as a grid.
The callout itself is invisible but its contents get displayed as a grid, with each new line of the callout represents a new grid column. It works best when nesting other callouts within it. However, if you wish to write content in columns without callout styling for the nested callouts, you can add the Callout Adjustments metadata clean no-title to them.
By adding the flex metadata, grid columns will stack vertically on mobile.
Column
Use Nested Callouts
[column] is designed to have callouts nested within it.
To remove styling from nested callouts, add clean no-title to the metadata
You must add a left or right attribute to embeds if the embedded content itself already floats left or right.
Example:
The infobox callout already floats right. To embed it in another page, add |right to the embed wikilink’s alias.
This prevents the embed from taking up 100% of the page-width, instead of wrapping around other content
Float Embed Left or Right
Embeds can be made to float to the left or right of a page by adding |left or |right to the embed wikilink’s alias.
As well as being a stylistic choice to move supplementary content outside of the main flow of the text, it is also necessary when embedding a block which contains an element with a float property already stipulated (e.g., an infobox callout).
