JosFault Seguir
Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
- Desde
- 15 Dic 2014
- Mensajes
- 928
Pues estaba aburrido y ya que uso el tema oscuro de Youtube, Twitter, Tapatalk, una extensión en Facebook, etc., etc.
Me puse a hacer este con una extensión de Chrome.
Básicamente es sólo una sustitución de colores de fondo y de texto, está lejos de ser perfecto y no durará mucho si hacen un cambio en el diseño del foro, pero me gusta como luce y es el que estaré usando yo a lo permanente.
Ajunto unas cuantas screenshots del foro:
También le puse los avatares cuadrados en vista que a algunos no les gusta, aunque a mi sinceramente me da igual xd
Yo usé esta extensión de chrome para ayudarme con esto y esa es la que pienso dejar para el tema y con la que explicaré cómo ponerlo:
Hay mejores, hay peores... Conforme vaya haciendo cambios y haya interes la subiré a https://userstyles.org si está permitido.
Para activar el modo dark sólo descarga la extensión del link anterior, recarga o abre de nuevo el foro, presiona su ícono en la barra de chrome y sigue los pasos de los screenshots:
En el url pon forobeta.com y en el cuadro de texto pega el CSS (lo minifiqué para efectos del tutorial):
Luego guarda, recarga Forobeta y listo
Recalco tres puntos:
1. No es perfecto, no es la intención y está lejos de serlo.
2. Durará tanto como el diseño actual de ForoBeta, y lo actualizaré conforme yo vaya necesitando hacer cambios o el foro los haga.
3. Cualquier duda ponla en una respuesta o al MP.
Saludos! Las opiniones son bienvenidas. No sabía donde postearlo y lo puse en Fuera de Tema xD
---------------------
Actualización:
El usuario @RoyC contribuyó con algunas modicaciones al mod original, el código es este:
Los screenshots de esta versión los pueden ver en su comentario original:
Más tarde pasaré la versión de Alexk conforme tenga tiempo o si alguien la pasa antes pues mejor
Las siguientes submisiones las subiré a pastebin por el límite de 10000 caracteres para los temas que tiene el foro.
Me puse a hacer este con una extensión de Chrome.
Básicamente es sólo una sustitución de colores de fondo y de texto, está lejos de ser perfecto y no durará mucho si hacen un cambio en el diseño del foro, pero me gusta como luce y es el que estaré usando yo a lo permanente.
Ajunto unas cuantas screenshots del foro:
También le puse los avatares cuadrados en vista que a algunos no les gusta, aunque a mi sinceramente me da igual xd
Yo usé esta extensión de chrome para ayudarme con esto y esa es la que pienso dejar para el tema y con la que explicaré cómo ponerlo:
Para activar el modo dark sólo descarga la extensión del link anterior, recarga o abre de nuevo el foro, presiona su ícono en la barra de chrome y sigue los pasos de los screenshots:
En el url pon forobeta.com y en el cuadro de texto pega el CSS (lo minifiqué para efectos del tutorial):
CSS:
.p-header{background:#af8560}.p-sectionLinks{background:#363333;color:#fff;border-bottom:none}.p-sectionLinks a{text-decoration:none;color:#fff}.p-sectionLinks a:hover{color:#fff}.p-navEl-link{color:#fff}.p-nav .is-selected{background:#363333}.p-navEl-link:hover{color:#fff}.p-navEl-link:hover:before{color:#fff}.p-nav-list .p-navEl{background:#272121}.p-nav{background:#272121}.p-pageWrapper{background:#272121}.block-container{background:#363333;border:none}.block-minorHeader{border:none;color:#fff}.block-body a:hover{color:#eee}.block-header{border:none}.node i{color:#a8a8a8}.fr-box i{color:#a8a8a8}.notice--primary{background:#363333;border:none}.menu-content{background:#393e46;color:#fff}.menu-row.menu-row--alt{background:#393e46;color:#fff}ul.listPlain li .menu-linkRow:hover{background:#fd7014;border:none}ul.listPlain li{color:#fff}ul.listPlain li a{color:#fff}.menu-linkRow:hover{background:#fd7014;border:none}.menu-linkRow{color:#fff}.menu-footer{background:#29435c;border:none}.menu-footer textarea .input{color:#000;font-style:bold}.menu-row--clickable:hover{background:#393e46}.menu-scroller ol.listPlain li a{font-weight:700}.menu-header{border:none}.menu-row{border:none}.block-row{background:#363333;border:none;color:#fff}.block-body .blockLink{background:#363333}.p-title{color:#fff}.memberHeader-main{background:#363333;color:#fff;border:none}.pairJustifier{color:#fff}.message-cell.message-cell--user{background:#363333;border-right:none}.buttonGroup:hover{color:#000}.button.button--link a:hover{color:#000}.button:hover{background:#272121}dd{color:#fff}h1{color:#fff}h2{color:#fff}h3{color:#fff}h4{color:#fff}.message-cell--main{background:#272121;color:#fff}.message-userArrow{border-right-color:#272121;color:#fff}.message-userArrow:after{border-right-color:#272121;color:#fff}.bbCodeBlock{border:none}.bbCodeBlock-content{background:#363333}.bbCodeBlock-title{background:#666363}.message-attribution{border:none}.message-signature{border:none}.bbCodeBlock-expandLink{background:linear-gradient(to bottom,rgba(94,92,92,0) 0,#5e5c5c 99%)}.reactionsBar{background:#363333;border:none}.fr-toolbar{background:#272121;border:none}.structItem-parts>li:nth-child(even){color:#fff}dt{background:#565656;color:#fff}dl.pairs dt{background:0 0}dd .formSubmitRow-bar{background:#363333;border:none}.message-avatar-wrapper .avatar{border-radius:3px}.bbCodeBlock--unfurl{background:#363333;color:#fff}
Luego guarda, recarga Forobeta y listo
Recalco tres puntos:
1. No es perfecto, no es la intención y está lejos de serlo.
2. Durará tanto como el diseño actual de ForoBeta, y lo actualizaré conforme yo vaya necesitando hacer cambios o el foro los haga.
3. Cualquier duda ponla en una respuesta o al MP.
Saludos! Las opiniones son bienvenidas. No sabía donde postearlo y lo puse en Fuera de Tema xD
---------------------
Actualización:
El usuario @RoyC contribuyó con algunas modicaciones al mod original, el código es este:
CSS:
.p-header {
background: #af8560;
}
.p-sectionLinks {
background: #363333;
color: #fff;
border-bottom: none;
}
.p-sectionLinks a {
text-decoration: none;
color: #fff;
}
.p-sectionLinks a:hover {
color: #fff;
}
.p-navEl-link {
color: #fff;
}
.p-nav .is-selected {
background: #363333;
}
.p-navEl-link:hover {
color: #fff;
}
.p-navEl-link:hover:before {
color: #fff;
}
.p-nav-list .p-navEl {
background: #13354E;
}
.p-nav {
background: #13354E;
}
.p-pageWrapper {
background: #0C2131;
}
.block-minorHeader {
border: none;
color: #fff;
}
.block-body a:hover {
color: #eee;
}
.block-header {
border: none;
}
.node i {
color: #a8a8a8;
}
.fr-box i {
color: #a8a8a8;
}
.notice--primary {
background: #363333;
border: none;
}
.menu-content {
background: #393e46;
color: #fff;
}
.menu-row.menu-row--alt {
background: #393e46;
color: #fff;
}
ul.listPlain li .menu-linkRow:hover {
background: #fd7014;
border: none;
}
ul.listPlain li {
color: #fff;
}
ul.listPlain li a {
color: #fff;
}
.menu-linkRow:hover {
background: #fd7014;
border: none;
}
.menu-linkRow {
color: #fff;
}
.menu-footer {
background: #29435c;
border: none;
}
.menu-footer textarea .input {
color: #000;
font-style: bold;
}
.menu-row--clickable:hover {
background: #393e46;
}
.menu-scroller ol.listPlain li a {
font-weight: 700;
}
.menu-header {
border: none;
}
.menu-row {
border: none;
}
.block-row {
background: #1A1A1A;
}
.block-body .blockLink {
background: #363333;
}
.p-title {
color: #fff;
}
.memberHeader-main {
background: #363333;
color: #fff;
border: none;
}
.pairJustifier {
color: #fff;
}
.message-cell.message-cell--user {
background: #242424 ;
}
.buttonGroup:hover {
color: #000;
}
.button.button--link a:hover {
color: #000;
}
.button:hover {
background: #272121;
}
dd {
color: #fff;
}
h1 {
color: #fff;
}
h2 {
color: #fff;
}
h3 {
color: #fff;
}
h4 {
color: #fff;
}
.message-cell--main {
background: #1A1A1A ;
color: #fff;
}
.message-userArrow {
border-right-color: #404040;
}
.message-userArrow:after {
border-right-color: #272121;
color: #fff;
}
.bbCodeBlock {
border: none;
}
.bbCodeBlock-content {
background: #363333;
}
.bbCodeBlock-title {
background: #666363;
}
.message-attribution {
border: none;
}
.message-signature {
border: none;
}
.bbCodeBlock-expandLink {
background: linear-gradient(to bottom,rgba(94,92,92,0) 0,#5e5c5c 99%);
}
.reactionsBar {
background: #363333;
border: none;
}
.fr-toolbar {
background: #272121;
border: none;
}
.structItem-parts>li:nth-child(even) {
color: #fff;
}
dt {
background: #565656;
color: #B9B9B9;
}
dl.pairs dt {
background: 0 0;
}
dd .formSubmitRow-bar {
background: #363333;
border: none;
}
.message-avatar-wrapper .avatar {
border-radius: 3px;
}
.bbCodeBlock--unfurl {
background: #363333;
color: #fff;
}
.block--messages .message, .block--messages .block-row {
box-shadow: 0 0 3px #404040;
border-top-color: #3B3B3B ;
border-right-color: #3B3B3B ;
border-bottom-color: #3B3B3B ;
border-left-color: #3B3B3B;
}
.button.button--link, a.button.button--link {
background: #13354E ;
color: #B9B9B9 ;
border-color: #272121 ;
}
.message-cell.message-cell--user, .message-cell.message-cell--action {
border-right: 0.3px solid #3B3B3B ;
}
.block-container {
background: #000000;
border-top-color: #3B3B3B ;
border-right-color: #3B3B3B ;
border-bottom-color: #3B3B3B ;
border-left-color: #3B3B3B ;
}
.node+.node {
border-top: 1px solid #212121 !important;
}
.node-main {
padding-left: 20px !important;
}
.structItem {
border-top: 1px solid #212121 ;
}
Tema oscuro de ForoBeta - Página 3
Pues estaba aburrido y ya que uso el tema oscuro de Youtube, Twitter, Tapatalk, una extensión en Facebook, etc., etc. Me puse a hacer este con una extensión de Chrome. Básicamente es sólo una sustitución de colores de fondo y de texto, está lejos de ser perfecto y no durará mucho si hacen un...
forobeta.com
Más tarde pasaré la versión de Alexk conforme tenga tiempo o si alguien la pasa antes pues mejor
Las siguientes submisiones las subiré a pastebin por el límite de 10000 caracteres para los temas que tiene el foro.
Última edición: