Void Post Template

Link to article: Void Post Template.

/* ---- PRESENTATION ---- */
 .unmargined > div:first-of-type{ display: none; }
 .templateInfo{ margin: 0 0 1em; padding: 0 1em; border: 1px solid hsl(0, 0%, 87%); }
 .templateInfo hr{ margin: 1em 0; }
.footnotes-footer{ display: none; }
 h1, h3{ text-align: center; }

/* ---- CODE BY WOEDENAZ ---- */
 .help{
     display: flex;
     align-content: stretch;
     padding-top: 1em;
}
 .help blockquote{
     margin: 0;
     font-size: 85%;
}
 .help blockquote > p{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     align-content: center;
     min-height: 2rem;
     margin: 0;
     margin-right: 0;
}
 .help blockquote > p *{
     height: 100%;
     margin: 0 .1rem;
}
 .help blockquote:nth-of-type(1){
     margin-right: 0;
     padding: 0;
     background: transparent;
     border: unset;
     box-shadow: unset;
     text-align: right;
}
 .help blockquote:nth-of-type(1) > p{
     justify-content: flex-end;
}
 .help blockquote:nth-of-type(2){
     width: 60%;
     margin-left: 1em;
}

(none)

(none)

```
templateInfo
```
```
vactivity
```
```
templateInfo
```
```
templateInfo
```
```
code
```
```
help
```
```
code
```
```
vactivity
```
```
templateInfo
```
```
vactivity
```

[[iftags +component]]
[[>]]
[[module Rate]]
[[/>]]

[[module CSS]]
/* ---- PRESENTATION ---- */
 .unmargined > div:first-of-type{ display: none; }
 .templateInfo{ margin: 0 0 1em; padding: 0 1em; border: 1px solid hsl(0, 0%, 87%); }
 .templateInfo hr{ margin: 1em 0; }
.footnotes-footer{ display: none; }
 h1, h3{ text-align: center; }

/* ---- CODE BY WOEDENAZ ---- */
 .help{
     display: flex;
     align-content: stretch;
     padding-top: 1em;
}
 .help blockquote{
     margin: 0;
     font-size: 85%;
}
 .help blockquote > p{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     align-content: center;
     min-height: 2rem;
     margin: 0;
     margin-right: 0;
}
 .help blockquote > p *{
     height: 100%;
     margin: 0 .1rem;
}
 .help blockquote:nth-of-type(1){
     margin-right: 0;
     padding: 0;
     background: transparent;
     border: unset;
     box-shadow: unset;
     text-align: right;
}
 .help blockquote:nth-of-type(1) > p{
     justify-content: flex-end;
}
 .help blockquote:nth-of-type(2){
     width: 60%;
     margin-left: 1em;
}
[[/module]]

