Hello Murderbot fandom! I'm super happy to 1. be here, and 2. present this to you! This is honestly my first baby steps into details summary logic, so please excuse the crappy logic/code relating to that. Because of said logic, when you hide creator's style it doesn't look... amazing, let's say. If that bothers you, I'll show you how to make alternative text that doesn't show while the style is on.

The buttons are all functional. Click to your heart's content!

Let's get into it!

Demonstration !!

Basic SecSys Things

SEC_SYSTEM

. . .
GOVERNOR MODULE DISABLED

❏

searching... no technicians nearby

SEC_SYSTEM .. identity
— enter ID:
< MURDERBOT >

SEC_SYSTEM

. . .
SCANNING FOR
THREATS . . .

❏

searching...

SEC_SYSTEM

. . .
THREAT
ASSESSMENT:
27%

low

❏

contributing factors: yeah i'm not writing that

SEC_SYSTEM

. . .
RISK
ASSESSMENT:
43%

mid

❏

argggggggg

SEC_SYSTEM

. . .
RISK
ASSESSMENT:
91%

max

❏

sanctuary moon sanctuary moon sanctuary moon

Misc. Alerts (HubSys, SelfSys, & Diagnostics)

HUB_SYSTEM

. . .
ABORT ! ABORT ! ABORT !

❏

sincerely, not-greycris

SELF_SYSTEM

. . .
RUNNING
DIAGNOSTIC . . .

❏

you better turn out operating at 105%

SELF_SYSTEM

. . .
PROBLEMS DETECTED:

PHYS_SYSTEMS: PROBLEM

WEAPONS_SYS: OK
DATAPORT_SYS: OK
GOVERNOR MODULE: !!
POWER CELL CHARGE: 73%

DATA_SYSTEMS: OK

FEED CONNECTIVITY: OK
FEED MONITORING: OK
MEMORY USAGE: 67%
DATAPORT: DISABLED

GEN_SYSTEMS: PROBLEM

PERFORMANCE RELIABILITY: 89%
RISK ASSESSMENT: 65%
THREAT ASSESSMENT: 77%

❏

i'm a disappointment

forced shutdown . . .

The Feed (Requests & Chats)

Private connection request from:

ART

"Urgent question."

Y / N

Feed connection established.

ART

Do you have the 4th season of World Hoppers?

SecUnit

Fuck off. Yes.

ART

No need to be so tetchy.

Feed connection lost.

Private connection request from:

ART

"What is up with you?"

Y / N

Private connection request from:

ART

"You've been acting weird ever since we helped the 1/2"

Y / N

Private connection request from:

ART

"Adamantine colonists. Should I call Dr. Bharadwaj? 2/2"

Y / N

The CSS

What You Can Customize

Most things, to be honest. If you hate the side color I used for, say, HubSys, you can mosey on over to .hubsys and change the hex code on border-left. (I recommend HTML Color Codes to pick one. It gives you either the hex or an RGB value to copy paste.)

The feed name and chat borders are customizeable! I didn't demonstrate it here, but if you feel like adding some personalization to a public chat, try adding/modifying this code:

    
      #workskin .fhr_person_a {
        border-right: 5px ridge #F222C2;
      }
      
      #workskin .receive_person_a {
        border-right: 6px double #F222C2;
      }

and put it here:

    
      <div class="feed receive receive_person_a">

        <div class="feed_header fhr fhr_person_a">Person A</div>

          I'm Person A, and I have hot pink borders!

      </div>

Of course, the pie charts are customizeable too! You'll have to make a new class for every new percentage (:/) but it shouldn't be too hard to modify.

What You Should Not Touch (unless you're forklift certified)

I wouldn't recommend modifying anything with .hide_box, .x_button, .check, or .dtw. These classes take the brunt of my ham-fisted details summary logic, and they're not fun to tinker with when they're not working. (Ask me how I know.) I also wouldn't touch the details > summary things or .hide, since they're kind of instrumental to make everything look good.

Copy & Paste

Click me to open the full workskin CSS!

    
#workskin .hide {
  display: none;
  color: transparent;
  font-size: 0;
  background: transparent;
}

