Este tema está cerrado, no puede editar mensajes o enviar nuevas respuestas  [ 3 mensajes ] 
TUTORIAL Colorizando el Prosilver I parte 
Autor Mensaje
Equipo de Soporte
Equipo de Soporte
Avatar de Usuario

Registrado: 01-16-2007, 5:58
Mensajes: 6806
Ubicación: Chile
Nota TUTORIAL Colorizando el Prosilver I parte
Vamos a comenzar a repasar y traducir algunos tips para aprender a cambiar los colores en el estilo prosilver y que he recopilado, y probado editando el Tema

ESTE TUTORIAL ESTA ADAPTADO PARA SUBIR LAS IMAGENES DE ACUERDO A NUESTRO PROPIO PANEL /ACP

Nota: Esto deben hacerlo tranquilamente y solo si quieren cambiar de color a este estilo, luego si ven que hay MODS nuevos por instalar, siguiero hacerlo despues que se instalen los MODS y luego hacer los cambios

En los ejemplos donde hay que cambiar la imagen aparte del color,(final del post las imagenes) las he subido a Aplicaciones - File Manager de aplicaciones - images (bg_header, bg_list y gradient) le he puesto con numeros algunas para diferenciarlas ya que son distintas del original del prosilver

1 Cambiar el fondo blanco

Para cambiar el fondo blanco del estilo prosilver se debe:
abrir:Estilos - Temas - prosilver - editar

buscar:
Código:
    html, body {
       color: #536482;
       background-color: #FFFFFF;
    }   


y cambiar FFFFFF por el color que prefiera


2 Colorizando la imagen del ´´header´´

Uds podrán apreciar el top del header azul, donde se aprecia el nombre del sitio, descripcion y en la parte izquierda
el Logo.

pasos a seguir :estilos/temas/prosilver/editar, entonces manos a la obra y hacer las modificaciones:

Si Ud. desea colorizarlo, tienen que hacer las siguientes cosas:


Primero que nada y a modo de explicación tienen que colorizar la imagen del bg_header.gif que se encuentra ubicado en el directorio /estilos/prosilver/tema, cuando se cambia de color esa imagen la página del viewtopic.php tambien tendrá un color diferente ya que el azul controla esa imagen. Como nosotros no tenemos acceso al directorio donde esta el foro pero si podemos editar el tema
Lo que haremos nosotros es subir al /acp - aplicaciones - file manager de aplicaciones -images, una imagen de cada uno de estas: (bg_header, bg_list y gradient) del estilo original del prosilver, pero ya con un color elegido por nosotros (mostradas abajo al final del post) y esto lo pueden hacer con cualquier programa de imagenes donde le puedas cambiar el color. Luego de esto podemos editar el tema y hacer los cambios




estilos - temas -prosilver -editar
buscar:
Código:
    .headerbar {
        background-color: #12A3EB;
        background-image: url("{T_THEME_PATH}/images/bg_header.gif");
        color: #FFFFFF;
    } 

Entonces para comenzar debemos crear nuestra propia imagen, Notaran que todavia sigue en azul! no hay problema, porque al decir que crearemos nuestra propia imagen, lo que vamos a hacer es subir al /acp - aplicaciones -file manager de aplicaciones - images, una imagen similar del bg_header ya con nuestro color favorito:
ejemplo modificada por mi con un programa de edicion y ahora es naranja:
bg_header
Imagen


lo que se debe cambiar ahora es el siguiente codigo de arriba background-color: #12A3EB; por el mismo color de nuestra imagen subida para que tome los cambios. En este caso 12A3EB por el mismo color elegido para el color de nuestra imagen. yo lo cambie a FFBF00 en este ejemplo de color naranja

aca un ejemplo dondo yo ya he subido la imagen con un programa de edicion y cambiado el color y luego edite el tema e hice los cambios:

Código:
    .headerbar {
       background-color: #FFBF00;
       background-image: url("{http://images.elnombre delforo.dominio/bg_header1.gif}/images/bg_header.gif");
       color: #FFFFFF;
    }


Donde dice URL DE LA IMAGEN o http. etc va la ruta de nuestra imagen que hemos subido a images, y luego modificar en Estilos - temas - prosilver - editar y pegar la ruta de la imagen como en el ejemplo