[[note]]
**Author:**
[[*user Lt Flops]]
----
**Based on The Concept By:**
[[*user TyGently]] ([[[*https://scp-wiki.wikidot.com/intermission|Source]]])
----
**Based on Code By:**
[[*user faminepulse]] ([[[*https://scp-wiki.wikidot.com/xiupania|Source]]])
----
**Image Attribution:**
"[https://scp-wiki.wdfiles.com/local--files/component%3Avoid-post/user1.jpg user1]" by [https://commons.wikimedia.org/wiki/File:Pepper%26Carrot_creature_phoenix.jpg David Revoy] – CC BY 4.0
"[https://scp-wiki.wdfiles.com/local--files/component%3Avoid-post/user2.jpg user2]" by [https://www.flickr.com/photos/artfarmer/173599696/ Terry Priest] – CC BY-SA 2.0
----
**How to Use:**
https://scp-wiki.wikidot.com/component:void-post#toc2
[[/note]]

[[div class="templateInfo"]]
+ Example
[[/div]]

[[include :scp-wiki:component:void-post-source
|profile-pic=user1.jpg
|username=Limp Firebird
|handle=limpfirebird_PW
|void-msg=[[span class="vactivity"]]#click-me[[/span]] Me? A talking bird? Oh, don't be silly. If I were, wouldn't you think I– //SQUAAAWK!//
|echoes=15
|hums=52
|time-and-date=9:43 PM · 5 April 2020
]]

[[div class="templateInfo"]]
+ What Is This?
----
"Void" is an in-universe Twitter analogue, used by people of paranormal communities from behind the Veil. Below is a simple format for Void messages. This code will allow for easy placement of a Void message (or messages) onto your own article. It also has mobile functionality.[[footnote]]**NOTE:** You may find that this component looks bigger when used with Black Highlighter (or BHL). This is because BHL uses a larger base pixel size.[[/footnote]]
[[/div]]

[[div class="templateInfo"]]
+ How to Use
----
+++ Step 1. Copy me onto your page!
----
[[div class="code"]]
@@[[include :scp-wiki:component:void-post@@
@@|profile-pic=@@
@@|username=@@
@@|handle=@@
@@|void-msg=@@
@@|echoes=@@
@@|hums=@@
@@|time-and-date=@@
@@]]@@
[[/div]]
----
+++ Step 2. Read this short guide.
----
[[div_ class="help"]]
> Start of Include Block. ▷
> 
> File URL. Resizes to Default Width=50px. **(__Recommended File Width__: ≤150px)** ▷
> 
> Desired Username. ▷
> 
> Desired Void Handle. ▷
> 
> The Actual Text of a Void Message. **(__Suggested Length__: ≤280 characters; Any Length OK)** ▷
> 
> Number of Echoes. **(Akin to "Retweets")** ▷
> 
> Number of Hums. **(Akin to "Likes")** ▷
> 
> Time and Date Format. **(__Suggested Format__: H:MM AM/PM - D Month YYYY)** ▷
> 
> End of Include Block.
> 

> [[include :scp-wiki:component:void-post
> 
> |profile-pic={{placeholder.jpg}}
> 
> |username={{Place Holder}}
> 
> |handle={{placehandle}}
> 
> |void-msg={{This is a placeholder.}}
> 
> |echoes={{placenumber}}
> 
> |hums={{placenumber}}
> 
> |time-and-date={{placenumber}}
> 
> ]]
> 
[[/div]]

Upload your desired picture to the page first __before__ referencing its File URL.
----
+++ Step 3. Fill in all fields after each = sign.
----
+++ (OPTIONAL) Step 4. Void Interactions.
----
In a Void message, a character can tag another character's handle,[[footnote]]With an asterism: ⁂[[/footnote]] make reference to a Void trend,[[footnote]]With a hash symbol: #[[/footnote]] or post a link to something. These interactions are denoted with blue text -- but to emulate a //real// link, you can use the following code anywhere in the **{{void-msg}}** field:

[[div class="code"]]
@@[[span class="vactivity"]] #Placeholder [[/span]] @@
[[/div]]

**NOTE:** If you use this at the end of the **{{void-msg}}** field, you __must__ include **the following** after closing the span element, or the component will not work correctly:

[[code]]
@@ @@
[[/code]]

[[/div]]

[[div class="templateInfo"]]
+ Result
[[/div]]

[[include :scp-wiki:component:void-post-source
|profile-pic=user2.jpg
|username=Lampyra, the Watcher
|handle=lampyra_SH
|void-msg=A light in the night. [[span class="vactivity"]] #serpentshand [[/span]] 
|echoes=0
|hums=0
|time-and-date=A Single Moment · In Time
]]

@@ @@
----
+++ > [[[https://scp-wiki.wikidot.com/component:void-post-source|To see the source code, follow me!]]] <
----
@@ @@
[[/iftags]]

[[iftags -component]]
[[include :scp-wiki:component:void-post-source
|profile-pic={$profile-pic}
|username={$username}
|handle={$handle}
|void-msg={$void-msg}
|echoes={$echoes}
|hums={$hums}
|time-and-date={$time-and-date}
]]
[[/iftags]]

Void Post Template

Module Styles

Inline Styles

Includes

CSS Classes

Page Source