info:style

The Credit Module was created by C-takeC-take, physicslikephysicslike, sinazugawasinazugawa and 7happy77happy7 for the Japanese wiki, adapted by Dr_GromDr_Grom for the German wiki, and adapted by CroquemboucheCroquembouche and RimpleRimple for the English wiki (as the Info module).

The Info module is an alternative to the rating module that allows you to add arbitrary out-of-universe text to your page. It appears in a modal that only appears when the reader clicks a little info button next to the rating module.

Typically this is used to include information such as the SCP title, commentary, licensing information and crit attribution that would normally be out of place in a fictional article.

Usage

At the top of your page, insert the following code instead of the Rating Module and the [[>]] things. Remove any lines that aren't needed, and between each [[include …]], feel free to add your own.

[[include :scp-wiki:info:start]]
**SCP-XXXX:** TITLE
**NAME OF TALE/GOI-FORMAT**
**Author:** [[*user AUTHOR]]
**Original:** LINK TO ORIGINAL
**Translator:** [[*user TRANSLATOR]]
**Image:** Put any licensing information for images here
Add anything else you'd like the reader to know
[[include :scp-wiki:info:end]]

If your article does not have a rating module, then use the following [[include]]'s instead of the ones above.

[[include :scp-wiki:info:start-standalone]]
[[include :scp-wiki:info:end-standalone]]

Warning: When previewing the page using the "Preview" button, the credits module will not be displayed correctly until the page has been Saved. This is normal.

Note: Multipage ListPages modules are not supported. Use perPage="250" to maximise the number of articles you can list per page.

+ Show pages associated with this module

Info module CSS styling (Original)

.creditRate {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    float:right;
    padding: 0; margin: 0;
    margin-bottom:10px;
    margin-right:2em;
}
 
:where(.creditRate) div.page-rate-widget-box {
    margin:0;
}
 
.rate-box-with-credit-button {
    background-color: #633;
    border: solid 1px #633;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
.rate-box-with-credit-button .cancel {
    border-right: 0;
}
.rate-box-with-credit-button .page-rate-widget-box {
    box-shadow: none;
}
.rate-box-with-credit-button .creditButton {
    display: inline-block;
}
.creditRate > li {
    display: inline-block;
    list-style: none;
    line-height: initial;
    text-align: initial;
}
.creditRate > li > br { display: none; }
.creditButton p {
    font-size: 0.8em;
    margin:0;
}
.creditButton p a {
    display: inline-block;
    font-family: FontAwesome;
    width: 1.425em;
    line-height: 1;
    margin-left: -5px;
    color: #ffffff;
    border-left: solid 1px #966;
    text-align: center;
    text-decoration: none;
    font-size: 1.15em;
}
.creditButton p a:hover {
    color: #3498db;
}
 
.creditButtonStandalone p {
    margin: 0;
}
.creditButtonStandalone p a {
    font-family: FontAwesome;
    display: block;
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    background: #744;
    box-shadow: 0 0 3px gray;
    font-size: 0.95em;
}
.creditButtonStandalone p a:hover {
    background: #3498db;
}
 
#u-credit-view {
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: flex;
    z-index: 10;
}
:not(.unfolded) > #u-credit-view {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
#u-credit-view {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.105s linear, visibility 0.105s;
}
 
/* Add a lil X to close the box */
.close-credits {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    width: 1em;
}
 
