Intententando remakear las antiguas skin

[Juan Kio]

Hola, como bien dice el título voy a estar intentando remakear las antiguas skins del foro, he estado testeando con una antigua skin de stylish que había publicado Naren hace tiempo y así va quedando :

Spoiler: Imagén

También les dejo el css:

Spoiler: CSS

/* Whack a Kyogre! v 0.1*/

:root {
    --black-0: #123295;
    --black-1: #001a66;
    --black-2: #fff;;
    --black-3: #0e266f;
    --black-4: #273b79;
    --black-5: #002db3;
    --primary-color: #474e63;
    --primary-color-darken: #06184f;
}

.hide--phone {
  background: transparent url(https://i.imgur.com/MinJlnz.png) no-repeat scroll 40px;
      width: 300px;
        height: 180px;
        bottom: 0px;
        left: 0px;
        box-shadow: none;
     padding-left: 1000px;
    }

.header__logo img {
    display: block;
    height: 200px;
    margin-top: 260px;
}
.header__main {
    background: #00134d;
    height: 80px;
}

.p-breadcrumbs > li a {
    color: #00134d;
    white-space: nowrap;
    word-wrap: normal;
}


node--unread .node-icon i::before {
    color: var(--primary-color);
    }

.node--forum .node-icon i::before, .node--category .node-icon i::before {
    content: "";
}

.node--unread .node-icon i::before {
    opacity: 1;
    color: #0000;
}


.node-icon i::before {
    color: #fff0;
}



.p-pageWrapper{

background:url('https://i.imgur.com/MqHtSFk.jpg')no-repeat top center fixed;
    }

.header__small {
    background: #001a66;
    height: 50px;
}

.p-body-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 30px;
    padding-top: 150px;
    padding-bottom: 20px;
}

.node-description {
    color: #000;
}

.pageNav-page > a {
    display: initial;
    padding: 6px 8px;
    text-decoration: none;
        text-decoration-line: none;
        text-decoration-style: solid;
        text-decoration-color: currentcolor;
    color: black;
}

.pageNav-page.pageNav-page--current {
    background: #fff;
}
   
.p-breadcrumbs > li a {
    color: #fff;
    white-space: nowrap;
    word-wrap: normal;
}

.label.label--primary {
    color: white;
    background: #001a66;
    border-color: #001a66;
}

.node-icon{
   
background: url('http://web-old.archive.org/web/20181026230745im_/https://whackahack.com/foro/estilo/forum_old.png')no-repeat;
    left: 15px;
        position: relative;
    top: 10px;
}


.p-body-content {
   
      width: 1134px;
    height: 728px;
    text-align: start;
    margin: 0 auto;
}

.footer__copyright{
        color: #12194d;
    text-align: center;
    font-size: 15px;
}

.pageNav-jump {
    display: inline-block;
    background: var(--black-2);
    color: #00134d;
    border-color: #00134d;
}

.block--messages{
    color: #000;
    }

.reactionsBar{
    color:#768bca;
    }

.block--messages .message, .block--messages .block-row {
    color: #9ca2aa;
}
.reactionsBar {
    background: #768bca;
    border: 1px solid var(--black-2);
}

.block-container {
    color: #6ebfeb;
}

Para instalarlo solo instalen stylus en su navegador y peguen ese código .
Aun esta muy verde, falta mucho que mejorar asi que probablemente tenga muchos errores, en fin espero pronto traer actualizaciones.
Creditos: Naren
Esperemos que algun día vuelva el tablon.

 

[Juan Kio]

Actualizo con las tres aves legendarias.

Whack a Hack Fire-Moltres

Spoiler: Imagén

Spoiler: CSS

/* Whack a Hack! v0.1 Fire */

