Templates Used in Osiron
OFFICIAL NOTICE - The content on this page refers to a mock idea / concept
OFFICIAL NOTICE - The content on this page is a draft and undergoing construction
OFFICIAL NOTICE - The content on this page is undergoing an extensive review
Additional Information Containers
Additional information containers have grown a little bit since I first added them in. Now I use them for all sorts of things - not just additional info - like break up text or highlighting important bits of information.
This is where I'd put my title...
... If I had one! Very simple and does wonders to break up the text.
[container:additional-info] [h4]Title[/h4] [p]Add some text here...[/p] [/container]
Error Message Containers
You can't beat some good old fashioned access denied messages. Here's a full example, plus the code for it.
//--- Access Denied ---//
WARNING: You're about to see this styled fully - lucky you guys! So first of all, as a minimum you'll see some warning text followed by the fake login fields. Then if you're really lucky, you might see a spoiler button or a direct link to another page.
As you can see, I've also got a little animation going below to make it appear as though something is being typed into the password field. Keyframes are really cool guys and if you want to spice up your CSS a little more, I definitely recommend looking into them.
DIGITAL ID
STAR-GZ PRI-LZER
PASSWORD
And this is how the text appears in the spoiler buttons!
Above is a spoiler button, below is a link. When it comes to adding these in, it's one or the other, never both.
[container:classified-info] [h4]//--- Access Denied ---//[/h4] [p]WARNING: Add some text here...[/p] [p]DIGITAL ID[/p] [section:login-field] [p]STAR-GZ PRI-LZER[/p] [/section] [p]PASSWORD[/p] [section:login-field] [container:login-field-text]**********************[/container] [/section] [spoiler] [p]Add some text here[/p]|CLICK ME [/spoiler] [p][url:LINK]THIS BUTTON IS A LINK![/url][/p] [/container]
File Access Containers
These are used to add a little bit of extra fluff text to the world. You can see a proper example over in the Chalaurans article that I did for SC 2020, or you can check out an example & code below.
... Accessing audio file ...
This audio file is Major Ziegler's final log, processed on the eve of the Battle of Scy'mor.
[container:access-file] [h4]... Accessing audio file ...[/h4] [p]Add some text here...[/p] [/container]
Character Shorts - Main Body Text
'Character shorts' are a handful of colourful containers that I use to break up the text and also provide some in-universe conversations. When they're in the main body of text, I'll use one of two different classes to get them to float either to the left or the right of the text (depending on how I feel).
Here's a complete example of what all five of them look like below with some fake text to get them to sit properly on the page.
Purple box - can also float to the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo laoreet sit amet cursus sit. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Nec ultrices dui sapien eget mi proin.
Red box - can also float to the left.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo laoreet sit amet cursus sit. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Nec ultrices dui sapien eget mi proin.
Orange box - can also float to the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo laoreet sit amet cursus sit. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Nec ultrices dui sapien eget mi proin.
Blue box - can also float to the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo laoreet sit amet cursus sit. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Nec ultrices dui sapien eget mi proin.
Green box - can also float to the left.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Justo laoreet sit amet cursus sit. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Nec ultrices dui sapien eget mi proin.
And below is the BBCode used. The 'character-short-float' class needs to be changed to either 'character-short-right' or 'character-short-left' to get it to float to either side. Then for the 'char-short-colour' class, change the colour part to either 'red', 'orange', 'purple', 'blue' or 'green'.
[container:character-short-float char-short-colour] [p]Green box - can also float to the left.[/p] [/container]
Incoming Transmission Messages
These are a fun little way to give some insight and make the reader (aka you guys) feel more included - much like everything I've coded into this little sci-fi world. And hey, if you stare at it long enough, you might notice the shiny little animation in the background that keeps repeating.
//--- Incoming transmission ---//
//--- Transmission ID ---//
WARNING - THE MESSAGE WILL GO BELOW HERE - SOMETIMES THERE'S SPOILER BUTTONS IN HERE TOO
As you can see, the warning goes in all caps. The actual message that comes underneath it is in lower case.
Click MeMaybe one day I'll come back and add some cheeky little in-universe text for you guys. Today is not that day.
[container:inc-transmission] [container:inc-trans-inside] [h4]//--- Incoming transmission ---//[/h4] [h4]//--- Transmission ID ---//[/h4] [p]WARNING - WARNING TEXT - MORE WARNING TEXT[/p] [p]Add text here...[/p] [spoiler][p]Add text here...[/p]|Click Me[/spoiler] [/container] [/container]
Sometimes, I want the incoming transmission message to float to one side of the text. So I've got an alternate class to switch in whenever I want the containers to float. This'll only work when there's no sidebar, or when the content is in the footer. These are:
[container:inc-trans-left] [container:inc-trans-inside] [h4]//--- Incoming transmission ---//[/h4] [h4]//--- Transmission ID ---//[/h4] [/container] [/container]
[container:inc-trans-right] [container:inc-trans-inside] [h4]//--- Incoming transmission ---//[/h4] [h4]//--- Transmission ID ---//[/h4] [/container] [/container]
Osiryx Federation Logs
These are containers that are styled to look like actual text has been inputted into a console - this style in particular is for OF logs. You'll see a Terran specific styling later on (essentially, it's just a couple of different classes & CSS to make them stand out fromo one another). Can be used with spoiler buttons or without, as demonstrated below.
NAME
TYPE Logs - SUBTYPE
[UGY YEAR]
[INITIAL SURNAME, TITLE]
Federation ID [FEDERATION ID]
[CLASS 1-7: SUBCLASS]
[START TRANSMISSION]
This is where your normal text goes when it's not in a spoiler button.
CLICK MEAnd this is what the text looks like when it's in a spoiler button!
[END TRANSMISSION]
[container:osiryx-log] [section: fas fa-3x fa-folder-open] [/section] [h3]NAME[/h3] [h4]TYPE Logs - SUBTYPE[/h4] [hr] [center][p][b][UGY YEAR][/b][/p] [p][b][INITIAL SURNAME, TITLE][br]Federation ID [FEDERATION ID][/b][/p] [p][b][CLASS 1-7: SUBCLASS][/b][/p][/center] [hr] [center][p][b][START TRANSMISSION][/b][/p][/center] [p]Add some text here...[/p] [spoiler] [p]Add some text here...[/p]|[section:fas fa-terminal] [/section]CLICK ME [/spoiler] [center][p][b][END TRANSMISSION][/b][/p][/center] [/container]
Terran Logs
These are containers that are styled to look like actual text has been inputted into a console. They are also Terran specific versions of the logs, you'll have seen an OF style earlier on the page. Can be used in combination with spoiler buttons, or without.
NAME
TYPE Logs - SUBTYPE
Earth Date [YEAR]
Universal Galactic Date [YEAR]
Digital Signature [TITLE NAME SURNAME]
Digital ID [DIGITAL ID]
[START TRANSMISSION]
Sometimes, I'll add in some spoiler buttons so that when you click through each one, it feels like you're using a console menu.
Click MeWhat have we hidden in here? Absolutely nothing!
What have we hidden in here? Still nothing!
[END TRANSMISSION]
[FILE UNDER SUBTYPE]
[container:terran-log] [section: fas fa-3x fa-folder-open] [/section] [h3]Code for Terran logs without spoilers[/h3] [h4]TYPE Logs - SUBTYPE[/h4] [hr] [p][b]Earth Date [YEAR][br]Universal Galactic Date [YEAR][/b][/p] [p][b]Digital Signature [TITLE NAME SURNAME][br]Digital ID [DIGITAL ID][/b][/p] [hr] [p][b][START TRANSMISSION][/b][/p] [p]Add some text here...[/p] [p][b][END TRANSMISSION][br][FILE UNDER SUBTYPE][/b][/p] [/container]
[container:terran-log] [section: fas fa-3x fa-folder-open] [/section] [h3]Code for Terran logs with spoilers[/h3] [h4]TYPE Logs - SUBTYPE[/h4] [hr] [p][b]Earth Date [YEAR][br]Universal Galactic Date [YEAR][/b][/p] [p][b]Digital Signature [TITLE NAME SURNAME][br]Digital ID [DIGITAL ID][/b][/p] [hr] [p][b][START TRANSMISSION][/b][/p] [p]Add some text here...[/p] [spoiler] [p]Add some text here...[/p]|[section:fas fa-terminal] [/section]Click Me [/spoiler] [p][b][END TRANSMISSION][br][FILE UNDER SUBTYPE][/b][/p] [/container]
Quotes
First line of the quote
Second line of the quote
[quote][p][section: fas fa-2x fa-quote-left] [/section] Text here...[/p] [p]Text here...[/p]|Person's Name - Where the quote is from [/quote]
Additional Information Boxes - Sidebar Style
This is where I'd put my title...
... If I had one! BBCode for this is exactly the same as when it's in the main body text.
Character Shorts - Side Menu Versions
'Character shorts' are a handful of colourful containers that I use to break up the text and also provide some in-universe conversations. There are five colours, same as the body text versions. Here's what they look like on the sidebar.
A blue character short box, for when you're feeling blue (but not really)
A green character short box, for when you're feeling jealous (because we all know jealousy is a green eyed monster)
A purple character short box, for when you're feeling particularly regal (probably)
A red character short box, for when you're feeling angry, or want things to go faster
An orange character short box, for when you're looking at a very nice sunset!
Code wise, let me reveal my secrets below. The char-short-colour is interchangeable with one of the following classes:
- char-short-blue
- char-short-green
- char-short-purple
- char-short-red
- char-short-orange
[container:character-short-side char-short-colour] [p]Add some text here...[/p] [/container]
Extra Sidebar Panels
Really, this is just copying the setup for the classes that are already there & combining them with containers in order to make additional panels. A good example of me using this is on Tau Cerberi, but for now here's a base idea of how it looks and what BBCode to grab.
And you can put whatever you want in here too! Usually I'll stick in extra little pieces of info - so like with Tau Cerberi I've included a list of moons in a second sidebar panel rather than keep adding to the default one. Again, it just helps break up the text a little bit.
[container:osiron-panel] [container:osiron-panel-inner] [p]Add some text here...[/p] [/container] [/container]
Comments