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
Invitado





MensajePublicado: Mon Apr 13, 2015    Título del mensaje: Responder citando

Muy buen aporte amigo.

Movido a Manuales Wink
Volver arriba
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 
No hay mensajes nuevos Páginas para subir archivos 22 meda 10444 Tue Jul 21, 2009
LuzPoder Ver último mensaje
No hay mensajes nuevos Creo que he encontrado algo bueno 2 Luiscri 569 Mon Aug 25, 2008
SasukeRoll Ver último mensaje
No hay mensajes nuevos Los foros con publicidad google improvisa 30 Smarter 3324 Mon Jul 28, 2008
Theheros Ver último mensaje
El tema está bloqueado: no pueden editarse ni agregar mensajes. Subforos terminado 47 EsForos 7194 Sat Nov 10, 2007
EsForos Ver último mensaje
No hay mensajes nuevos foro rol de la edad media 2 adrino 1963 Sat Nov 03, 2007
adrino Ver último mensaje
 



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