3 Colorizando la pagina de los foros

Ahora nos encontramos que en la pagina del index, el blue rounding (tenemos ese azul aun rodeando los foros)
Vamos a hacer ahora el cambio del color

Otra vez abrimos el dentro del codigo: Estilo - temas - PROSILVER - EDITAR

y necesitamos encontrar

Código:
    .forabg {
        background-color: #0076b1;
        background-image: url("{T_THEME_PATH}/images/bg_list.gif");
    }


Eso controla el forumlist, debemos fijarnos primero en el bg_list.gif que se encuentra localizado en: /estilos/prosilver/tema y el codigo del color "background-color: #0076b1;" que esta a la derecha por el color de nuestra imagen,no nos olvidemos de cambiarlo tambien como en el caso anterior. colocamos el color en este caso del naranja de nuestra imagen: FFBF00
Entonces nuevamente subimos al /acp - Aplicaciones -File manager de aplicaciones - images, una imagen similar al bg_list ya colorizada a nuestro gusto, y luego nuevamente en el panel de administracion del foro . estilos - temas -prosilver y editar para hacer los cambios, ejemplo hecho color naranja:
bg_list
Imagen

ejemplo como queda:

Código:
.forabg {
   background-color: #FFBF00;
   background-image: url("{http://images.TUFORO.DOMINIO/bg_list2.gif}/images/bg_list.gif");
}



Luego cuando miramos el viewforum.php, nos damos cuenta que tiene tambien una linea azul, esto tambien debemos cambiar de nuevo en el tema lo siguiente:

Código:
    .forumbg {
        background-color: #12A3EB;
        background-image: url("{T_THEME_PATH}/images/bg_header.gif");
    } 


aca tambien necesitamos pegar la URL DE LA IMAGEN con el color que elejimos el background-color #12A3EB; por el color que necesitamos
como ya subimos antes al /acp - aplicaciones - fila maganer de aplicaciones - images esta imagen:
bg_header
Imagen
tan solo pegamos la ruta asi como este ejemplo y tambien de paso el codigo del color por el mismo color que tiene nuestra imagen.
Ejemplo:
Código:
.forumbg {
   background-color: #FFBF00;
   background-image: url("{http://images.TUFORO.DOMINIO.es/bg_header1.gif}/images/bg_header.gif");
}

y no olvidarse de cambiar el codigo del color 12A3EB por el color de su imagen subida antes

Otro codigo que nos permite cambiar el color en el area donde se encuentra el index , FAQ , etc etc.

abrir /tema/prosilver - editar

buscar el
Código:
        .navbar {
           background-color: #cadceb;
        }


y cambiarmos el cadceb por el color que deseamos

si queremos ahora cambiar el color amarillo al pasar el raton por otro color debemos ubicar ahora:

Código:
li.row:hover {
   background-color: #F6F4D0;
}

