Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

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.
 
Ir hasta arriba
guia/preguntas_mas_frecuentes/personalizar_la_apariencia_css.txt · Última modificación: 2013/06/01 10:11 por albertparera
 
 
github twitter newsletter Donar Piwigo.org © 2002-2024 · Contacto