Tema oscuro de ForoBeta

JosFault · 2019-08-09T18:03:07-0500

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:

Stylebot

Change the appearance of the web instantly

chrome.google.com

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):

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 ;
}

Los screenshots de esta versión los pueden ver en su comentario original:

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.

CasstRO · 2019-08-09T18:07:45-0500

Se ve chidooo!

JosFault · 2019-08-09T18:08:53-0500

PD: No se me ocurrió con qué color sustituir el azul de los links, si alguien tiene una sugerencia es muy agradecida xD
Igual cualquiera puede ponerle el que quiera

Josepfer · 2019-08-09T18:16:53-0500

me gusta tu propuesta

Balondero · 2019-08-09T18:30:56-0500

Genial

myprojectx · 2019-08-09T18:33:48-0500

hey, te quedo super!

Ronaldokilla · 2019-08-09T18:39:07-0500

ya han realizado muchas recomendaciones en otros hilos de esto.

es una buena opcion , pero de momento carlos dice que aun estan en proceso modificaciones y actualizaciones al foro , y que esta entre las consideraciones esta opcion.

Ronaldokilla · 2019-08-09T18:39:38-0500

se ve genial , yo de momento lo utilizo de mi navegador

JosFault · 2019-08-09T18:42:28-0500

Ronaldokilla dijo:
ya han realizado muchas recomendaciones en otros hilos de esto.

es una buena opcion , pero de momento carlos dice que aun estan en proceso modificaciones y actualizaciones al foro , y que esta entre las consideraciones esta opcion.

Yo soy de los usuarios no muy exigentes xd si quiero algo que puedo hacer lo hago yo jaja, de hecho tenía uno para la version en vBulletin pero nunca lo compartí por falta de tiempo, este hilo es lo mismo xd no una petición sino una solución momentánea, por supuesto que hay prioridades aún

Nobita Deluxe · 2019-08-09T18:44:28-0500

jaja por el titulo crei que ibas a hablar de las intimidades del dueño, un secreto o un relato escabroso de como logro crear la página

Ronaldokilla · 2019-08-09T18:45:37-0500

RoloTortu dijo:
Yo soy de los usuarios no muy exigentes xd si quiero algo que puedo hacer lo hago yo jaja, de hecho tenía uno para la version en vBulletin pero nunca lo compartí por falta de tiempo, este hilo es lo mismo xd no una petición sino una solución momentánea, por supuesto que hay prioridades aún

muy buena sugerencia colega , entiendo a mi tambien me gusta el tema a demas es bueno para cuando se esta largas horas en la pc trabajando

Ronaldokilla · 2019-08-09T18:46:08-0500

Nobita Deluxe dijo:
jaja por el titulo crei que ibas a hablar de lo intimidades del dueño, un secreto o un relato escabroso de como logro crear la página

pense lo mismo al entrar jajjaja , fue lo primero que se me vino en mente

JosFault · 2019-08-09T18:46:09-0500

Nobita Deluxe dijo:
jaja por el titulo crei que ibas a hablar de lo intimidades del dueño, un secreto o un relato escabroso de como logro crear la página

Jajaja las 7 cosas más oscuras de Forobeta *musica de fondo super trillada de Dross**

gregkun · 2019-08-09T18:47:16-0500

Esto es como un modo nocturno para ver cómodamenteel foro en las noches.

JosFault · 2019-08-09T18:48:07-0500

gregkun dijo:
Esto es como un modo nocturno para ver cómodamenteel foro en las noches.

Yep, de hecho esa es la intención

aunque yo los modos nocturnos los uso todo el día/noche xD por eso le puse oscuro al título

Dinogo · 2019-08-09T18:50:31-0500

lo probé y me gusta, muchas gracias

Alexk · 2019-08-09T18:51:57-0500

No esta mal pero hay mucho contraste, aqui mi propuesta de 2m XD

De hacer esta versión necesitaría la ayuda de todos (para revisar cada rincón del foro para que este todo ok... ojo no sera asi como lo muestro solo es una idea no me he parado a mirar la accesibilidad los tonos si con correctos o no...) y claro la aprobación de Carlos XD

Facil no es ya que aunque se les de gusto con la versión dark seguro a muchos no les gustara jeje pero bueno si es entre todos igual y si

JosFault · 2019-08-09T18:51:58-0500

Dinogo dijo:
lo probé y me gusta, muchas gracias

Gracias, si hayas un bug o alguna zona ilegible que olvidé recolorear avisa para actualizar el tema

JosFault · 2019-08-09T18:54:10-0500

Alexk dijo:
No esta mal pero hay mucho contraste, aqui mi propuesta de 2m XD

De hacer esta versión necesitaría la ayuda de todos (para revisar cada rincón del foro para que este todo ok... ojo no sera asi como lo muestro solo es una idea no me he parado a mirar la accesibilidad los tonos si con correctos o no...) y claro la aprobación de Carlos XD

Facil no es ya que aunque se les de gusto con la versión dark seguro a muchos no les gustara jeje pero bueno si es entre todos igual y si

Esa me gusta, de hecho pensé en la paleta azul porque son los colores del foro xD azul y naranja pero no se me ocurrió una paleta buena y usé una dark random de internet.
Imagino que si ponen tema oscuro será como en vBulletin que habían 3 temas (aunque nadie usaba los otros 2 jaja)

Dinogo · 2019-08-09T18:54:31-0500

RoloTortu dijo:
Gracias, si hayas un bug o alguna zona ilegible que olvidé recolorear avisa para actualizar el tema

está parte de aquí hace falta poner las letras más claras