y cambiar F6F4D0 por el color que deseamos.
Ahora para cambiar el color en las paginas del viewtopic.php algunos azules, celeste. Esos bg.colours estan controlados por el color.css Entonces debemos encontrar en estilos/temas/prosilver/editar:
buscar:
Código:
.bg1   { background-color: #ECF3F7; }
.bg2   { background-color: #e1ebf2;  }
.bg3   { background-color: #cadceb; }


y solo cambiar por los colores que deseamos

4) Colorizando la lista de paginas de los foros

Nos damos cuenta que la pagina con la lista de los foros, esa imagen donde nosotros vemos el nombre del foro, descripcion, etc etc es controlada por el gradient.gif y lo encontramos en estilos/prosilver/tema

Encontrar en tema

Código:
ul.forums {
    background-color: #eef5f9;
    background-image: url("{T_THEME_PATH}/images/gradient.gif");
}


asi de esta manera Uds, cambiar esa imagen y no olvidarse de cambiar tambien el color del background eef5f9 por el color similar al color de la imagen que cambiamos.

nuevamente subir al /acp . aplicaciones - File manager de aplicaciones -images una imagen similar al gradient ya colorizada por nuestro color favorito:

gradient
Imagen

ejemplo:

Código:
ul.forums {
   background-color: #FFBF00;
   background-image: url("{http://images.TUFORO.DOMINIO.es/gradient3.gif}/images/gradient.gif");
}

y no olvidar de cambiar el codigo del color eef5f9 por el mismo color de nuestra imagen.

Estas son las 3 imagenes que hemos cambiado el color y tambien el color que deseamos ejemplo este color naranja :
IMPORTANTE: Tenemos que asegurarnos de cambiar el color en los ejemplos donde estan estas imagenes con el mismo color de la imagen que hemos subido. aca yo las cambie a naranja
bg_header
Imagen

bg_list
Imagen

y
gradient
Imagen


10-01-2009, 6:20
Perfil
Equipo de Soporte
Equipo de Soporte
Avatar de Usuario

Registrado: 01-16-2007, 5:58
Mensajes: 6806
Ubicación: Chile
Nota Re: TUTORIAL Colorizando el Prosilver I parte
II PARTE y seguira a medida que vaya encontrando mas tips

Color en link de los foros

Panel de administración - Estilos - Temas - prosilver - Editar

buscar:

Código:
a:link   { color: #105289; }
a:visited   { color: #105289; }
a:hover   { color: #D31141; }
a:active   { color: #368AD2; }



y cambie el color que desee


Por ejemplo el primero
Código:
a:link   { color: #105289; }


Este color se reflejara en el usuario y acceso a los link de panel de control del moderador, buscar sus mensajes, Buscar temas sin respuesta, Buscar mensajes nuevos, etc

el visitado
Código:
a:visited   { color: #105289; }


Te muestra arriba el link al Portal, foro, Panel control del usuario, etc hasta incluso el link de Quien esta conectado y se va alternando con el primer color ya puesto.

el tercero:
Código:
a:hover   { color: #D31141; }

es el color del efecto del raton que cambia de color en los anteriores

el cuarto
Código:
a:active   { color: #368AD2; }


su titulo lo dice, activas el link y se torna del color elegido

siguiendo más abajo encontramo para poder cambiar el color del titulo del foro, esto cambiara para todos, porque para que sea distinto para cada uno se necesita un MOD.

encontrar:
Código:
/* Links for forum/topic lists */
a.forumtitle {
   color: #105289;
}


cambie el color deseado y el color para los nombre de los foros cambiara.

una idea del siguiente:
Código:
a.forumtitle:hover {
   color: #BC2A4D;
}


el mismo caso de ejemplos anteriores cambia el color al colocar el raton en el nombre del foro

como cambiar el color del panel donde escribimos

encontrar:
Código:
.panel {
   background-color: #ECF1F3;
   color: #28313F;
}


y cambiar el color al lado derecho del background-color
Esto lo notamos al responder un mensaje o respuesta rapida


10-02-2009, 7:05
Perfil
Equipo de Soporte
Equipo de Soporte
Avatar de Usuario

Registrado: 01-16-2007, 5:58
Mensajes: 6806
Ubicación: Chile
Nota Re: TUTORIAL Colorizando el Prosilver I parte
Como cambiar el color de los titulos blancos que aparecen en el top del foro, anuncios, paginas de los topicos?

buscar:
Código:
li.header dt, li.header dd {
   color: #FFFFFF;
}


y cambiar el FFFFFF por el color que se quiera

si se deseara cambiar el titulo o asunto al empezar un post ya habria que editar otro archivo

Estilos -plantillas - prosilver - editar y buscar el viewtopic_body.html

buscar:
Código:
<h2><a href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></h2>


y reemplazar ejemplo este color:
Código:
<h2><a href="{U_VIEW_TOPIC}"  style="color: #FF0000;">{TOPIC_TITLE}</a></h2>


ya sigo se viene una III PARTE pronto


10-06-2009, 5:52
Perfil
Mostrar mensajes previos:  Ordenar por  
Este tema está cerrado, no puede editar mensajes o enviar nuevas respuestas   [ 3 mensajes ] 

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados


No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro
No puede enviar adjuntos en este Foro

Saltar a:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.
Traducción al español por Huan Manwë para phpbb-es.com
phpBB SEO
[ Time : 0.083s | 13 Queries | GZIP : Off ]