.fader {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.fader a {
    font-size: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}
 
.modalcontainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 37.5rem;
    max-width: 95vw;
    height: 350px;
    margin: auto;
}
.modalbox {
    background-color: #fefefe;
    background:linear-gradient(#eee 51px,#fefefe 51px,#fefefe);
    border: #333 solid 1px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(102, 0, 0, .5);
    padding: 4px;
    max-height: 50vh;
}
 
.modalbox .credit {
    margin: 0 2em;
    height: 30vh;
    overflow-y: auto;
}
 
.creditBottomRate {
    position: relative;
    height: 1.875rem;
    text-align: center;
}

Info module "start" iframe (Original)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="content-language" content="ja,jp-ja"/>
    <meta charset="UTF-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      /*!
       * jQuery JavaScript Library v3.2.1
       * https://jquery.com/
       *
       * Includes Sizzle.js
       * https://sizzlejs.com/
       *
       * Copyright JS Foundation and other contributors
       * Released under the MIT license
       * https://jquery.org/license
       *
       * Date: 2017-03-20T18:59Z
       */
      //---------------------------
      //ProjectName: Credit Module
      //FunctionName: Back Module
      //CreatedBy C-take , sinazugawa
      //License MIT
      //---------------------------
      $(function() {
          var ua = navigator.userAgent.toLowerCase();
          var bReload= true;
          if ( ( ua.indexOf("applewebkit") >= 0 ||  ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 )
              bReload= false;
 
          $('.fader').on("click",closeCredit);
          function closeCredit() {
              if ( bReload ) {
                  history.go(-1);
                  parent.location.href = document.referrer.split('#')[0];
              } else {
                  history.go(-1);
              }
 
              $('.fader').off("click");
           setTimeout(function(){
               $('.fader').on("click",closeCredit);
           },1200);
          }
      });
    </script>
    <style>
      .fader {
        width: 100%;
        height: 100%;
        position: fixed;
      }
    </style>
  </head>
  <body>
    <div class='fader'></div>
  </body>
</html>

Info module "end" iframe (Original)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="content-language" content="ja,jp-ja"/>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="https://cdn.scpwiki.com/theme/en/sigma/css/sigma.min.css">
    <style>
      body{
        background:transparent;
        padding:0;
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      /*!
       * jQuery JavaScript Library v3.2.1
       * https://jquery.com/
       *
       * Includes Sizzle.js
       * https://sizzlejs.com/
       *
       * Copyright JS Foundation and other contributors
       * Released under the MIT license
       * https://jquery.org/license
       *
       * Date: 2017-03-20T18:59Z
       */
      //---------------------------
      //ProjectName: Credit Module
      //FunctionName: Back Module
      //CreatedBy C-take , sinazugawa
      //License MIT
      //---------------------------
      $(function() {
          var ua = navigator.userAgent.toLowerCase();
          var bReload= true;
          if ( ( ua.indexOf("applewebkit") >= 0 ||  ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 )
              bReload= false;
 
          $('.back').click(closeCredit);
          function closeCredit() {
              if ( bReload ) {
                  history.go(-1);
                  parent.location.href = document.referrer.split('#')[0];
              } else {
                  history.go(-1);
              }
              return false;
          }
      });
    </script>
  </head>
  <body>
    <div style="width: 100%; text-align: center;">
      <a class="back" style="cursor: pointer;">Back</span>
    </div>
  </body>
</html>

Info module "otherwise" iframe (Original)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="content-language" content="ja,jp-ja"/>
    <meta charset="UTF-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      /*!
       * jQuery JavaScript Library v3.2.1
       * https://jquery.com/
       *
       * Includes Sizzle.js
       * https://sizzlejs.com/
       *
       * Copyright JS Foundation and other contributors
       * Released under the MIT license
       * https://jquery.org/license
       *
       * Date: 2017-03-20T18:59Z
       */
      //---------------------------
      //ProjectName: Credit Module
      //FunctionName: Back Module
      //CreatedBy C-take ,  sinazugawa
      //License MIT
      //---------------------------
      $(function() {
          var ua = navigator.userAgent.toLowerCase();
          var bReload= true;
          if ( ( ua.indexOf("applewebkit") >= 0 ||  ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 )
              bReload= false;
 
          $('.fader').click(closeCredit);
          function closeCredit() {
              if ( bReload ) {
                  history.go(-2);
                  parent.location.href = document.referrer.split('#')[0];
              } else {
                  history.go(-2);
              }
          }
      });
    </script>
    <style>
      .fader {
        width: 100%;
        height: 100%;
        position: fixed;
      }
    </style>
  </head>
  <body>
    <div class='fader'></div>
  </body>
</html>

Info module 'X' close iframe button

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" style="padding:0;margin:0;">
    <head>
        <meta http-equiv="Content-Script-Type" content="text/javascript"/>
        <meta http-equiv="Content-Style-Type" content="text/css"/>
        <meta http-equiv="content-language" content="ja,jp-ja"/>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="/component:theme/code/1">
        <style>
          body{
            background:transparent;
            padding:0;
          }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
          $(function() {
            var ua = navigator.userAgent.toLowerCase();
            var bReload= true;
            if ( ( ua.indexOf("applewebkit") >= 0 ||  ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 )
              bReload= false;
            $('.back').click(closeCredit);
            function closeCredit() {
              if ( bReload ) {
                history.go(-1);
                parent.location.href = document.referrer.split('#')[0];
              } else {
                history.go(-1);
              }
              return false;
            }
          });
        </script>
    </head>
    <body style="padding:0;margin:0;">
        <div style="width: 100%; text-align: center;">
        <a class="back" style="cursor: pointer;">X</span>
        </div>
    </body>
</html>
component
page revision: 13, last edited: 17 Jul 2023 13:52
Edit Rate (+2) Tags Discuss (0) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License