Foro de ayuda Foro de ayuda

 
 F.A.Q.F.A.Q.   BuscarBuscar   Lista de MiembrosLista de Miembros   Grupos de UsuariosGrupos de Usuarios   RegístreseRegístrese 
 PerfilPerfil   Identifíquese para revisar sus mensajesIdentifíquese para revisar sus mensajes   ConectarseConectarse 


[MANUAL] Cambiar atributos del zonas de relleno

 
Publicar Nuevo Tema   Responder al Tema    Foro de ayuda -> Manuales
Ver tema anterior :: Ver siguiente tema  
Autor Mensaje
Phosphorus



Sexo: Sexo:Hombre
Registrado: 22 Feb 2011
Mensajes: 221
Ubicación: Entre las tinieblas...
Estado: Offline
MensajePublicado: Sun Apr 12, 2015    Título del mensaje: [MANUAL] Cambiar atributos del zonas de relleno Responder citando

Bueno el foro de soporte anda con poca actividad últimamente a que si pensé en postear algo.
Ahora si empecemos a que me refiero con zonas de relleno se preguntaran me refiero a los input y a los textarea.
En otras palabras los lugares donde debes escribir.
Pues bien ¿Cómo los cambiamos?
Con este codigo entre
Código:
<style>

</syle>

En la parte de HTML Avanzado
Podemos cambiar los texareas y los input de relleno.
Yo los textarea los puedes cambiar de uno en uno o todos juntos al igual que los input.
Para cambiarlos todos juntos sin especificar de uno en uno se debe colocar entre style y style el siguiente codigo:
Código:
textarea.post {
background: Fondo distinto una imagen color repetición etc. si desean, si no quieren cambiar esto borran la linea entera;
color: Color del texto dentro del textarea;
font-weight : estilo de fuente;
border: tipo de borde, color y tamaño del borde si desean, si no quieren cambiar esto borran la linea entera;
border-radius: radio del borde si quieres que tenga una zona que sea un tanto circular si desean, si no quieren cambiar esto borran la linea entera;}


Como verán es simple lo que deben hacer es remplazarlo con sus preferencias, si desean cambiarlo de uno en uno:
Código:
textarea[name="nombre del area"] {
background: Fondo distinto una imagen color repetición etc. si desean, si no quieren cambiar esto borran la linea entera;
color: Color del texto dentro del textarea;
font-weight : estilo de fuente;
border: tipo de borde, color y tamaño del borde si desean, si no quieren cambiar esto borran la linea entera;
border-radius: radio del borde si quieres que tenga una zona que sea un tanto circular si desean, si no quieren cambiar esto borran la linea entera;}

Los nombres de área para el textarea no estoy muy seguro pero creo que son dos únicamente "message" para mandar un mensaje tanto por mensaje privado como publicando el nuevo tema en el foro o respondiendo y el otro se llama "signature", este ultimo se usa para la preferencia del perfil únicamente en el campo que dice "firma"

Ahora para cambiar los input pueden hacerlo de uno en uno o hacerlos todos juntos como el anterior
Para hacerlo todos juntos entre style y style usan el siguiente código como base:
Código:
input.post {
background: Fondo distinto una imagen color repetición etc. si desean, si no quieren cambiar esto borran la linea entera;
color: Color del texto dentro del textarea;
font-weight : estilo de fuente;
border: tipo de borde, color y tamaño del borde si desean, si no quieren cambiar esto borran la linea entera;
border-radius: radio del borde si quieres que tenga una zona que sea un tanto circular si desean, si no quieren cambiar esto borran la linea entera;}

Bien ahora para ir de uno en uno es así:
Código:
input[name="nombre"] {
background: Fondo distinto una imagen color repetición etc. si desean, si no quieren cambiar esto borran la linea entera;
color: Color del texto dentro del textarea;
font-weight : estilo de fuente;
border: tipo de borde, color y tamaño del borde si desean, si no quieren cambiar esto borran la linea entera;
border-radius: radio del borde si quieres que tenga una zona que sea un tanto circular si desean, si no quieren cambiar esto borran la linea entera;}

Los nombres son varios tengo entendido aim, msn, location, icq, interest creo que hay otros.