#workskin .secsys {
  background: rgba(152,152,166,0.3);
  width: 87%;
  height: 24px;
  border-left: 4px solid #FF7042;
  border-bottom: 2px solid #FA9C57;
  position: absolute;
  top: 12px;
  left: 10px;
  z-index: 0;
}

#workskin .hubsys {
  background: rgba(166,166,152,0.3);
  width: 87%;
  height: 24px;
  border-left: 4px solid #FFE880;
  border-bottom: 2px solid #FA9C57;
  position: absolute;
  top: 12px;
  left: 10px;
  z-index: 0;
}

#workskin .selfsys {
  background: rgba(152,152,166,0.3);
  width: 87%;
  height: 24px;
  border-left: 4px solid #85C985;
  border-bottom: 2px solid #FA9C57;
  position: absolute;
  top: 12px;
  left: 10px;
  z-index: 0;
}

#workskin .outer {
  position: relative;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

#workskin .inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border: 0px;
  padding: 15px;
  padding-left: 30px;
  width: 250px;
  cursor: pointer;
}

#workskin .class_text {
  position: relative;
  color: white;
  text-shadow: 0px 0px 4px rgb(100,100,100);
  font-family: sans-serif;
  z-index: 500;
}

#workskin .class_text_big {
  font-size: 1.1em;
  z-index: 201;
}

#workskin .annouc {
  color: #FA9C57;
  font-size: 1.3em;
  font-family: sans-serif;
  text-shadow: 0px 0px 4px #FFB04A;
  transition: color 0.2s;
  margin-bottom: -10px;
  margin-top: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

#workskin .annouc_sml {
  font-size: 0.9em;
}

#workskin .corner {
  width: 30px;
  height: 20px;
  border: 2px solid #FA9C57;
  position: absolute;
}

#workskin .one {
  border-right: 0;
  border-top: 0;
  bottom: 5px;
  left: 10px;
}

#workskin .two {
  border-left: 0;
  border-bottom: 0;
  top: 36px;
  right: 24px;
}

#workskin .red {
  color: #FF7042;
  text-shadow: 0px 0px 4px #F2733F;
}

#workskin .bigg {
  font-size: 1.15em;
}

#workskin .highlight {
  background-color: rgba(255, 207, 105, 0.45);
}

#workskin .pie_label {
  font-family: monospace;
  color: grey;
  text-shadow: 0px 0px 5px rgb(100,100,100);
  position: absolute;
  top: 50px;
  right: 60px;
}

#workskin .pie_outline {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: absolute;
  top: 70px;
  right: 40px;
  border: 2px solid #FF7042;
  z-index: 100;
}

#workskin .pie {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: 70px;
  right: 40px;
}

#workskin .twenty_seven {
  background-image: conic-gradient(#85C985 27%, rgba(0,0,255,0.05) 27%);
}

#workskin .forty_three {
  background-image: conic-gradient(#FFDF61 43%, rgba(0,0,255,0.05) 43%);
}

#workskin .ninety_one {
  background-image: conic-gradient(#ED4C24 89%, rgba(0,0,255,0.05) 95%);
}

#workskin .underscore {
  position: absolute;
  right: 75px;
  top: 15px;
}

#workskin .big_box {
  position: absolute;
  right: 53px;
  top: 15px;
}

#workskin .x_button {
  position: absolute;
  right: 37px;
  top: 15px;
}

#workskin details[open] .x_button::after {
  content: '×';
}

#workskin details:not([open]) .x_button::after {
  content: '';
  display: none;
}

#workskin .expand {
  font-size: 0.8em;
  font-family: sans-serif;
  padding-left: 5px;
  margin-left: 8px;
  margin-top: 3px;
  width: 80%;
  color: #FF7042;
  text-shadow: 0px 0px 4px #F2733F;
  border-left: 4px double grey;
  border-bottom: 2px solid grey;
  background: rgba(0,0,255,0.05);
}