:root {
    --black-0: #B9350D;
    --black-1: #F4511E;
    --black-2: #fff;;
    --black-3: #F4511E;
    --black-4: #F4511E;
    --black-5: #F4511E;
    --primary-color: #B9350D;;
    --primary-color-darken: #B9350D;
}

 .hide--phone {
  background: transparent url(https://i.imgur.com/wzDfy4l.png) no-repeat scroll 40px;
      width: 300px;
        height: 180px;
        bottom: 0px;
        left: 0px;
        box-shadow: none;
     padding-left: 1000px;
    }

.header__logo img {
    display: block;
    height: 200px;
    margin-top: 210px;
}
.header__main {
    background: #F4511E;
    height: 80px;
}

.p-breadcrumbs > li a {
    color: #00134d;
    white-space: nowrap;
    word-wrap: normal;
}


node--unread .node-icon i::before {
    color: var(--primary-color);
    }

.node--forum .node-icon i::before, .node--category .node-icon i::before {
    content: "";
}

.node--unread .node-icon i::before {
    opacity: 1;
    color: #0000;
}


.node-icon i::before {
    color: #fff0;
}



.p-pageWrapper{

background:url('https://i.imgur.com/QxBOwPc.png')no-repeat top center fixed;
    }

.header__small {
    background: #B9350D;
    height: 50px;
}

.p-body-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 30px;
    padding-top: 150px;
    padding-bottom: 20px;
}

.node-description {
    color: #000;
}

.pageNav-page > a {
    display: initial;
    padding: 6px 8px;
    text-decoration: none;
        text-decoration-line: none;
        text-decoration-style: solid;
        text-decoration-color: currentcolor;
    color: black;
}

.pageNav-page.pageNav-page--current {
    background: #fff;
}
    
.p-breadcrumbs > li a {
    color: #fff;
    white-space: nowrap;
    word-wrap: normal;
}

.label.label--primary {
    color: white;
    background: #F4511E;
    border-color: #B9350D;
}

.a.label.label--primary:hover, a:hover .label.label--primary{
    background: #B9350D !important;
    border-color: #B9350D;
}

.node-icon{
    
background: url('http://web-old.archive.org/web/20181026230745im_/https://whackahack.com/foro/estilo/forum_old.png')no-repeat;
    left: 15px;
        position: relative;
    top: 10px;
}


.p-body-content {
    
      width: 1134px;
    height: 728px;
    text-align: start;
    margin: 0 auto;
}

.footer__copyright{
        color: #F4511E;
    text-align: center;
    font-size: 15px;
}

.pageNav-jump {
    display: inline-block;
    background: var(--black-2);
    color: #B9350D;
    border-color: #B9350D;
}

.block--messages{
    color: #000;
    }

.reactionsBar{
    color:#F4511E;
    }

.block--messages .message, .block--messages .block-row {
    color: #000;;
 }
.reactionsBar {
    background: #ff8e6b;
    border: 1px solid var(--black-2);
}

.block-container {
    color: #fff;
}


.pageNav-page.pageNav-page--current {
    background: #fff;
    color: #F4511E;
    border: 1px solid #B9350D;
    cursor: pointer;
    }

.pageNav-page.pageNav-page--current:hover, .pageNav-page.pageNav-page--current:active{
background: #F4511E;
 }

.comment-actionBar .actionBar-set {
    color: #fff;
}


.bbCodeBlock-title {
    padding: 6px 10px;
    font-size: 15px;
    color: #B9350D;
    background: #fff;
}

.bbCodeBlock {
    margin: .75em 0;
    background: var(--black-3);
    border: 1px solid var(--black-4);
    border-left: 3px solid #F4511E;
}

.pairs > dt {
    padding: 0;
    margin: 0;
    color: #000;
}

.block-tabHeader {
    color: white;
    background: #B9350D;
    border-bottom: 1px solid #d9d9d9;
}

.p-description {
    margin: 5px 0 0;
    padding: 0;
    font-size: 15px;
    color: #000;
}

.header__sections a.active::after {
    border-bottom: 10px solid #B9350D;
}

