|
 |
Navegador
|
 |
|
|
|
Bienvenido
|
|
|
|
|
Estadisticas
|
|
Visitantes activos:
 Usuarios OnLine (2)
 Miembros (0)
 Anonimos (2)
Detalles
Miembros 912
Visitantes 914050
Hoy 206
Downloads 36
Foros 5846
Detalles...
|
|
|
|
|
Buscar
|
|
|
|
|
BKP Online (demos)
|
|
|
|
|
 |
Creacion y modificacion de Skins, diseño, apariencia y relacionados
|
|
|
 |
|
 |
Modificacion de clases CSS para fonts de Skins BKP
|
 |
|
|
|
|
Publicado por Blakord
|
05 Dic 2005 2:02:pm
|
 5 Pts : 2 Votos
|
|
Este articulo es valido para Blakord Portal desde la Beta 1.0 hasta la Beta
1.3.x en Draco Portal los nombres de las clases fueron cambiadas. Leer articulo
de modificación de clases para Draco Portal.
El archivo de clases es un fichero independiente que controla los estilos de
fonts de todo el portal, tipo de letra, tamaño, colores, estilos y efectos, el
portal usa un archivo de clases por que se puede obtener un control total de
cada font para cada espacio del portal de forma independiente.
No es el sentido de este articulo dar una clase sobre la manipulación de
archivos de clases CSS, solamente es mi intención explicar la aplicación de cada
estilo dentro del portal, ya que he notado varios buenos Skins hechos por los
usuarios con malas configuración de colores, donde aun cuando se han cambiado
varios de los estilos de letras algunos otros son omitidos, queda claro que el
problema es desconocimiento de la aplicación en el portal de cada estilo.
El archivo de estilos esta incluido en cada Skin dentro del directorio del mismo
ejemplo www.TuWeb.com/Skins/Coldfusion/estilos.css
Puedes editar el archivo de estilos con cualquier editor HTML, si no tienes
puedes usar cualquier editor de texto como el Notepad de windows
La estructura básica del archivo de clases consiste en usar un estilo
identificado con un nombre propio, este estilo es usado en determinados espacios
del portal que luego vamos a identificar, así podrás saber que estilo
corresponde al área de texto que quieres cambiar. Cada estilo tiene 4 partes:
.Clase = Indica la letra predeterminada y sus parámetros que afecta todo
el estilo de esta clase.
a.Link.Clase = establece un cambio de la letra cuando contiene un enlace,
se usa para diferenciar los enlaces del resto, usualmente se pone un color
diferente, subrayado, negrita etc.
a.Visited.Clase = Igual que la anterior, pero afecta a los enlaces ya
visitados.
a.Active.Clase = Igual que la anterior pero afecta los enlaces activos.
a.Hover.Clase = Igual que la anterior pero afecta los enlaces solo cuando
se posa el cursor del mouse sobre el enlace.
Pongamos un ejemplo usando el font de las tablas centrales en el contenido del
portal, este estilo ha sido llamado tablas
.tablas { font-family: Arial, verdana,
Helvetica, sans-serif; font-size: 8pt; color: #FFFFFF;}
a:link.tablas { color: #FFFF00; text-decoration: none; }
a:visited.tablas { color: #FFFF00; text-decoration: none; }
a:active.tablas { color: #FFFF00; text-decoration: none; }
a:hover.tablas { color: #FF6600; text-decoration: underline; } |
En este ejemplo se asigna para tablas la familia de letras Arial,
Verdana, Hevetica y Sans-Serift (font-family: Arial, verdana,
Helvetica, sans-serif;), cuando se define un tipo de letra es
necesario que el visitante la tenga instalada en su propio sistema operativo,
por eso es necesario usar letras predeterminadas incluidas por defecto en los
sistemas operativos como Windows, si te bajas algún buen font de Internet no
puedes ponerlo en tu pagina Web, por que a menos que el visitante también lo
tenga este no lo verá, la familia que ponemos en el ejemplo indica el orden de
prioridad en el que intentara usar los fonts, la prioridad es para la letra
Arial, si el visitante no la tiene se usa la segunda opción Verdana,
si tampoco esta disponible en el PC del visitante se usa Hevetica y así
sucesivamente.
Luego se define el tamaño (font-size: 8pt;) que se fija a 8 puntos, se
pueden usar otras unidades de medidas como píxel 8px, este es el tamaño
que la letra usara en el portal en los navegadores del usuario como
predeterminado, navegadores como Internet Explorer mantienen uniforme e
invariable este tamaño ya que este solo puede alterar las letras a voluntad del
usuario de aquellas que no están restringidas por el archivo de clases, otros
navegadores como Firefox permiten a cada usuario aumentar o reducir las letras
de cualquier pagina incluso las restringidas por archivos de clases.
Por ultimo el color del font (color: #FFFFFF;) que se indica en
código hexadecimal, puedes obtener el código correspondiente a cada color desde
cualquier editor html, grafico etc. en este ejemplo designamos para ese font el
color blanco (#FFFFFF).
Bien esta es la configuración estándar de los fonts, se pueden agregar mas
efectos y parámetros pero como dije este no es un tutorial de archivos de clases,
es solo para su aplicación a este portal para ayudar a los desarrolladores de
Skins a lograr los estilos que requieran. Ya terminamos con la configuración
general de la letras tablas, ahora vamos a modificar el color de las letras que
contengan enlaces dentro del estilo tablas.
Para los enlaces se usan algunos efectos diferentes para resaltar a los
visitantes que existe un enlace en ese lugar, para esto usamos las subclases
link, visited, active, hover que ya hemos explicado.
En este ejemplo para los enlaces, enlaces visitados y enlaces activos usamos el
mismo color y parámetros (color: #FFFF00; color amarillo) y (text-decoration: none;
Sin decoración), esto depende de cada quien, en lo personal me parece de
buen gusto usar todos los enlaces del mismo color, o la Web parecería un
carnaval.
Luego en Hover podemos usar un color diferente que diferenciara aun mas
un enlace pero solo cuando se pose el mouse sobre el enlace, en este ejemplo
usamos (color: #FF6600; Color naranja) y (text-decoration: underline;
Subrayado)
En resumen, con este ejemplo usamos para el estilo tablas la primera
letra que encuentre en el orden de la familia Arial, verdana,
Helvetica, sans-serif en color blanco, luego todos los enlaces
aparecerán con la misma letra pero en color amarillo, por ultimo cuando se posa
en mouse del visitante sobre un enlace este cambiara a color naranja y pondrá
una línea subrayando el texto del enlace.
Finalmente vamos a identificar la función que tiene cada estilo del portal, así
podrás localizar fácilmente cual necesitas modificar para cambiar determinado
texto.
Lista de estilos en Blakord Portal
|
GENERAL |
|
body |
Esta determina los font en forma genérica, afecta cualquier font por
texto que por una u otra razón no este relacionado a un estilo del portal,
aquí también se hacen otros efectos generales como los colores de la barra
de desplazamiento. |
|
hr |
Este determina el estilo de las líneas de división usadas en el portal |
|
.BigF |
Algunos textos se resaltan con letras mas grandes, como títulos
generales etc. este estilo fija el tamaño de esa letra grande, solo debe
usarse el parámetro tamaño .BigF {font-size: 12pt} para que solo
afecte el tamaño manteniendo el resto del estilo original de la sección
donde se usa. |
|
.SmallF |
Igual que la anterior, pero en este caso se reduce el texto para algunas
zonas que cuentan con poco espacio disponible. |
|
.general |
Este estilo afecta los textos del portal que se encuentran fuera de las
tablas y ventanas. |
| .barra |
Afecta a la primera barra de textos situada arriba entre el tope y el
contenido, la ubicación o existencia de este depende del diseño del Skin. |
| .barra2 |
Afecta a la segunda barra de textos situada arriba entre el tope y el
contenido, la ubicación o existencia de este depende del diseño del Skin. |
| .tope |
Afecta a los textos que pudieran según el diseño del Skin se situados en
el tope de la Web, por ejemplo al usar un tope de texto y no el grafico en
los Skins bases. |
| .pie |
Afecta a los textos del final situados en el pie de pagina del portal. |
|
CONTENIDOS COLUMNA CENTRAL |
|
.tablas |
Afecta a las tablas de contenido, las de la columna central del portal. |
|
.tablasdestacada |
Igual que la anterior pero afecta solo a algunas tablas especiales
resaltadas como los índices de categorías arriba de los contenidos. |
|
.titulos |
Afecta a los títulos de las tablas de contenidos normales y destacadas. |
|
.destacados |
Afecta a algunas líneas de textos destacados usualmente usados como
subtítulos en las tablas de contenido y destacadas. |
|
COLUMNA LATERAL DERECHA |
|
.derechotitulo |
Este no tiene enlace, afecta a los títulos de ventanas de los
bloques laterales asignados a la derecha del portal. |
| .derecho |
Afecta a los textos de bloques de menú asignados a la columna derecha del
portal. |
| .auxiliar |
Afecta a todas las ventanas de los bloques salvo los de menús asignados
a la columna derecha del portal. |
| .externo |
Afecta a todos los bloques asignados a la derecha pero sin ventanas,
estos son los designados en el administrador de bloques como externos. |
|
COLUMNA LATERAL IZQUIERDA |
| .izquierdotitulo |
Este no tiene enlace, afecta a los títulos de ventanas de los
bloques laterales asignados a la izquierda del portal. |
| .izquierdo |
Afecta a los textos de bloques de menú asignados a la columna izquierda
del portal. |
| .auxiliarI |
Afecta a todas las ventanas de los bloques salvo los de menús asignados
a la columna derecha del portal. |
| .externoI |
Afecta a todos los bloques asignados a la izquierda pero sin ventanas,
estos son los designados en el administrador de bloques como externos. |
|
FOROS GENERAL |
| .fheader |
Afecta al titulo de las ventanas en cada tabla de los foros. |
| .fcat |
Afecta a la línea de titulos de categorías de los foros. |
| .pforosfNoLink |
Afecta a la pagina principal con el índice de todos los foros, estos
enlaces tienen un efecto de resalte sobre todo el renglón al posar el mouse,
el resalte también incluye en enlace respectivo, este resalte se modifica en
la administración de apariencia en el apartado de los foros y solo funciona
con MS Explorer, en el caso de otro navegador se mostrara el enlace normal a
cada foro, en el caso de usar este resalte que remplaza el enlace normal de
texto, este estilo fija el font a mostrar en ese texto que correspondería al
enlace. |
| .fforosNoLink |
Igual a la anterior pero este afecta a la pagina de cada foro con los
enlaces a los temas, también usa la misma regla con el sistema de resalte. |
| .ForumbottomEx |
Algunas paginas de los foros muestran en un pie de pagina propio donde
salen algunos botones, algún texto, este estilo afecta al texto de esa área. |
| .foro |
Afecta a los fonts de los foros que están fuera de las tablas de los
mismos en forma externa pero dentro de las ventanas de contenido del portal
que encierran los foros, si no se encierran los foros en 1 sola ventana
seria un sub equivalente para los foros del estilo .General del
portal. |
| .forop |
Afecta a los fonts de las ventanas PopUp de los foros, estas pueden
tener ventanas con una configuración de colores diferentes al foro por eso
tienen su propio estilo. |
| .foroM |
Afecta al menú de opciones al tope de los foros con enlaces como Crear
cuentas, mi perfil, miembros etc. en el caso que se usen en modo texto y no
grafico. |
| .pforos |
Afecta a los fonts dentro de las tablas en los foros pagina principal
con el índice de todos los foros. |
| .fforosf |
Afecta a los fonts dentro de las tablas en los foros pagina segundaria
de los foros con el índice de todos los temas de cada foro. |
|
FOROS PAGINAS DE MENSAJES |
| .ftopichd |
Este no tiene enlace, Afecta a la primera línea de cada post, la
que contiene el titulo de cada mensaje, fecha etc. |
| .ftopicft |
Afecta los fonts de tema, el primer tema original no las respuestas al
mismo. |
| .ftopic |
Afecta a los fonts en las respuestas de los temas, también en el pie de
pagina de cada foro, la ventana que contiene la leyenda de los iconos, salto
a otros foros etc. |
| .ftusr |
Afecta los fonts en la barra de usuarios de cada post dentro de los
temas, es la ventana a la izquierda de cada publicación la primera de dos
donde muestra el nombre de usuario, su avatar, ranking etc. |
| .ftusrd |
Afecta los fonts en la barra de usuarios de cada post dentro de los
temas, es la ventana a la izquierda de cada publicación la segunda de dos
donde muestra las medallas, fecha de registro, sexo, país, numero de post
etc. |
Para dudas adicionales no dejes de visitar los foros.
|
|
|
|
 |
|
 |
|
|
|
Usuarios registrados pueden publicar comentarios
|
|
|
Usuarios registrados pueden publicar Articulos
|
|
|
|
Info
|
|
Muy pronto al estar disponibles los nuevos foros esta Web sera actualizada en periodo de pruebas con el nuevo Draco portal, las URL a subdirectorios ya no serviran mas, por favor actualicen su URL a la raiz http://www.cdv3k.com en sus favoritos
 English Mode available soon in a new version Draco Portal, It will be opened the English page soon. 
Ayuda a mentener
este portal online
|
|
|
|
|
Al dia/To day
|
|
English
 Blakord Portal International announced. Please register on my english news mail list.
Español
Ahora para noticias usare una nueva lista de correos. Para recibir noticias actuales por favor registrate.
|
|
|
|
|
Productos Demo
|
|
|
|
|
Algunas Fotos
|
|
|
|
|
Opiniones
|
|
|
|
|
BKP Awards
Modificacion de clases CSS para fonts de Skins BKP