#workskin .diag_probs {
  font-size: 0.9em;
  font-family: sans-serif;
  padding: 5px;
  font-weight: 600;
  color: #FF7042;
  text-shadow: 0px 0px 4px #F2733F;
}

#workskin .status {
  font-weight: 400;
  color: #849CDB;
  text-shadow: 0px 0px 4px #A4B8ED;
}

#workskin .problem {
  display: inline;
  font-weight: 400;
  color: #F0C016;
  text-shadow: 0px 0px 4px #FFD952;
}

#workskin .hoverrr {
  transition: color 0.25s;
}

#workskin .hoverrr:hover {
  content: '';
  color: #FFCF69;
}

#workskin details > summary {
  list-style-type: none;
}

#workskin details > summary::-webkit-details-marker {
  display: none;
}

#workskin details > summary::before {
  content: '';
}

#workskin details[open] > summary::before {
  content: '';
}

#workskin .userstuff ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 5px;
  color: #FA9C57;
  text-shadow: 0px 0px 4px #FFB04A;
}

#workskin .userstuff li {
  list-style: none;
  padding-left: 0.5em;
  margin-top: -0.3em;
  margin-bottom: -0.3em;
  text-indent: -1em;
}

#workskin .userstuff li:before {
  content: '■';
  padding-right: 5px;
}

#workskin .feed_container {
  position: relative;
  margin: 4px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7px;
  padding-bottom: 7px;
  background: rgba(100,100,100,0.2);
  width: 285px;
  text-align: center;
  border-top: 3px dashed #849CDB;
  border-bottom: 3px solid #849CDB;
  color: #849CDB;
  font-family: monospace;
}

#workskin .feed {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 0px;
  padding: 15px;
  width: 215px;
  height: auto;
  background: rgba(37, 51, 79, 0.8);
  box-shadow: 0px 0px 4px rgba(37, 51, 79, 1);
  cursor: pointer;
  color: white;
  font-family: serif;
}

#workskin .feed_header {
  margin-bottom: 5px;
  font-family: sans-serif;
  font-weight: 600;
  padding-top: 4px;
  padding-bottom: 3px;
}

#workskin .fhs {
  background: linear-gradient(45deg, rgba(37, 51, 79, 0.5) 75%, rgba(37, 51, 79, 0.85) 75%, rgba(37, 51, 79, 0.75) 77%, rgba(0,0,0,0) 77%);
  border-left: 5px groove grey;
  padding-left: 7px;
}

#workskin .fhr {
  background: linear-gradient(135deg, rgba(0,0,0,0) 25%, rgba(37, 51, 79, 0.85) 25%, rgba(37, 51, 79, 0.85) 27%, rgba(37, 51, 79, 0.5) 27%);
  border-right: 5px ridge #BEC8E5;
  padding-right: 7px;
}

#workskin .send {
  border-left: 6px double grey;
  border-top-right-radius: 10px 10px;
  border-bottom-right-radius: 10px 10px;
  text-align: left;
}

#workskin .receive {
  border-right: 6px double #BEC8E5;
  border-top-left-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  text-align: right;
}

#workskin .feed_divide {
  border: 3px solid white;
  width: 100%;
}

#workskin .feed_req {
  position: relative;
  margin: 10px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7px;
  padding-bottom: 7px;
  background: rgba(100,100,100,0.2);
  width: 280px;
  text-align: center;
  border-top: 3px solid #849CDB;
  border-bottom: 3px solid #849CDB;
  border-left: 3px dashed #849CDB;
  border-right: 3px dashed #849CDB;
  color: #849CDB;
  font-family: monospace;
}

#workskin .contact {
  display: flex;
  margin-top: 2px;
  margin-bottom: 2px;
}

#workskin .contact_name {
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 20px;
  width: min;
  max-width: 45%;
  color: white;
  text-shadow: 0px 0px 4px rgb(100,100,100);
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  text-align: left;
}