.message-responseRow {
    margin-top: -1px;
    background: #FF9574;
    border: 1px solid #FFF;
    padding: 6px;
}

.tooltip--bookmark .tooltip-content, .tooltip--member .tooltip-content, .tooltip--share .tooltip-content {
    color: black;
}

.u-concealed, .u-concealed a, .u-cloaked, .u-cloaked a, .u-concealed--icon, .u-concealed--icon a {
    text-decoration: inherit !important;
    color: #B9350D;
}

.pairs.pairs--rows.pairs--rows--centered > dt, .pairs.pairs--rows.pairs--rows--centered > dd{
    text-decoration: inherit !important;
    color: #B9350D;
}

.memberTooltip-name a {
    color: #B9350D;
    text-decoration: none;
}

.menu-tabHeader .tabs-tab.is-active {
    color: rgba(0, 0, 0, .75);
    border-color: rgba(0, 0, 0, .75);
}

.menu-tabHeader .tabs-tab {
    padding: 6px 15px 3px;
    border-bottom: 3px solid rgb(0, 0, 0);
}

.menu-row.menu-row--alt {
    color: #000;
}

.menu-tabHeader {
    color: #2f0000;
}

Whack a Hack Ice-Articuno

Spoiler: Imagén

Spoiler: CSS

/* Whack a Hack! v0.1 Ice */

:root {
    --black-0: #3079b1;
    --black-1: #3079b1;
    --black-2: #fff;;
    --black-3: #3079b1;
    --black-4: #3079b1;
    --black-5: #3079b1;
    --primary-color: #1d4a6c;;
    --primary-color-darken: #06184f;
}

 .hide--phone {
  background: transparent url(https://i.imgur.com/K3a3AQO.png) no-repeat scroll 40px;
      width: 300px;
        height: 180px;
        bottom: 0px;
        left: 0px;
        box-shadow: none;
     padding-left: 1000px;
    }

.header__logo img {
    display: block;
    height: 200px;
    margin-top: 180px;
}
.header__main {
    background: #3587c5;
    height: 80px;
}

.p-breadcrumbs > li a {
    color: #00134d;
    white-space: nowrap;
    word-wrap: normal;
}


node--unread .node-icon i::before {
    color: var(--primary-color);
    }

.node--forum .node-icon i::before, .node--category .node-icon i::before {
    content: "";
}

.node--unread .node-icon i::before {
    opacity: 1;
    color: #0000;
}


.node-icon i::before {
    color: #fff0;
}



.p-pageWrapper{

background:url('https://i.imgur.com/A258zFG.png')no-repeat top center fixed;
    }

.header__small {
    background: #3079b1;
    height: 50px;
}

.p-body-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 30px;
    padding-top: 150px;
    padding-bottom: 20px;
}

.node-description {
    color: #000;
}

.pageNav-page > a {
    display: initial;
    padding: 6px 8px;
    text-decoration: none;
        text-decoration-line: none;
        text-decoration-style: solid;
        text-decoration-color: currentcolor;
    color: black;
}

.pageNav-page.pageNav-page--current {
    background: #fff;
}
    
.p-breadcrumbs > li a {
    color: #fff;
    white-space: nowrap;
    word-wrap: normal;
}

.label.label--primary {
    color: white;
    background: #3079b1;
    border-color: #3079b1;
}

.a.label.label--primary:hover, a:hover .label.label--primary{
    background: #27567a !important;
    border-color: #27567a;
}

.node-icon{
    
background: url('http://web-old.archive.org/web/20181026230745im_/https://whackahack.com/foro/estilo/forum_old.png')no-repeat;
    left: 15px;
        position: relative;
    top: 10px;
}


.p-body-content {
    
      width: 1134px;
    height: 728px;
    text-align: start;
    margin: 0 auto;
}

.footer__copyright{
        color: #3079b1;
    text-align: center;
    font-size: 15px;
}

