🌍
Español
Diferencias
Muestra las diferencias entre dos versiones de la página.
|
guia_del_usuario:pmf:personalizar_la_apariencia_css [2013/06/01 10:21] albertparera borrado |
— (actual) | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== Personalizar la apariencia (CSS) ====== | ||
| - | ===== Introducción ===== | ||
| - | |||
| - | El lenguaje de marcado hipertextual HTML y las reglas de estilo en cascada CSS son dos de las principales tecnologías para la creación de páginas Web. HTML proporciona la estructura de la página y CSS el diseño visual para una gran variedad de dispositivos. | ||
| - | |||
| - | El lenguaje basado en reglas de estilo en cascada (//Cascading Style Sheets //) es el responsable de aplicarle estilo a su galería. Permite personalizar los colores, los tipos y tamaños de fuentes, la posición de los elementos... | ||
| - | |||
| - | <WRAP info 65% center round>__//**Aprenda CSS**//__ | ||
| - | * [[http://learn.shayhowe.com/html-css|A Beginner’s Guide to HTML & CSS.]] Una web informativa para principiantes. | ||
| - | * [[http://www.w3.org/standards/webdesign/htmlcss|W3C]] W3C es el consorcio donde se definen los estándares para las aplicaciones web. Contiene la [[http://www.w3.org/2009/cheatsheet/|Cheat Sheet]], una herramienta de código abierto disponible gratuitamente para desarrolladores web que proporciona un acceso rápido a información útil a partir de una variedad de especificaciones publicadas por el W3C, un [[http://jigsaw.w3.org/css-validator/validator.html.en|validador en línea]] y mucho más. | ||
| - | * [[http://www.w3schools.com/css/|CSS School]], tutoriales interactivos muy bien realizados para verdaderos principiantes. Su lectura es totalmente recomendable: [[http://www.w3schools.com/css/css_intro.asp|Introducción]] [[http://www.w3schools.com/css/css_syntax.asp|Sintaxis]] y selectores [[http://www.w3schools.com/css/css_id_class.asp|id y class]] | ||
| - | </WRAP> | ||
| - | ===== Requisitos ===== | ||
| - | |||
| - | Dependiendo de tu navegador: | ||
| - | |||
| - | * **Firefox**: instalar la extensión Firebug. pulsar F12, o clic derecho para abrir el menú contextual y seleccionar "Inspeccionar elemento". | ||
| - | * **Internet Explorer**: pulsar "F12". | ||
| - | * **Opera**: utilizar Opera Dragonfly presionando Ctrl + May + I para Pc, o ⌘ + ⌥ + I para Mac. Puedes también hacer clic derecho para abrir el menú contextual y seleccionar "Inspeccionar elemento". | ||
| - | * **Google Chrome**: pulsar "F12", y el icono lupa para inspeccionar un elemento. | ||
| - | * **Safari**: ir a Editar->Preferencias->Avanzadas y seleccionar "Activar menú de desarrolladores". Aparecerá un nuevo menú entre Favoritos y Ventanas. Selecciona "Mostrar inspector web". | ||
| - | ===== Localizar selectores ===== | ||
| - | |||
| - | Cada elemento HTML está accesible mediante CSS por medio de un selector. Para entenderlo mejor, puede leerse | ||
| - | [[http://www.w3schools.com/css/css_syntax.asp|Syntax]] and [[http://www.w3schools.com/css/css_id_class.asp|Id and Class]]. | ||
| - | |||
| - | Este es un ejemplo de cómo puede accederse y modificarse de forma fácil al código html/css de cualquier página web. Con Firebug, aparece una nueva ventana en Firefox (ver **Fig.01**). | ||
| - | |||
| - | <WRAP smaller centeralign> | ||
| - | {{ :guia_del_usuario:pmf:03-05-2012_20-37-49.jpg?nolink& |Fig.01 Menú Firebug}}\\ | ||
| - | |||
| - | //**Fig.01** Menú Firebug// | ||
| - | </WRAP> | ||
| - | |||
| - | \\ | ||
| - | **Fig.01** ilusta la pestaña HTML donde puede visualizarse el contenido de cualquier página web. Puede verse el código interpretado por el navegador. | ||
| - | |||
| - | La ventana separa dos zonas: | ||
| - | - La primera (izquierda), contiene el código HTML.\\ <wrap info>__Info__ :</wrap> La zona destacada en azul es la que correspondiente a la señalada por el puntero del ratón. | ||
| - | - La segunda (derecha) muestra todas las reglas CSS aplicadas a cada elemento HTML seleccionado. Muestra también el selector usado para aplicar las propiedades en cada elemento html, y dónde se ubica el código -en qué archivo y en qué líneas-. Las propiedades pueden cambirse al vuelo clicando sobre el valor y/o la propiedad. Dichos cambios son aplicados instantáneamente sin necesidad de refrescar la página. | ||
| - | ===== Cambiar las propiedades CSS ===== | ||
| - | |||
| - | Tal y como acabamos de ver, las propiedades puede cambiarse sobre la marcha, deshabilitarlas e incluso crear otras nuevas. | ||
| - | ===== Guardar los cambios ===== | ||
| - | |||
| - | > ¿Alguien del foro te ha proporcionado una porción de código CSS?\\ | ||
| - | > ¿Has estado jugando y trasteando con CSS y quieres salvar los cambios de forma permanente?\\ | ||
| - | |||
| - | Te habrás dado cuenta que Firebug no guarda los cambios que realizas. Si actualizas la página comprobarás que todos los cambios realizados se pierden.\\ | ||
| - | <wrap important>Sigue estos pasos para conservar tus cambios de forma permanente.</wrap> | ||
| - | |||
| - | |||
| - | Ir a **[ Administración >> Plugins >> LocalFiles Editor]]((Debe estar activado!)) >> pestaña "//CSS//" ]**\\ | ||
| - | En el menú desplegable puedes elegir entre ''local rules.css'' y todos los temas que tengas activados en tu galería. | ||
| - | |||
| - | * ''local-rules.css'' es un archivo que Piwigo carga previamente indistintamente del tema que tengas por defecto. Si tu CSS requiere cambios que afecte a todos tus temas, introduce tu código CSS aquí. | ||
| - | * Si seleccionas un tema concreto en el desplegable, el código CSS que hayas introducido se aplicará exclusivamente a ese tema. En la mayoría de los casos, es recomendable aplicar código CSS a un sólo tema.\\<wrap info>__Info__ :</wrap>Para un tema pader (parent theme), su archivo *-rules.css se cargará para sí mismo y para sus temas hijos, así que un tema hijo puede tener cargados varios archivos local-rules. | ||
| - | |||
| - | Ahora sólo tienes que copiar/pegar tu código CSS y guardarlo. Los efectos surtirán efecto de inmediato: si no, intenta actualizar la caché de tu navegador y depurarlo en Purgar plantillas compiladas en ** [Herramientas >> Mantenimiento>> ] **\\ | ||
| - | |||
| - | <WRAP center round info 60%> | ||
| - | Si necesita añadir comentarios para recordar lo que hace el código, basta con añadir dos barras al principio de la línea para evitar que ésta sea interpretada. | ||
| - | |||
| - | <code css> | ||
| - | // Esto oculta el menú de mi galería | ||
| - | #menubar { | ||
| - | display: none; | ||
| - | } | ||
| - | </code> | ||
| - | </WRAP> | ||
| - | |||
| - | ===== Preguntas frecuentes ===== | ||
| - | |||
| - | === ¿Es necesario copiar/pegar todo el contenido de theme.css? === | ||
| - | |||
| - | ¡En absoluto!\\ | ||
| - | El archivo CSS *-rules.css sobreescribirá las propiedades descritas frente al archivo css predeterminado así como el theme.css del tema que hayas modificado. | ||
| - | |||
| - | === ¿Dónde se guardan los cambios que realizo? === | ||
| - | |||
| - | Los archivos CSS generados por LocalFiles Editor se encuentran en: | ||
| - | ./piwigo/local/css/ | ||
| - | They are named *-rules.css with * is the name of a theme. | ||