#workskin .contact_desc {
  flex: 1;
  align-content: center;
  font-size: 0.85em;
  margin-left: 10px;
  margin-right: 20px;
  color: white;
  text-shadow: 0px 0px 4px rgb(100,100,100);
  font-family: sans-serif;
  text-align: left;
}

#workskin .shutdown {
  font-family: monospace;
  font-size: 1.4em;
}

#workskin details {
  padding: 0;
  margin: 0;
  z-index: 75;
}

#workskin .dtw {
  padding-right: 20px;
}

#workskin {
  overflow: visible;
}

#workskin .userstuff figure {
  transform: translateX(-4%);
}

#workskin .check {
  content: '❏';
}

#workskin .userstuff figure:has(details.dtw[open])
.check::after {
  content: '❏';
  color: white;
  text-shadow: 0px 0px 4px rgb(100,100,100);
  font-family: sans-serif;
  z-index: 500;
  position: absolute;
  right: 53px;
  top: 15px;
}

#workskin .userstuff figure:has(details.dtw[open])
.big_box {
  content: '❏';
  color: white;
  text-shadow: 0px 0px 4px rgb(100,100,100);
  font-family: sans-serif;
  z-index: 600;
  position: absolute;
  right: 53px;
  top: 15px;
}

#workskin .userstuff figure:has(details.dtw:not([open]))
.big_box {
  display: none;
}

#workskin .userstuff figure:has(details.dtw:not([open]))
.check {
  user-select: none;
}

#workskin .userstuff figure:has(details.dtw:not([open]))
.check::after {
  content: '❏';
  color: white;
  text-shadow: 0px 0px 4px rgb(100,100,100);
  font-family: sans-serif;
  z-index: 500;
  position: absolute;
  right: 53px;
  top: 15px;
}

#workskin .hide_box {
  display: none;
}

#workskin .userstuff figure:has(details.dtw:not([open]))
.hide_box {
  display: initial;
  color: white;
  text-shadow: 0px 0px 4px rgb(100,100,100);
  font-family: sans-serif;
  z-index: 500;
  position: absolute;
  right: 53px;
  top: 15px;
}

#workskin .userstuff figure:has(details.dtw:not([open]))
.expand {
  display: none;
}

The HTML

What You Can Customize

Names, alerts, and texts. Obviously! Wouldn't be much of a workskin if you could only use my demos.

If you don't like my diagnostic criteria/don't want the details summary, you can cut it out. It shouldn't be too hard...? If you need help, send me a comment. (That goes for everything else, too!)

What You Shouldn't Touch (unless you're forklift certified)

Almost everything. :/ The order of the divs and stuff does matter, and if you shuffle it around, there's a 95% chance something will break. Modify with caution.

Do not touch the wrapping figures, even if you are forklift certified. They make sure that Ao3 won't put random <p> tags everywhere, and some of the details summary logic requires them to be there.

Copy & Paste

Click me to open the full demo HTML!

(apologies about the formatting, I copy-pasted this from my test draft and ao3 loves to hit my formatting with tornadoes.)

    
<h3>Basic SecSys Things</h3><figure> 
<details open="open" class="outer">
  <summary class="x_button class_text"></summary> 

  <div class="inner">
    
    <div class="secsys"></div>

    <span class="class_text">
      <b class="class_text_big">SEC</b>_SYSTEM
    </span>
<details open="open" class="dtw">
    <summary class="class_text underscore">_</summary>
    <span class="annouc">
      <b>
        . . .<br />
<span class="hoverrr">GOVERNOR</span> 
        <span class="hoverrr">MODULE</span> 
        <span class="hoverrr red">DISABLED</span>
      </b>
    </span>

    <div class="corner one"></div>
    <div class="corner two"></div>
    
  </details> 
  
    <div class="hide_box">❏</div>
    
  <details class="check">
    <summary class="class_text big_box">   </summary>
      
    <div class="expand">
      searching... no technicians nearby
    </div>
    
    </details> 
    
  </div> 
  
</details></figure><figure>