.pageNav-jump {
    display: inline-block;
    background: var(--black-2);
    color: #00134d;
    border-color: #00134d;
}

.block--messages{
    color: #000;
    }

.reactionsBar{
    color:#227EC3;
    }

.block--messages .message, .block--messages .block-row {
    color: #08131a;;
 }
.reactionsBar {
    background: #AED4F0;
    border: 1px solid var(--black-2);
}

.block-container {
    color: #fff;
}


.pageNav-page.pageNav-page--current {
    background: #fff;
    color: #227EC3;
    border: 1px solid #1f5e8d;
    cursor: pointer;
    }

.pageNav-page.pageNav-page--current:hover, .pageNav-page.pageNav-page--current:active{
background: #227EC3;
 }

.comment-actionBar .actionBar-set {
    color: #fff;
}


.bbCodeBlock-title {
    padding: 6px 10px;
    font-size: 15px;
    color: #3079b1;
    background: #fff;
}

.bbCodeBlock {
    margin: .75em 0;
    background: var(--black-3);
    border: 1px solid var(--black-4);
    border-left: 3px solid #3079b1;
}

.pairs > dt {
    padding: 0;
    margin: 0;
    color: #1d4a6c;
}

.block-tabHeader {
    color: white;
    background: #3079b1;
    border-bottom: 1px solid #d9d9d9;
}

.p-description {
    margin: 5px 0 0;
    padding: 0;
    font-size: 15px;
    color: #000;
}

.menu-tabHeader .tabs-tab.is-active {
    color: rgba(0, 0, 0, .75);
    border-color: rgba(0, 0, 0, .75);
}

.menu-tabHeader .tabs-tab {
    padding: 6px 15px 3px;
    border-bottom: 3px solid rgb(0, 0, 0);
}

.menu-row.menu-row--alt {
    color: #000;
}

.menu-tabHeader {
    color: #2f0000;
}

Whack a Hack Thunder-Zapdos

Spoiler: Imagén

Spoiler: CSS

/* Whack a Hack! v0.1 thunder */

:root {
    --black-0: #BEAB1E;
    --black-1: #D6BF21;
    --black-2: #fff;;
    --black-3: #D6BF21;
    --black-4: #D6BF21;
    --black-5: #D6BF21;
    --primary-color: #BEAB1E;;
    --primary-color-darken: #BEAB1E;
}

 .hide--phone {
  background: transparent url(https://i.imgur.com/uiYmx5q.png) no-repeat scroll 40px;
      width: 300px;
        height: 180px;
        bottom: 0px;
        left: 0px;
        box-shadow: none;
     padding-left: 1000px;
    }

.header__logo img {
    display: block;
    height: 200px;
    margin-top: 210px;
}
.header__main {
    background: #D6BF21;
    height: 80px;
}

.p-breadcrumbs > li a {
    color: #000;
    white-space: nowrap;
    word-wrap: normal;
}


node--unread .node-icon i::before {
    color: var(--primary-color);
    }

.node--forum .node-icon i::before, .node--category .node-icon i::before {
    content: "";
}

.node--unread .node-icon i::before {
    opacity: 1;
    color: #0000;
}


.node-icon i::before {
    color: #fff0;
}



.p-pageWrapper{

background:url('https://i.imgur.com/ReiYvhf.png')no-repeat top center fixed;
    }

.header__small {
    background: #BEAB1E;
    height: 50px;
}

.p-body-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 30px;
    padding-top: 150px;
    padding-bottom: 20px;
}

.node-description {
    color: #000;
}

.pageNav-page > a {
    display: initial;
    padding: 6px 8px;
    text-decoration: none;
        text-decoration-line: none;
        text-decoration-style: solid;
        text-decoration-color: currentcolor;
    color: black;
}

.pageNav-page.pageNav-page--current {
    background: #fff;
}
    
