Templates for Ma'rune

This article is a stub

This article is a draft

Currently in review

Here's a place for me to collate my templates. Any containers / sections etc. that I've used in Ma'rune will be here, with the BBCode, so that I can easily copy & paste them when needed.

Hiding content on large screens

Here's a trick I learnt from work. By using the 'display: none;' CSS and Media Queries, we can instruct certain content to display (or not display!) on specific screen sizes. So you'll only be able to see this box on mobile!

 
[section:hide-on-full]
[p]Here's how I utilise this in the code![/p]
[/section]
 

Containers for Additional Notes

These are three additional containers with unique classes that I use to add notes to my articles, for various reasons.

Content Warning

The first is the 'article-warnings' container. I'll use this for one of three reasons:

  1. To let users that aren't logged in know that they're additional content that only those logged in can see
  2. Spoiler warnings
  3. NFSW warnings

Spoiler warnings will be followed with the ability to join the Spoilers subscriber group.

View Spoilers

NSFW warnings will be followed with the ability to join the NSFW subscriber group (for 18+ members only).

View NSFW Content
 
[container:article-warnings]
[h3]Content Warning[/h3]
[p]TEXT[/p]
[/container]
 

A Note to Lightcallers

Finally, the 'exclusive-content' container. This will be used to highlight information available to Patrons only.

 
[container:exclusive-content]
[h3]A Note to Lightcallers[/h3]
[p]TEXT[/p]
[/container]
 

Historical Facts Containers

What's a historical fact container you ask? Well, really I should've just used a quote box, but by the time I'd thought of the idea I was already using those for story excerpts etc. so I had to improvise.

So these use the [container] BBCode with the 'historical-facts' class that I made up. They're essentially a secondary quote box!

Sunlance,
Captain of Something or Other
 
[container:historical-facts]
[section: ra ra-quill-ink ra-2x] [/section]
[p]Text here[/p]
[section:author]First Name Surname,[br]Title[/section]
[/container]
 

Quote Boxes

Who doesn't love a good quote, eh? You'll see these interspersed throughout a lot of my articles. Some of them will even be direct quotes from The Wayfarer game!

A lot of the time, I don't really add an author in either, but for demonstration purposes I'll put one in now!

— Sunlance, Captain of Something or Other
 
[quote]
[section: fas fa-comments fa-2x] [/section]
[p]Text here[/p]|Sunlance
[/quote]
 

Spoiler Button Grid

Here's a grid so that the spoiler buttons will sit on the same row. You probably haven't seen these yet as I've only really utilised it in my hidden plot articles.

Button One
  • Example (first appearance)
Button Two
Example

Example
Button Three
  1. Example
  2. Example
 
[row]
	[container:btn-grid-3 col-md-4]
		[center][spoiler]
			[left][ul]
				[li][b]Example[/b] (first appearance)[/li]
			[/ul][/left]
		|Character Appearances[/spoiler][/center]
	[/container]
	[container:btn-grid-3 col-md-4]
		[center][spoiler]
			[left]Example[br][br]Example[/left]
		|Major Events[/spoiler][/center]
	[/container]
	[container:btn-grid-3 col-md-4]
		[center][spoiler]
			[left][ol][li]Example[/li][li]Example[/li][/ol][/ul][/left]
		|Character Choices[/spoiler][/center]
	[/container]
[/row]
 

Spoiler/Guide Accordion

This is my workaround for not having a proper accordion on WA - utilising a [container and nesting the spoiler buttons inside. Most of the time, you'll see this on things like my character articles as a way to hide guides or secrets (with the addition of that being hidden from anyone not in the spoilers subscriber group).

Secrets - Example

Secret text would go here. These are the juicy little extra details that you may or may not be able to find out whilst reading through The Wayfarer (when I finally release it!)

Guides - Example

Guide text would go here, so things like how interacting with other characters or certain actions effects your relationships.


 
[container:accordion-secrets]
[spoiler]
[p]Secret text would go here.[/p][/p]|Secrets - Example
[/spoiler]
[spoiler]
[p]Guide text would go here.[/p]|Guides - Example
[/spoiler]
[/container]
 

World Views Containers

For additional bits of info, from an in-world perspective. Usually just very minor bits of information and you'll see these floating to either the left or right of the text that it relates to.

This container is floating to the left.

 
[container:world-views world-views-left]
[section: ra ra-castle-emblem ra-2x] [/section]
[p]This first example (to the left) is using the 'world-views-left' class.[/p]
[/container]
 

This container is floating to the right.

 
[container:world-views world-views-right]
[section: ra ra-castle-emblem ra-2x] [/section]
[p]This first example (to the right) is using the 'world-views-right' class.[/p]
[/container]
 

Hiding content on smaller screens!

Here's a trick I learnt from work. By using the 'display: none;' CSS and Media Queries, we can instruct certain content to display (or not display!) on specific screen sizes. So you'll only be able to see this box on larger screens, like tablets / laptops / monitors!

 
[section:hide-on-small]
[p]Here's how I utilise this in the code![/p]
[/section]
 

Sidebar Spoiler Button

This is the BBCode & CSS combo I use for spoiler buttons in the sidebar. You'll probably have seen these used for the 'Defining Characteristics', 'Falling in Love' and 'Personal Goals' buttons on the character pages.

 
[center]
[container:panel-darker]
[spoiler]
[p][i]Add your text here[/i][/p]|Sidebar Spoiler Button
[/spoiler]
[/container]
[/center]
 
PANELS

These are extra panels, using containers

[container:marune-panel]
[container:marune-panel-inner]
[h4]title[/h4]
[p]text[/p]
[/container]
[/container]
 

Personal Connections

These boxes are used when I want to show a character's personal connections with others (strictly limited to being in the sidebar - otherwise I'd be putting the information in the relationships tab!).

Person's Name

And here is where we would describe what the character's relationship is like with this person.

 
[container:character-connections]
[h3]Person's Name[/h3]
[p][i]Text[/i][/p]
[/container]
 


Cover image: The Wayfarer Book 1 Cover by SunlanceXIII

Comments

Please Login in order to comment!
Powered by World Anvil