🌍
Español
Muestra las diferencias entre dos versiones de la página.
guia:preguntas_mas_frecuentes:personalizar_la_apariencia_css [2013/06/01 10:10] albertparera creado |
guia:preguntas_mas_frecuentes:personalizar_la_apariencia_css [2013/06/01 10:11] (actual) albertparera |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | Personalizar la apariencia (CSS) | + | ====== 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. |