Mephisto
Positivity Goblin
Staff member
Moderator
Inner Sanctum Nobility
♔ Champion ♔
Vampire's Victim
Mod
Who Are You?
Jumbled Beginnings
Confirmed Responsible Adult
1000 Posts!
25000 Likes!
Challenge Champion
Dungeon Master
Staff
Chat Killer
Chat Monster
This thread is a repository for those that want to share their Outer Sanctum Specific locations, items, foods, games, customs and other lore.
The Outer Sanctum will over time adopt certain locations and details from the stories told that become iconic to the setting over time. Until then, this is a place for those of us who want to share and co conspire to shape our own mental picture of the landscape of Khare, Tethis, and the Infinite Wilds.
First post reserved for organization efforts later when there is more in here.
Templates for locations!
credit for almost all of our code knowledge goes to Selcouth and Jumbled who have added and modified many of these things into wonderful works of art. Many others have also contributed with their own trial and error. Huzzah to all the coders that made it easier for us with no knowledge whatsoever to plug and play some of these technical bits.
The Outer Sanctum will over time adopt certain locations and details from the stories told that become iconic to the setting over time. Until then, this is a place for those of us who want to share and co conspire to shape our own mental picture of the landscape of Khare, Tethis, and the Infinite Wilds.
First post reserved for organization efforts later when there is more in here.
Templates for locations!
credit for almost all of our code knowledge goes to Selcouth and Jumbled who have added and modified many of these things into wonderful works of art. Many others have also contributed with their own trial and error. Huzzah to all the coders that made it easier for us with no knowledge whatsoever to plug and play some of these technical bits.
-
Simple instructions just to use the template
-
1. Change the image. needs to be a link from imgur or other hosting site.
2. Change the location name.
3. Fill in the 4 places with text, (the front page info/quote, and the text for Personalities, Notes, and Rumors.)
You can add pictures in here but you might have to play with it a little to get them where you want.
Dassit you're done now. :)
-
Full instructions to change everything on the template
-
- Same as above, but you can also change the colors of the lines, the background image, the text colors, etc if you want to change the loook of the template itself.
- You can also change the categories, if you want to change RUMORS for example and make it MENU Just delete the word Rumors where it is highlighted and write in Menu(or whatever you want the section to be named)
-
Tethis
-
Code:
[div= /* ****text**** shows you where to change the location name and to write text */ /* ****replace with your image**** */ --img: url('https://i.imgur.com/2zA3jm0.png'); /* IMAGE POSITION */ --crop: 50% 20%; /* COLORS */ --accent: #91A3B0; --text: Black; --bold: #002E63; --bg: url('https://i.imgur.com/9DDrNYm.jpeg'); /* FONTS */ --heading: Georgia; --body: System-UI; ------ /* CODE START */ max-width: 100%; padding: 25px 0 15px 0; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;][div=height: auto; max-width: 800px; width:100%; background: var(--bg); padding: 20px; border-radius: 5px; border: 2px solid var(--accent); display: flex; flex-wrap: wrap; margin: 0 -15px; flex-direction: row; align-items: center;][div=background: var(--bg); position: relative; left: 99%; bottom: -148px; border-radius: 5px; font-size: 12px; padding: 5px 8px; font-weight: bold; cursor: pointer; /* SIGNATURE! DO NOT REMOVE */ ][div=color: var(--accent);][abbr="code by selcouth"][fa]fa-bookmark[/fa][/abbr][/div][/div][div=position: relative; flex-basis: 0; max-width: 100%; padding: 0 15px; ][div=position: relative; min-height: 400px; max-height: 700px; height: 100%; max-width: 100%; width: 750px; background: var(--img); background-position: var(--crop); background-size: cover; border-radius: 5px;][div= [/div] [/div][/div][div=position: relative; flex-basis: 0; flex-grow: 1; max-width: 100%; padding: 0 15px; text-align: center;][div= font-size: 40px; font-family: var(--heading); color: var(--accent); text-align: center; border-bottom: 1px solid var(--text); padding-bottom: 5px;]****LOCATION NAME****[/div][div= display: flex; flex-wrap: wrap; margin: 15px -15px 0 -15px; flex-direction: row; align-items: center; box-sizing: border-box; font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--text); font-family: var(--body);] [div=flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: 15px; padding-right: 10px; position: relative;][div=text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--bold); ][/div]Write the general location description here, or a quote that encapsulates it. [/div] [div=flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: 10px; padding-right: 15px; position: relative;][div=text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--bold); ][div=background: var(--accent); border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--bold); position: relative; margin-top: -20px; top: 41px; pointer-events: none; width: 101%; z-index: 1; height: 35px; text-align: center; text-transform: lowercase; letter-spacing: 1px; align-content: center; font-family: var(--body); display: flex; align-items: center; justify-content: center;]more information +[/div][/div][SPOILER=⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀][div=background: var(--bg); border-radius: 0 0 5px 5px; border: 2px solid var(--accent); font size- 10px; color: var(--text); margin: -13px; padding: 25px; ][div= display: flex; flex-wrap: wrap; margin: 10px 25px 25px 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]PERSONALITIES[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px;[/div]****Write stuff about the owners or personalities of note here.**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline; [div= display: flex; flex-wrap: wrap; margin: 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]NOTES[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px; [/div] ****Write stuff about Notes here**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline; [div= display: flex; flex-wrap: wrap; margin: 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]RUMORS[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px; [/div] ****Write stuff about rumors**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline;
-
Khare
-
Code:
[div= /* ****text**** shows you where to change the location name and to write text */ /* ****replace with your image**** */ --img: url('https://i.imgur.com/2zA3jm0.png'); /* IMAGE POSITION */ --crop: 50% 20%; /* COLORS */ --accent: #8B6508; --text: Black; --bold: #5C3317; --bg: url('https://i.imgur.com/hoJoj1z.jpeg'); /* FONTS */ --heading: Georgia; --body: System-UI; ------ /* CODE START */ max-width: 100%; padding: 25px 0 15px 0; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;][div=height: auto; max-width: 800px; width:100%; background: var(--bg); padding: 20px; border-radius: 5px; border: 2px solid var(--accent); display: flex; flex-wrap: wrap; margin: 0 -15px; flex-direction: row; align-items: center;][div=background: var(--bg); position: relative; left: 99%; bottom: -148px; border-radius: 5px; font-size: 12px; padding: 5px 8px; font-weight: bold; cursor: pointer; /* SIGNATURE! DO NOT REMOVE */ ][div=color: var(--accent);][abbr="code by selcouth"][fa]fa-bookmark[/fa][/abbr][/div][/div][div=position: relative; flex-basis: 0; max-width: 100%; padding: 0 15px; ][div=position: relative; min-height: 400px; max-height: 700px; height: 100%; max-width: 100%; width: 750px; background: var(--img); background-position: var(--crop); background-size: cover; border-radius: 5px;][div= [/div] [/div][/div][div=position: relative; flex-basis: 0; flex-grow: 1; max-width: 100%; padding: 0 15px; text-align: center;][div= font-size: 40px; font-family: var(--heading); color: var(--accent); text-align: center; border-bottom: 1px solid var(--text); padding-bottom: 5px;]****LOCATION NAME****[/div][div= display: flex; flex-wrap: wrap; margin: 15px -15px 0 -15px; flex-direction: row; align-items: center; box-sizing: border-box; font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--text); font-family: var(--body);] [div=flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: 15px; padding-right: 10px; position: relative;][div=text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--bold); ][/div]Write the general location description here, or a quote that encapsulates it. [/div] [div=flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: 10px; padding-right: 15px; position: relative;][div=text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--bold); ][div=background: var(--accent); border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--bold); position: relative; margin-top: -20px; top: 41px; pointer-events: none; width: 101%; z-index: 1; height: 35px; text-align: center; text-transform: lowercase; letter-spacing: 1px; align-content: center; font-family: var(--body); display: flex; align-items: center; justify-content: center;]more information +[/div][/div][SPOILER=⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀][div=background: var(--bg); border-radius: 0 0 5px 5px; border: 2px solid var(--accent); font size- 10px; color: var(--text); margin: -13px; padding: 25px; ][div= display: flex; flex-wrap: wrap; margin: 10px 25px 25px 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]PERSONALITIES[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px;[/div]****Write stuff about the owners or personalities of note here.**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline; [div= display: flex; flex-wrap: wrap; margin: 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]NOTES[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px; [/div] ****Write stuff about Notes here**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline; [div= display: flex; flex-wrap: wrap; margin: 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]RUMORS[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px; [/div] ****Write stuff about rumors**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline; 00; text-transform: uppercase; display: inline;[/div][/div][/div][/div][/SPOILER][/div][/div][/div][/div][/div][/div]
-
Ocean
-
Code:
[div= /* ****text**** shows you where to change the location name and to write text */ /* ****replace with your image**** */ --img: url('https://i.imgur.com/3QYu5k0.png'); /* IMAGE POSITION */ --crop: 50% 20%; /* COLORS */ --accent: #4973AB; --text: Black; --bold: #3B4990; --bg: url('https://i.imgur.com/7u3xTkp.jpeg'); /* FONTS */ --heading: Georgia; --body: System-UI; ------ /* CODE START */ max-width: 100%; padding: 25px 0 15px 0; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;][div=height: auto; max-width: 800px; width:100%; background: var(--bg); padding: 20px; border-radius: 5px; border: 2px solid var(--accent); display: flex; flex-wrap: wrap; margin: 0 -15px; flex-direction: row; align-items: center;][div=background: var(--bg); position: relative; left: 99%; bottom: -148px; border-radius: 5px; font-size: 12px; padding: 5px 8px; font-weight: bold; cursor: pointer; /* SIGNATURE! DO NOT REMOVE */ ][div=color: var(--accent);][abbr="code by selcouth"][fa]fa-bookmark[/fa][/abbr][/div][/div][div=position: relative; flex-basis: 0; max-width: 100%; padding: 0 15px; ][div=position: relative; min-height: 400px; max-height: 700px; height: 100%; max-width: 100%; width: 750px; background: var(--img); background-position: var(--crop); background-size: cover; border-radius: 5px;][div= [/div] [/div][/div][div=position: relative; flex-basis: 0; flex-grow: 1; max-width: 100%; padding: 0 15px; text-align: center;][div= font-size: 40px; font-family: var(--heading); color: var(--accent); text-align: center; border-bottom: 1px solid var(--text); padding-bottom: 5px;]****LOCATION NAME****[/div][div= display: flex; flex-wrap: wrap; margin: 15px -15px 0 -15px; flex-direction: row; align-items: center; box-sizing: border-box; font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--text); font-family: var(--body);] [div=flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: 15px; padding-right: 10px; position: relative;][div=text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--bold); ][/div]Write the general location description here, or a quote that encapsulates it. [/div] [div=flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: 10px; padding-right: 15px; position: relative;][div=text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--bold); ][div=background: var(--accent); border-radius: 5px; font-size: 12px; font-weight: 500; color: var(--bold); position: relative; margin-top: -20px; top: 41px; pointer-events: none; width: 101%; z-index: 1; height: 35px; text-align: center; text-transform: lowercase; letter-spacing: 1px; align-content: center; font-family: var(--body); display: flex; align-items: center; justify-content: center;]more information +[/div][/div][SPOILER=⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀][div=background: var(--bg); border-radius: 0 0 5px 5px; border: 2px solid var(--accent); font size- 10px; color: var(--text); margin: -13px; padding: 25px; ][div= display: flex; flex-wrap: wrap; margin: 10px 25px 25px 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]PERSONALITIES[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px;[/div]****Write stuff about the owners or personalities of note here.**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline; [div= display: flex; flex-wrap: wrap; margin: 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]NOTES[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px; [/div] ****Write stuff about Notes here**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline; [div= display: flex; flex-wrap: wrap; margin: 25px; flex-direction: row; align-items: center; box-sizing: border-box;][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][div=flex-basis: 0; flex-grow: 0.5; max-width: 100%; color: var(--bold); font-family: var(--heading); text-align: center; font-size: 22px; font-weight: 600; padding: 0 15px;]RUMORS[/div][div=border-bottom: 1px solid var(--bold); flex-grow: 0.5; max-width: 100%; line-height: 0;]⠀[/div][/div][div=text-align: justify; font-family: var(--body); font-size: 14px; [/div] ****Write stuff about rumors**** [div=color: var(--bold); font-size: 13px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; display: inline; 00; text-transform: uppercase; display: inline;[/div][/div][/div][/div][/SPOILER][/div][/div][/div][/div][/div][/div]
Last edited: