Bienvenidos a este tutorial, como vi que ya varios usuarios me han pedido que les modifique el color de su theme en mensaje privado decidi hacer este tutorial para que lo hagan ellos mismos, espero que les sirva!
El número 1 en la imágen es simplemente una imágen llamada headerlogobg.gif ubicada en la carpeta images/theme esa misma imágen es repetida horizontal y verticalmente, no se ajusta al tamaño del foro por lo cual si eligen una imágen procuren que cuando se repita quede bien.
En mi caso, voy a reemplazar esa imágen por una creada simplemente con el color verde (ya se que en el codigo reemplaando la url por # y el codigo de un color verde es mas facil pero no quiero complicar las cosas)
El número 2 de la imágen, digamos el segundo fondo se modifica en css/index.css
Abrimos el index.css y buscamos la linea 36.
Si tienen block de notas no se pongan a contar 1, 2, 3 instalen Notepad++Una ves abierto el index.css y buscada la linea 36 procedemos a modificar el codigo, en la linea 36 encontraremos lo siguiente background: #fff;
#fff es un codigo de colores hexagecimal utilizado en el lenguaje de programación para expresar determinados colores.
En mi caso voy a reemplazar #fff (blanco) por un verde claro (#69CC7D) Surge la pregunta, como obtengo el color que quiero. Entramos en codecol.com.ar/normal y ahi vamos moviendo las tablas hasta encontrar el que deseamos.
1) css/index.css Linea 3677Vamos a modificar la barra de arriba (bar top), denuevo vemos el background: #codigo; vamos a modificar #codigo por nuestro color, nuevamente recurrimos a codecol.com.ar/normal y reemplazamos #color por nuestro codigo en mi caso #4E8C52
2) El numero 2 es un poco mas complicado. css/index.css Linea 1128 y 1113Ahora modificaremos el menú, el menú consta de dos partes una que es la que contiene a los menús y otra que es lo que da forma al menú.
Modificaremos ambas. Linea 1128 ya saben, modifican el #333 por nuestro codigo en mi caso #75E67D
Ahora en la linea 1113 haremos exactamente lo mismo.
3 y 5) Aca es donde se complica (exagero). images/theme/main_block.pngEditamos nuestro main_block con el photoshop. Vamos a ver 2 secciones azules la primera es la barra de los foros y la segunda la que va en estadísticas que tambien es usada para los portales, por ejemplo.
Lo editaremos y nos quedará así estoy haciendo modificaciones sencillas asi que pondre del mismo color ambas partes. (es distinto a la imagen anterior ya que esta es la original y la otra una representación sin transparencias)
4) Para modificar esta parte solamente reemplazamos la imagen bginfo.gif ubicada en images/theme por una que sea de nuestro agrado, en mi caso un solo color sencillo para explicar.Haciendo estas modificaciones el theme nos estaría quedando de esta manera:
1, 2, 3, 4) Nos dirigimos a board.index.templateNo tiene caso hacerlo uno por uno, clickeamos en buscar y luego en reemplazar (o ctrl + h) y colocamos en buscar #0099BB y en reemplazar nuestro codigo en mi caso #fff (blanco).
5) Vamos a modificar el color de las categorias de los foros. css/index.cssY la linea 1576 reemplazamos #0099bb por nuestro codigo en mi caso #4D9648
6 y 7) La barra de login.index.css Linea 143 y 144
Background: Es el fondo, del cuadro de login
Color: El color de las letras
Border: 1px solid #000: 1px es el tamaño del borde solid, es solido y #fff es obviamente el color del borde.
Modificamos las lineas 143 y 144
En mi caso estas dos lineas me quedan asi:
.input_text_los {background: #9EDB9A;border: 1px solid #fff;color: #fff;padding: 7px;}
.input_password_los {background: #9EDB9A;border: 1px solid #fff;color: #fff;padding: 7px;}Y asi nos esta quedando nuestro theme modificado!
1) LetrasEn mi caso voy a dejar estas letras en negro ya que van bien con el color verde.
css/index.css Linea 7 modificacamos el color por nuestro codigo, en mi caso lo dejaré en negro osea #000
2) MenúLo primero que vamos a modificar es el boton activo, me explico el boton activo es basicamente en la pestaña que estas, si estas en inicio notaras que en el menú resalta de alguna manera la pestaña inicio.
En mi caso solamente voy a modificar el color de la barra de abajo, y el brillo.
css/index.css Linea 1189 y 1190 modificamos los colores por los que queremos.
En mi caso me queda así.
text-shadow: 0px 0px 10px #fff;
border-bottom: 2px solid #fff;Si deseas modificar tambien el color del texto podes hacerlo en la linea 1188.Ahora vamos a modificar el brillo de la sección al pasarle el mouse por encima, en el index.css Linea 1197 en mi caso colocare un brillo blanco asi que me quedaría así.
text-shadow: 0px 0px 5px #fff;Y ahora el borde del boton osea la barra abajo del texto al pasar por encima Linea 1201, en mi caso colocare blanco asi que me queda así.
border-bottom: 2px solid #fff;Una ves terminado eso ahora vamos a cambiar el color del borde de la barra de menús.
Linea 1110 modifican el color ahi marcado por el suyo, en mi caso no me gusta esa linea asi que voy a eliminarla reduciendole a 0 los pixeles que abarca.
box-shadow: 0px 0px 0px #0CCEF5; Tambien se puede eliminar el codigo
Ya esta casi todo listo, ahora vamos a modificar el color del borde de las categorías y al pasar por encima de ellas.
Para el borde: Linea 1171 (borde izquierdo) y 1172 (borde derecho)
No hay mucho que explicar, si leyeron todo el tutorial saben como reemplazar los colores justamente hacemos eso por el color que querramos en mi caso blanco. Me quedaría asi.
border-left: 1px solid #fff;
border-right: 1px solid #fff;Ahora para el borde de abajo
Para el de abajo: Linea 1163 reemplazamos el codigo por el de nuestro color, en mi caso blanco me quedaría asi.
border-bottom: 1px solid #fff;Con respecto al borde de arriba mas adelante en el tutorial lo voy a explicar.
En un rato sigo con el tutorial...
Replies
Times Read
Points