.p-breadcrumbs > li a {
    color: #fff;
    white-space: nowrap;
    word-wrap: normal;
}

.label.label--primary {
    color: white;
    background: #D6BF21;
    border-color: #BEAB1E;
}

.a.label.label--primary:hover, a:hover .label.label--primary{
    background: #BEAB1E !important;
    border-color: #BEAB1E;
}

.node-icon{
    
background: url('http://web-old.archive.org/web/20181026230745im_/https://whackahack.com/foro/estilo/forum_old.png')no-repeat;
    left: 15px;
        position: relative;
    top: 10px;
}


.p-body-content {
    
      width: 1134px;
    height: 728px;
    text-align: start;
    margin: 0 auto;
}

.footer__copyright{
        color: #D6BF21;
    text-align: center;
    font-size: 15px;
}

.pageNav-jump {
    display: inline-block;
    background: var(--black-2);
    color: #BEAB1E;
    border-color: #BEAB1E;
}

.block--messages{
    color: #000;
    }

.reactionsBar{
    color:#D6BF21;
    }

.block--messages .message, .block--messages .block-row {
    color: #000;;
 }
.reactionsBar {
    background: #fff39e;
    border: 1px solid var(--black-2);
}

.block-container {
    color: #fff;
}


.pageNav-page.pageNav-page--current {
    background: #fff;
    color: #BEAB1E;
    border: 1px solid #BEAB1E;
    cursor: pointer;
    }

.pageNav-page.pageNav-page--current:hover, .pageNav-page.pageNav-page--current:active{
background: #D6BF21;
 }

.comment-actionBar .actionBar-set {
    color: #fff;
}


.bbCodeBlock-title {
    padding: 6px 10px;
    font-size: 15px;
    color: #BEAB1E;
    background: #fff;
}

.bbCodeBlock {
    margin: .75em 0;
    background: var(--black-3);
    border: 1px solid var(--black-4);
    border-left: 3px solid #D6BF21;
}

.pairs > dt {
    padding: 0;
    margin: 0;
    color: #000;
}

.block-tabHeader {
    color: white;
    background: #BEAB1E;
    border-bottom: 1px solid #d9d9d9;
}

.p-description {
    margin: 5px 0 0;
    padding: 0;
    font-size: 15px;
    color: #000;
}

.header__sections a.active::after {
    border-bottom: 10px solid #BEAB1E;
}

.message-responseRow {
    margin-top: -1px;
    background: #fff39e;
    border: 1px solid #FFF;
    padding: 6px;
}

.tooltip--bookmark .tooltip-content, .tooltip--member .tooltip-content, .tooltip--share .tooltip-content {
    color: black;
}

.u-concealed, .u-concealed a, .u-cloaked, .u-cloaked a, .u-concealed--icon, .u-concealed--icon a {
    text-decoration: inherit !important;
    color: #9b8a0e;
}

.pairs.pairs--rows.pairs--rows--centered > dt, .pairs.pairs--rows.pairs--rows--centered > dd{
    text-decoration: inherit !important;
    color: #9b8a0e;
}

.memberTooltip-name a {
    color: #9b8a0e;
    text-decoration: none;
}

.menu-tabHeader .tabs-tab.is-active {
    color: rgba(0, 0, 0, .75);
    border-color: rgba(0, 0, 0, .75);
}

.menu-tabHeader .tabs-tab {
    padding: 6px 15px 3px;
    border-bottom: 3px solid rgb(0, 0, 0);
}

.menu-row.menu-row--alt {
    color: #000;
}

.menu-tabHeader {
    color: #2f0000;
}

Eso es todo, espero traer actualizaciones pronto.

Creditos:
KleinStudio
Ryuko
Serg!o
Sageone

Y un especial agradecimiento a PkPower que me paso el fondo de la skin thunder.

 

[Miembro eliminado 45640]

Uf, que nostalgia me dio esta cosa