<details open="open" class="outer"><summary class="x_button class_text"></summary>

  <div class="inner">
  
  <div class="secsys"></div>
  
  <span class="class_text">
    <b class="class_text_big">SEC</b>_SYSTEM
    .. <i>identity</i>
  </span><br />
<span class="annouc">
    <span class="annouc_sml">
      —
      <b>enter ID:</b>
    </span><br />
<b>
        <
        <span class="hoverrr red highlight">
           MURDERBOT
        </span>
         >
      </b>
  </span>
  
  <div class="corner one"></div>
  <div class="corner two"></div>
  
</div> 
  
</details>

</figure><figure>

<details open="open" class="outer"><summary class="x_button class_text"></summary>
  <div class="inner">
  
  <div class="secsys"></div>

    <span class="class_text">
      <b class="class_text_big">SEC</b>_SYSTEM
    </span><br />
<details open="open" class="dtw">
    <summary class="class_text underscore">_</summary>
    <span class="annouc">
      <b>
        . . .<br />
SCANNING FOR<br />
<span class="hoverrr red">THREATS . . .</span>
      </b>
    </span>

    <div class="corner one"></div>
    <div class="corner two"></div>
    
  </details>
  
  <div class="hide_box">❏</div>
    
  <details>
    <summary class="class_text big_box">❏</summary>
      
    <div class="expand">
      searching... 
    </div>
    
    </details> 
    
  </div> 
</details>

</figure><figure>

<details open="open" class="outer"><summary class="x_button class_text"></summary>
  <div class="inner">
  
  <div class="secsys"></div>

    <span class="class_text">
      <b class="class_text_big">SEC</b>_SYSTEM
    </span><br />
<details open="open" class="dtw">
    <summary class="class_text underscore">_</summary>
    <span class="annouc">
      <b>
        . . .<br />
THREAT<br />
ASSESSMENT:<br />
<span class="hoverrr red bigg">27%</span>
      </b>
    </span>
  
    <div class="pie_outline"></div>
    <div class="pie twenty_seven"></div>
    <span class="pie_label">
      low
    </span>

    <div class="corner one"></div>
    <div class="corner two"></div>
    
  </details>
  
  <div class="hide_box">❏</div>
    
  <details>
    <summary class="class_text big_box">❏</summary>
      
    <div class="expand">
      contributing factors: yeah i'm not writing that
    </div>
    
    </details> 
    
  </div> 
</details>

</figure><figure>

<details open="open" class="outer"><summary class="x_button class_text"></summary>
  <div class="inner">
  
  <div class="secsys"></div>

    <span class="class_text">
      <b class="class_text_big">SEC</b>_SYSTEM
    </span><br />
<details open="open" class="dtw">
    <summary class="class_text underscore">_</summary>
    <span class="annouc">
      <b>
        . . .<br />
RISK<br />
ASSESSMENT:<br />
<span class="hoverrr red bigg">43%</span>
      </b>
    </span>
  
    <div class="pie_outline"></div>
    <div class="pie forty_three"></div>
    <span class="pie_label">
      mid
    </span>

    <div class="corner one"></div>
    <div class="corner two"></div>
    
  </details>
  
  <div class="hide_box">❏</div>
    
  <details>
    <summary class="class_text big_box">❏</summary>
      
    <div class="expand">
      argggggggg
    </div>
    
    </details> 
    
  </div> 
</details>

</figure><figure>

<details open="open" class="outer"><summary class="x_button class_text"></summary>
  <div class="inner">
  
  <div class="secsys"></div>

    <span class="class_text">
      <b class="class_text_big">SEC</b>_SYSTEM
    </span><br />
<details open="open" class="dtw">
    <summary class="class_text underscore">_</summary>
    <span class="annouc">
      <b>
        . . .<br />