Bien ahora explcare los campos y dare unos ejemplos:
Oculto: 
background: Bien aquí se puede insertar una imagen de la siguiente manera:
background: url(link de la imagen);
Se puede hacer que la imagen se repita tanto de manera horizontal como vertical ¿Cómo? Bien acuerden que X es horizontal en un eje cartesiano e Y siempre es el punto en vertical
Ahora vamos a representar que la imagen se repita tanto en X como en Y
background: url(link de la imagen) repeat;
Ahora también se puede representar por separado de la siguiente manera:
background: url(link de la imagen);
background-repeat: repeat;
Para representar unicamente en X o en Y vamos a remplazar Z por lo que queramos:
background: url(link de la imagen);
background-repeat: repeat-z;
Osea si queremos que se repita en X remplazamos Z:
background: url(link de la imagen);
background-repeat: repeat-x;
Acuerdense que es lo mismo si lo ponen todo corrido en el campo background:
background: url(link de la imagen) repeat-x;
Para hacer que no se repita se remplaza no-repeat:
background: url(link de la imagen) no-repeat;
Para hacer que el fondo se repita en X o en Y y luego tenga otro fondo de color haciendo un efecto de convinar una imagen con un color es de la siguiente manera:
background: url(link de la imagen) repeat-x #color-en-hexadecimal;
Por ejemplo si remplazamos #FFFFFF seria blanco:
background: url(link de la imagen) repeat-x #FFFFFF;
Cuidado no confundir el campo background con el campo color ya que como veremos acontinuación
background: url(link de la imagen) repeat-x #FFFFFF;
color: black;
De esta manera la letra sera de color negro si no se puede remplazar por hexadecimal
background: url(link de la imagen) repeat-x #FFFFFF;
color: #000000;
Bien otro campo es el de la fuente no tan importante pero si lo desean cambiar lo que hace ese campo de fuente que puse lo que hace es cambiar el estilo de letra de una normal a cursiva o negrita por ejemplo. No es del todo aconsejable por que el usuario puede confundir creyendo que su texto ya esta con ese formato pero al mandar el mensaje el texto saldra con el estilo nomal ya que lo que cambiamos en realidad es el estilo de fuente dentro del textarea no una vez que se publica.
Igualmente si se desea cambiar pueden ponerlo de la siguiente forma por ejemplo vamos hacer que se vea en negrita osea bold:
font-weight : bold;
Tipo de borde bien en este campo se puede seleción que tan grande sera el borde 2px o 6px por ejemplo, también se puede cambiar el tipo de borde dentro de la misma área al igual que el color del borde yo pondre para el borde 2px negro y que sea punteado:
border: 2px black dotted;
Ahora el ultimo campo border-radius lo que hace es poder darle una circunferencia al aréa tanto textarea como input
border-radius: 30px;
De esta manera todo el campo tendria 30px de radio


Ahora para saber los colores puden entrar en el inspector web de su navegador o también entrar en el siguiente sitio web para averiguarlos en hexadecimal:
Codigos de colores en hexadecimal
Y para poder darle un radio o circunferencia deseada a el campo recomiendo esta web que es muy útil:
Generador de radios automaticos

Por ultimo dejare un ejemplo de como seria mi textarea e inputs dentro de mi foro y les dejare el codigo por si quieren utilizarlo con el estilo que yo uso:
Oculto: 
Código:
<style>
textarea.post{
background: url(http://i.imgur.com/9QOeV79.png) center  top #2e2e2e;
color: #FFFFFF;
border: 2px red dotted;
border-radius: 5px;}

input.post {
background-image: url(http://i.imgur.com/EhOGml2.png);
   font-weight : bold;
color: #FFFFFF;
border-radius: 5px;}
</style>


Bueno se vería algo así y como se habran dado cuenta me gusta como queda el negro con el rojo y el blanco sobre lo negro Smile


Bueno deseo que sus foros se vean muy bonitos con estos cambios mientras tanto nos vemos en otro post.
Pensare en publicar alguna otra guía para cambiar los estilos de los foros pero mientras tanto esto es todo.
Les deseo suerte.

Saludos cordiales el user Phosphorus Moscu Wink

_________________

Mi foro PokeUniverso
New Tales Pokémon
Esforos lo más Wink
Volver arriba
Ver perfil del usuario Enviar mensaje privado   Visitar sitio web del autor MSN Messenger
YoshiGM
Moderador
Moderador


Sexo: Sexo:Hombre
Registrado: 08 Mar 2008
Mensajes: 906
Estado: Offline
MensajePublicado: Mon Apr 13, 2015    Título del mensaje: Responder citando

Muy buen aporte amigo.

Movido a Manuales Wink
Volver arriba
Ver perfil del usuario Enviar mensaje privado  
Mostrar mensajes anteriores:   
Publicar Nuevo Tema   Responder al Tema    Foro de ayuda -> Manuales Todas las horas están en GMT + 1 Hora
Página 1 de 1

 
Saltar a:  
No puede crear mensajes
No puede responder temas
No puede editar sus mensajes
No puede borrar sus mensajes
No puede votar en encuestas

Temas Relacionados
 Temas   Respuestas   Autor   Lecturas   Último Mensaje 
El tema está bloqueado: no pueden editarse ni agregar mensajes. Algunos cambios 0 EsForos 807 Sat Sep 29, 2007
EsForos Ver último mensaje
El tema está bloqueado: no pueden editarse ni agregar mensajes. Mejorado el editor avanzado BBCode 0 EsForos 1278 Tue Sep 25, 2007
EsForos Ver último mensaje
El tema está bloqueado: no pueden editarse ni agregar mensajes. Deshabilitados los guiones en el nombre del foro 0 EsForos 1260 Mon Sep 24, 2007
EsForos Ver último mensaje
El tema está bloqueado: no pueden editarse ni agregar mensajes. Añadido editor avanzado BBCode y otras mejoras 0 EsForos 1072 Sun Sep 23, 2007
EsForos Ver último mensaje
El tema está bloqueado: no pueden editarse ni agregar mensajes. Primer post esforos 0 EsForos 1606 Sun Sep 09, 2007
EsForos Ver último mensaje
 



Crear foro gratis - Powered by phpBB © 2001, 2005 phpBB Group