Ubicación de las clases predefinidas:
Las clases predefinidas se encuentran en el archivo “general.css” que tiene la ruta que se menciona a continuación, considerando como “[root]” el folder de archivo de instalación de wordpress:
[root] /wp-content/themes/iecm/css/general.cssObjetivo:
El objetivo principal de estas clases predefinidas es permitir al administrador del sitio poder aplicar propiedades a los elementos que se encuentran dentro de los widgets, sin tener que aplicar o modificar código html o css, por medio de las herramientas del administrador.
Adicionalmente se pueden aplicar estas mismas propiedades dentro del código html que se pueda insertar tanto en los widgets: “custom html” como en el contenido de los posts.
Consideraciones del uso de las clases:
* Se pretende que el uso de las clases sea aplicado principalmente o únicamente en los casos o elementos descritos en esta guía. El uso de las clases fuera de lo que comprende esta guía es a discreción del administrador, editor, o usuarios del sitio.
El listado de clases lo podemos separar en 2 grupos
- Clases que generan una estructura de diseño para un grupo de elementos
- Clases que aplican un propiedad en específico a los próximos elementos
Clases que generan un estructura de diseño
Uso únicamente para contenido específico
Clase para listado de miniaturas de posts con color
Uso general para widgets y contenido en posts
Clase para listado de enlaces
Clase para listado de enlaces con estructura y colores
* Su uso se considera principalmente para los widgets: “Navigation Menu“.
Esta clase tiene el nombre de “coloredList” y debe estar en un elemento padre que contenga un listado no ordenado
<div class=”coloredList”>
<ul>
<li><a href=”#”>Enlace 1</a></li>
<li><a href=”#”>Enlace 2</a></li>
<li><a href=”#”>Enlace 3</a></li>
<li><a href=”#”>Enlace 4</a></li>
</ul>
</div>
Clase para acordeones
Clase para tablas
Clases para uso de enlaces que muestran u ocultan contenido
* Su uso se considera principalmente para los widgets creados para el tema:
- “Últimas 4 convocatorias”
- “Últimos 4 cursos y actividades”
En el siguiente código:
<div class=”abuelo”>
<div class=”padre”>
<div class=”openContent”>
<div class=”tab active” data-open=”openBlock1″>Enlace 1</div>
<div class=”tab” data-open=”openBlock2″>Enlace 2</div>
</div>
<div class=”openBlock1 opened openBlock”>Contenido default</div>
<div class=”openBlock2 openBlock”>Contenido oculto</div>
</div>
</div>
</div>
La clase “openContent” le permite a las etiquetas con clase “tab” contenidas dentro de este elemento el siguiente funcionamiento al dar clic sobre la etiqueta:
Este código permite a las etiquetas con clase “tab” mostradas en la primera parte del código determinar que elemento mostrar con el atributo data-open=”openBlock1″, y ocultando todo el demás contenido con etiqueta “openBlock“.
El valor del atributo data-open=”[valor]” debe corresponder a una clase en un elemento. Como se puede observar en la segunda parte del código, <div class=”openBlock1″> donde el valor de data-open en el primer elemento de la primera parte del código es openBlock1, y la clase del elemento en la segunda parte del código corresponde a una clase con el mismo nombre openBlock1.
Adicionalmente la etiqueta con clase “tab” que se le dió clic se queda con la clase “active” que la mostrará como el contenido seleccionado.
La clase “openBlock” oculta el elemento que la posee.
La clase “opened” sobre escribe el atributo anterior y muestra el elemento que la posee.
*Es muy importante notar que todo el conjunto de código esta dentro de 2 elementos “padre/abuelo” que en este ejemplo son “div” (esto corresponde a el código que arroja wordpress por default)
Lo que nos da como resultado el siguiente funcionamiento:
Clases que aplican propiedades específicas
Clases para texto de color
Estas clases cambian el color del texto del elemento donde se encucentran, y pasarán esta propiedad de color, a los elementos “hijos”.
*Puede suceder que el color no pase a los elementos hijos, debido a que un color tenga mayor prioridad
*Se coloca una estructura en columnas para hacer más eficiente el espacio.
A continuación los “Colores del sitio” pueden coincidir con los colores anteriores
A continuación los “Colores de las categorías” (pueden coincidir con los colores anteriores)
Clases para bloques con fondo de color
Estas clases cambian el color del texto del elemento donde se encucentran
*Se coloca una estructura en columnas para hacer más eficiente el espacio
A continuación los “Colores de fondo del sitio“
Clases para crear Títulos
Las etiquetas h1, h2, h3, h4, h5 son las encargadas de generar los títulos para todas las secciones. El uso de estas etiquetas está pensado para contenido de Posts. Siendo que la etiqueta h1 Se genera sola para los títulos de los posts.
El uso de esta clase está pensada para títulos creados en Widgets pero para que estas tengan un diseño se consideran las siguientes clases:
*Nota estas clases solo aplican para etiquetas que dentro de ellas contengan un h2.
Las clases pensadas para los títulos son las siguentes:
class=”bordeTitle-btm”
En el ejemplo se puede observar que por si sola la linea tiene un color “default”.
Para darle color al borde se debe de agregar una de las siguientes clases, y si se desea para complementar el borde con un color de texto (Ver “Clases para text de color”) también se puede agregar una clase de color de texto.
class=”bordeTitle-btm”
Con clase de color de texto
class=”bordeTitle-btm bordeT-Morado”
Los colores de borde para titulos son los siguientes:
class=”bordeTitle-btm bordeT-Morado-osc”
class=”bordeTitle-btm bordeT-Morado”
class=”bordeTitle-btm bordeT-Lila”
class=”bordeTitle-btm bordeT-Verde-osc”
class=”bordeTitle-btm bordeT-Verde”
class=”bordeTitle-btm bordeT-Cafe”
class=”bordeTitle-btm bordeT-Rosa”
class=”bordeTitle-btm bordeT-Gris-osc”
class=”bordeTitle-btm bordeT-Gris”
class=”bordeTitle-btm bordeT-Negro”
Clases para crear elementos con bordes redondeados
Las classes para crear bordes redondeados están pensadas para uso específico en elmentos “img” y “div” o widgets de wordpress. El uso de los bordes redondeados pueden limitar la visualización correcta de otras clases ya que tiene la propiedad de “overflow: hidden” que evita que elementos no se viusalicen fuera del espacio asignado del elemento.
Las classes para crear bordes redondeados son las siguientes:
Borde primario Arriba Izquierda
class=”roundedCornerBig-Top-Left”
class=”roundedCornerMid-Top-Left”
class=”roundedCornerSmall-Top-Left”
Borde primario Arriba Derecha
class=”roundedCornerBig-Top-Right”
class=”roundedCornerMid-Top-Right”
class=”roundedCornerSmall-Top-Right”
Borde primario Abajo Izquierda
class=”roundedCornerBig-Bottom-Left”
class=”roundedCornerMid-Bottom-Left”
Borde primario Abajo Derecha
class=”roundedCornerBig-Bottom-Right”
class=”roundedCornerMid-Bottom-Right”
Borde pequeño (Todas las esquinas iguales)
class=”roundedCornerSmall”
Clases para crear elementos con signo de más
Las classes para crear elementos con signo de “+” están pensadas para contenedores “div” ya que normalmente estos tienen una estructura cuadrada definida, con la propiedad “display: block” o “display: inline-block”.
*Es importante notar que aquí elementos que aplican la propiedad “Overflow: hidden” como las classes de bordes redondeados harían que este elemento no se vea correctamente
Las classes para crear elmentos con signo de “+” son:
Signo a la derecha
Signo a la izquierda
Clases para dar color a los signos
Clases y Etiquetas para Imagenes responsivas
Las classes para permitir a las imagenes ajustarse a su contenedor estan pensadadas para aplicarse a una etiqueta (“div” | “p”) que contiene dentro de si misma una etiqueta de imagen (“img”). O directamente sobre la etiqueta de Imagen (“img”).
Es importante notar que las imágenes para evitar que se rompan dentro del diseño actual del IECM deben tener por lo menos 640px de ancho por lo que se requiera de alto.
Las classes para crear elmentos que contengan imagenes responsivas son:
Ejemplo de imagen “No responsiva”
*Es importante notar que wordpress al insertar una imagen a través del editor pone classes en la etiqueta “img”, así como un atributo de alto (height=”[valor]”) y ancho (width=”[valor]”). Es necesario remover tanto las clases de la imagen como los atributos height y width, para asegurarnos que no se tenga un funcionamiento “extraño”.
*También es importante notar que el tema que desarrolló Mobiik para el IECM aplica clases automaticamente a las imagenes para que estas tengan los bordes redondeados siempre y cuando estas estén dentro del contenido del post. Se aplican diferentes tipos de bordes según el tamaño orginal de la imagen detectada. Y también se aplica un efecto responsivo cuando la imagen excede el tamaño de 633px.
Ejemplo de imagen “Responsiva”
*Esta imagen su tamaño original supera el de los limites especificados por ello automáticamente se convierte en una imagen responsiva. El código le asigna a este tipo de imagenes la clase “imRresponsive”, esta no necesita escribirse.