Estilos personalizables en las fichas de usuario

[Anarchy]

Hola:

Como paso previo a los estilos personalizables en los Blog, he añadido la posibilidad de personalizar el estilo de la ficha de usuario de los miembros del foro.

¿Cómo puedo personalizar el aspecto de mi ficha?
Por motivos de seguridad, no se permite el uso de ciertas funciones CSS, por lo que "solamente" se pueden personalizar los textos, tamaños y colores de la ficha, a gusto de cada uno. No se pueden usar funciones como url para llamar a una imagen o a otro archivo.

Para cambiarlo, basta con crear tu propio CSS e introducirlo en el formulario que te aparecerá en "Editar Perfil" dentro de tu panel de control.


¿Y cómo puedo saber las definiciones utilizadas para cambiar cada color, texto, etc...?
El CSS por defecto es el siguiente:


body
{
background: #FFFFFF url(../../images/gradients/background.jpg) repeat;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px;
}
a:link, body_alink
{
color: #305478;
text-decoration: none;
}
a:visited, body_avisited
{
color: #305478;
text-decoration: none;
}
a:hover, a:active, body_ahover
{
color: #305478;
text-decoration: underline;
}
.page
{
background: #F9F7F7;
color: #000000;
}
td, th, p, li
{
font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tborder
{
background: #BBC7D4;
color: #000000;
border: 1px solid #BEC9D1;
}
.tcat
{
background: #869BBF url(../../images/gradients/gradient_tcat.jpg) repeat-x top left;
color: #305478;
font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.tcat a:link, .tcat_alink
{
color: #305478;
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: #305478;
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: #305478;
text-decoration: underline;
}
.thead
{
background: #679BBB url(../../images/gradients/gradient_thead2.gif) repeat-x top left;;
color: #FFFFFF;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
text-decoration: none;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #FFFFFF;
text-decoration: underline;
}
.tfoot
{
background: #31688E;
color: #FFFFFF;
}
.tfoot a:link, .tfoot_alink
{
color: #FFFFFF;
text-decoration: underline;
}
.tfoot a:visited, .tfoot_avisited
{
color: #FFFFFF;
text-decoration: underline;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
color: #FFFFFF;
text-decoration: none;
}
.alt1, .alt1Active
{
background: #F5F7F9;
color: #000000;
}
.alt2, .alt2Active
{
background: #EEF0F2;
color: #000000;
}
td.inlinemod
{
background: #FFFFCC;
color: #000000;
}
.wysiwyg
{
background: #FFFFFF;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
textarea, .bginput
{
background: #FFFFFF;
color: #000000;
font: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.button
{
font: 9pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
select
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
option, optgroup
{
font-size: 11px;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.smallfont
{
color: gray;
font: 8.5pt tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif,ËÎÌå;
}
.time
{
color: #305478;
}
.navbar
{
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
.fjsel
{
background: #6975A4;
color: #FFFFFF;
}
.fjdpth0
{
background: #F7F7F7;
color: #000000;
}
.panel
{
background: #E4E7F5 url(../../images/gradients/gradient_panel.jpg) repeat;
color: #000000;
padding: 10px;
border: 2px outset;
}
.panelsurround
{
background: #D5D8E5 url(../../images/gradients/gradient_panelsurround.jpg) repeat;
color: #305478;
}
legend
{
color: #305478;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.vbmenu_control
{
background: #D5D8E5 url(../../images/gradients/gradient_tcat.jpg) repeat;
color: #305478;
font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
color: #305478;
text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
color: #305478;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
color: #305478;
text-decoration: underline;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #305478;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background: #F5F7F9;
color: #305478;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
color: #305478;
text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
color: #305478;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
color: #305478;
text-decoration: none;
}
.vbmenu_hilite
{
background: #EEF0F2;
color: #23488C;
font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
color: #23488C;
text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
color: #23488C;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
color: #23488C;
text-decoration: none;
}

.bigusername { font-size: 14pt; }
.button2 { font-size: 7pt; width: 100px; }
td.thead, div.thead { padding: 4px; }
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }

.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }

form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }

Digamos que por ejemplo decides cambiar el .page y pones lo siguiente:

.page
{
background: #000000;
color: #FFFFFF;
}

El resultado sería el siguiente:
http://www.gp32spain.com/imagenes/preview.jpg

(Solo debes poner en el formulario las partes que quieras cambiar del CSS, no todo).

Con dada cambio que hagas, tendrás la opción de previsualizarlo y cancelar los cambios o aceptarlos.

Más adelante pondré múltiples estílos personalizados seleccionables, para aquellos que no quieran liarse a hacer su propio CSS pero quieran cambiar un poco el aspecto de su ficha de usuario.

Espero que os guste. Si encontráis cualquier problema o tenéis cualquier duda, podéis postearla aquí. :brindis:

Un saludo!
Anarchy

< - >
He añadido unos cuantos estilos personalizados seleccionables para aquellos que no sepan o no quieran hacer el suyo propio. Son algo chillones, pero seguro que a alguien le gusta alguno de ellos. :D

Un saludo
Anarchy

[Mariner_I]

y ahora estilos personalizables, menudo webmaster del universo tenemos, asi da gusto. Gracias por hacer que sea mejor nuestra "casa" en internet:brindis:

[dj syto]

maldita sea, esto es demasiao complicao pa mi...

[Nacho]

eres un fenomeno. Estaras haciendo backups a diario no?. porque no quiero ni imaginarme las horas de trabajo que le estas metiendo!

[FFantasy6]

Quien es Amaia ? :D

[^MiSaTo^]

Madre mía Anarchy!!! HAy que hacerte un monumento!!!!:D

[dj syto]

Quien es Amaia ? :D

es la señora anarchita :D :D:D

[BeaR]

Muchas gracias por el currele que te est&#225;s pegando :)

Yo te apoyo haciendote un pedido en jardcore-gaimer de la supercard DS ONE ^^

Salu2 :p