• Rsw

    Using "CS, OS, WP" on runescape wiki

    Currently, I am working on The Rooster Teeth Wiki project and the wiki happens to have a semi-unique situation where many articles have better examples on other wikis. For example: Gavin Free has an article on Wikipedia, Rooster Teeth Wiki, Internetbox Wiki, AchievementHunter Wiki, and possibly more in the future. I'd like a way to provide buttons that link to these wikis.

    Does anyone know how to code something like Runescape Wiki's system (see image) with their button system above 'Share'? I tried 'borrowing' their system but I cannot figure out how the Lua, JS, and CSS all are used together for theirs.

      Loading editor
    • In addition: I also cannot figure out who is responsible for Runescape Wiki's version.

        Loading editor
    • With the RuneScape Wiki's version of those icons, Lua, CSS, and a template are involved.

      .rs-header-icon {
          -webkit-transition: 0.2s;
          -moz-transition: 0.2s;
          transition: 0.2s;
          display: inline-block;
          font-family: 'League Spartan', sans-serif;
          font-size: 10px;
          font-weight: bold;
          text-align: center;
          margin-left: 1px;
          height: 25px;
          width: 25px;
          line-height: 30px;
      .rs-header-icon a:hover {
          text-decoration: none;
      .rs-header-icon-rsc {
          background: #929ca0;
          color: #ffffff;
      .rs-header-icon-rsc:hover {
          background: #a0a8ac;
      .rs-header-icon-os {
          background: #5c4200;
          color: #ffffff;
      .rs-header-icon-os:hover {
          background: #765400;
      .rs-header-icon-wp {
          background: #444444;
          color: #ffffff;
      .rs-header-icon-wp:hover {
          background: #515151;

      You may copy them over to your own wiki and tweak them as needed (provided you attribute the source properly); if you need additional help with customization, let us know.

        Loading editor
    • So far, I'm still having some troubles. I have tried it here ( and cleared cache and purged page and I'm still not seeing it. Do you think they have any JS?

        Loading editor
    • Sssssss
      Interesting, it looks like it is appearing code-wise correctly on the page. However, I think it's hiding behind the share button...
        Loading editor
    • Apologies, it appears I missed some other pieces that are required as well.

      The icons also use code from MediaWiki:Common.js and the styles included in MediaWiki:Custom-Common.less/external.less.

        Loading editor
    • Note: I have everything in this project transferred to internet box wiki because imdill3 wiki lacks custom js.

      I will check back here in a day or two on how it goes, once the js is approved. Sadly, with all of your help I'm still not seeing the results in 'test mode' with js. I decided to test things out in the mainspace here to give it the best chance. Thank you for your help so far!!!

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message