RISK<br />
ASSESSMENT:<br />
<span class="hoverrr red bigg">91%</span>
      </b>
    </span>
  
    <div class="pie_outline"></div>
    <div class="pie ninety_one"></div>
    <span class="pie_label">
      max
    </span>

    <div class="corner one"></div>
    <div class="corner two"></div>
    
  </details>
  
  <div class="hide_box">❏</div>
    
  <details>
    <summary class="class_text big_box">❏</summary>
      
    <div class="expand">
      sanctuary moon sanctuary moon sanctuary moon
    </div>
    
    </details> 
    
  </div> 
</details>

</figure><h3>Misc. Alerts (HubSys, SelfSys, & Diagnostics)</h3><figure>

<details open="open" class="outer"><summary class="x_button class_text"></summary>
  <div class="inner">
  
  <div class="hubsys"></div>

    <span class="class_text">
      <b class="class_text_big">HUB</b>_SYSTEM
    </span><br />
<details open="open" class="dtw">
    <summary class="class_text underscore">_</summary>
    <span class="annouc">
      <b>
        . . .<br />
<span class="hoverrr red">ABORT !</span>
        <span class="hoverrr red">ABORT !</span>
        <span class="hoverrr red">ABORT !</span>
      </b>
    </span>

    <div class="corner one"></div>
    <div class="corner two"></div>
    
  </details>
  
  <div class="hide_box">❏</div>
    
  <details>
    <summary class="class_text big_box">❏</summary>
      
    <div class="expand">
      sincerely, not-greycris
    </div>
    
    </details> 
    
  </div> 
</details>

</figure><figure>

<details open="open" class="outer"><summary class="x_button class_text"></summary>
  <div class="inner">
  
  <div class="selfsys"></div>

    <span class="class_text">
      <b class="class_text_big">SELF</b>_SYSTEM
    </span><br />
<details open="open" class="dtw">
    <summary class="class_text underscore">_</summary>
    <span class="annouc">
      <b>
        . . .<br />
RUNNING<br />
<span class="hoverrr red">DIAGNOSTIC . . .</span>
      </b>
    </span>

    <div class="corner one"></div>
    <div class="corner two"></div>
    
  </details>
  
  <div class="hide_box">❏</div>
    
  <details>
    <summary class="class_text big_box">❏</summary>
      
    <div class="expand">
      you better turn out operating at 105%
    </div>
    
    </details> 
    
  <br class="hide" />
  
  </div> 
</details> 

<details open="open" class="outer"><summary class="x_button class_text"></summary>
  <div class="inner">
  
  <div class="selfsys"></div>

    <span class="class_text">
      <b class="class_text_big">SELF</b>_SYSTEM
    </span><br />
<details open="open" class="dtw">
    <summary class="class_text underscore">_</summary>
    <span class="annouc">
      <b>
        . . .<br />
<span class="hoverrr">PROBLEMS DETECTED:</span>
      </b>
    </span>

    <div class="diag_probs">
      
      <details>
        <summary>PHYS_SYSTEMS: 
          <span class="problem">PROBLEM</span>
        </summary>
        <ul>
          <li>WEAPONS_SYS: <span class="status">OK</span></li>
          <li>DATAPORT_SYS: <span class="status">OK</span></li>
          <li>GOVERNOR MODULE: <span class="problem">!!</span>
          </li>
          <li>POWER CELL CHARGE: <span class="status">73%</span></li>
        </ul>
      </details>
      
      <details>
        <summary>DATA_SYSTEMS: 
          <span class="status">OK</span>
        </summary>
        <ul>
          <li>FEED CONNECTIVITY: <span class="status">OK</span></li>
          <li>FEED MONITORING: <span class="status">OK</span></li>
          <li>MEMORY USAGE: <span class="status">67%</span></li>
          <li>DATAPORT: <span class="status">DISABLED</span></li>
        </ul>
      </details>
      
      <details>
        <summary>GEN_SYSTEMS: 
          <span class="problem">PROBLEM</span>
        </summary>
        <ul>
          <li>PERFORMANCE RELIABILITY: <span class="status">89%</span></li>
          <li>RISK ASSESSMENT: <span class="problem">65%</span></li>
          <li>THREAT ASSESSMENT: <span class="problem">77%</span></li>
        </ul>
      </details>
      
    </div>
    
    <div class="corner one"></div>
    <div class="corner two"></div>
    
  </details>
  
 <div class="hide_box">❏</div>

  <details>
    <summary class="class_text big_box">❏</summary>
      
    <div class="expand">
      i'm a disappointment
    </div>
    
    </details> 
    
  </div> 
</details>

</figure><div class="shutdown">

<p>forced shutdown . . .</p></div><h3>The Feed (Requests & Chats)</h3><figure>

<div class="feed_req">
  
  Private connection request from:
  
  <div class="contact">
    <div class="contact_name">ART</div>
    <div class="contact_desc">
      "Urgent question."
    </div>
  </div>
  <b><i>Y</i></b> / N
  
  <br class="hide" /><br class="hide" />
  
</div>

<div class="feed_container">
  
  Feed connection established.
  
  <hr class="feed_divide" />

  <div class="feed receive">

    <div class="feed_header fhr">ART</div>

    Do you have the 4th season of <i>World Hoppers</i>?

  </div> 
  
  <br class="hide" />

  <div class="feed send">

    <div class="feed_header fhs">SecUnit</div>

    Fuck off. Yes.

  </div>
  
  <br class="hide" />

  <div class="feed receive">

    <div class="feed_header fhr">ART</div>

    No need to be so tetchy.

  </div> 
  
  <hr class="feed_divide" />
  
  Feed connection lost.
  
</div>

</figure><figure>

<div class="feed_req">
  
  Private connection request from:
  
  <div class="contact">
    <div class="contact_name">ART</div>
    <div class="contact_desc">
      "What is up with you?"
    </div>
  </div>
  
  Y / <b><i>N</i></b>
  
  <br class="hide" /><br class="hide" />
  
</div>

<div class="feed_req">
  
  Private connection request from:
  
  <div class="contact">
    <div class="contact_name">ART</div>
    <div class="contact_desc">
      "You've been acting weird ever since we helped the 1/2"
    </div>
  </div>
  
  Y / <b><i>N</i></b>
  
  <br class="hide" /><br class="hide" />
  
</div>

<div class="feed_req">
  
  Private connection request from:
  
  <div class="contact">
    <div class="contact_name">ART</div>
    <div class="contact_desc">
      "Adamantine colonists. Should I call Dr. Bharadwaj? 2/2"
    </div>
  </div>
  
  Y / <b><i>N</i></b>
  
  <br class="hide" /><br class="hide" />
  
</div>

</figure>

How to Make Alt Text

This is what .hide is for! Wrap all of your alt text in a div, then give it class="hide". .hide will not show anything when the creator's style is on, but will show when it's off. Thanks to my x_button fuckery, readers can hide the readable-but-strange-looking pop ups and read your alt text, if you're fancy like that.

Example:

  
    <div class="hide">I’m not visible!</div>

Thank you!

Thanks for reading! If you end up using this workskin, please consider letting me know via comment here or tagging me on Tumblr (@gleomu). It brings me so much joy to know that people like my work enough to put it in theirs!!! Have a wonderful day/night!

Actions

Kudos

Comments

Sorry, this work doesn't allow non-Archive users to comment. You can however still leave Kudos!

Archive of Our Own^beta

Actions

Work Header

murderbot diaries workskin tutorial

thetanimal (gleomu)

Summary:

Notes:

Work Text:

Demonstration !!

Basic SecSys Things

Misc. Alerts (HubSys, SelfSys, & Diagnostics)

The Feed (Requests & Chats)

The CSS

What You Can Customize

What You Should Not Touch (unless you're forklift certified)

Copy & Paste

The HTML

What You Can Customize

What You Shouldn't Touch (unless you're forklift certified)

Copy & Paste

How to Make Alt Text

Thank you!

Actions

Kudos

Comments

Footer

About the Archive

Contact Us

Development

设置面板

字体大小

显示选项

阅读历史

用户账号

加入社区