{"id":404,"date":"2018-03-07T22:20:45","date_gmt":"2018-03-07T21:20:45","guid":{"rendered":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/?p=404"},"modified":"2020-08-11T21:40:27","modified_gmt":"2020-08-11T19:40:27","slug":"personalizacion-de-los-sitios-mediante-css","status":"publish","type":"post","link":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/","title":{"rendered":"Personalizaci\u00f3n del tema mediante CSS"},"content":{"rendered":"\n<h2>1. Qu\u00e9 es el c\u00f3digo CSS<\/h2>\n\n\n\n<p>Todos los sitios web creados mediante el lenguaje de marcado <a href=\"https:\/\/es.wikipedia.org\/wiki\/HTML\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a> est\u00e1n basados en un principio esencial, que es la separaci\u00f3n del contenido de su presentaci\u00f3n. Es decir, por una parte se define la estructura y el contenido de los documentos, mediante el c\u00f3digo HTML propiamente dicho, mientras que su apariencia se controla mediante ficheros externos que contienen la definici\u00f3n de los estilos visuales, expresados en un c\u00f3digo especial, denominado \u00abhojas de estilo en cascada\u00bb, aunque se conoce habitualmente por el acr\u00f3nimo&nbsp;<a href=\"https:\/\/es.wikipedia.org\/wiki\/Hoja_de_estilos_en_cascada\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a>.<\/p>\n\n\n\n<p>No es prop\u00f3sito de este curso abordar en profundidad el lenguaje CSS, ya que su explicaci\u00f3n y pr\u00e1ctica exigir\u00edan mucho m\u00e1s tiempo del que disponemos. Sin embargo, intentaremos aproximarnos a su conocimiento mediante un enfoque pr\u00e1ctico, a trav\u00e9s de algunos ejemplos que permitir\u00e1n a alumnos y alumnas aprender las t\u00e9cnicas necesarias para manipularlo y al mismo tiempo hacerse una idea cabal de las posibilidades que ofrece para personalizar los sitios web de los centros educativos.<\/p>\n\n\n\n<h2>2. Manipular el c\u00f3digo CSS de forma segura y eficiente<\/h2>\n\n\n\n<p>WordPress incorpora un editor interno que permite modificar los ficheros de los temas directamente, desde el propio interfaz de administraci\u00f3n de WordPress. Sin embargo, en las instalaciones de WordPress del PNTE este procedimiento est\u00e1 desactivado, no solo por motivos de seguridad, sino para evitar que la manipulaci\u00f3n del c\u00f3digo CSS o PHP haga imposible el mantenimiento futuro de los sitios web. En efecto, si el c\u00f3digo de los temas se modifica directamente, sin ninguna clase de control y sin posibilidad de diferenciar el c\u00f3digo original de sus modificaciones, es imposible para los servicios del PNTE realizar las actualizaciones necesarias y prestar el adecuado soporte a los responsables de los sitios web entonces.<\/p>\n\n\n\n<p>\u00bfQu\u00e9 hacer entonces si se quiere personalizar la apariencia de un sitio web m\u00e1s all\u00e1 de las opciones que ofrece el tema seleccionado? La respuesta la proporciona el propio WordPress, ya que desde su <a href=\"https:\/\/wordpress.org\/news\/2016\/12\/vaughan\/\" target=\"_blank\" rel=\"noopener noreferrer\">versi\u00f3n 4.7<\/a> dispone de una funci\u00f3n muy potente para a\u00f1adir estilos CSS desde el personalizador. El procedimiento no puede ser m\u00e1s sencillo: hay que ir al men\u00fa <em>Apariencia<\/em> &gt; <em>Personalizar<\/em> &gt; <em>CSS adicional<\/em> (la \u00faltima opci\u00f3n del personalizador), y escribir en el espacio disponible las reglas de CSS que en cada caso interesen.&nbsp;Las ventajas de hacerlo as\u00ed son indiscutibles:<\/p>\n\n\n\n<ol><li>Los estilos personalizados tienen prioridad sobre cualesquiera otros, ya que son los \u00faltimos que lee el navegador durante el proceso de carga de un sitio web. Por tanto, permiten alterar el comportamiento del c\u00f3digo CSS original sin anularlo o borrarlo.<\/li><li>Todos los estilos CSS definidos desde el personalizador de WordPress quedan anotados en un mismo lugar, lo cual permite revisarlos una y otra vez, copiarlos y pegarlos desde y hacia otros dispositivos, desactivarlos temporal o definitivamente, etc.<\/li><li>Los fallos que se puedan cometer al editar el CSS son muy f\u00e1ciles de reparar, ya que los estilos personalizados se pueden desactivar con gran facilidad. Si un estilo que hemos definido por nuestra cuenta afea o arruina el aspecto del sitio web, basta con comentarlo o borrarlo y comenzar de nuevo.<\/li><li>La funci\u00f3n de CSS adicional del personalizador de WordPress cuenta con un validador de c\u00f3digo CSS, que previene la comisi\u00f3n de errores y permite autocompletar la definici\u00f3n de las clases, los atributos, etc.<\/li><li>La t\u00e9cnica de modificaci\u00f3n de los estilos CSS desde el personalizador sirve para todos los temas y todas las circunstancias; esto significa que los estilos de cualquier tema para WordPress se pueden personalizar exactamente de la misma manera. Conviene tener en cuenta, no obstante, que si se cambia de tema despu\u00e9s de haber definido estilos personalizados, dichos estilos pueden no tener ning\u00fan efecto sobre el nuevo tema, o incluso entrar en conflicto con \u00e9l.<\/li><\/ol>\n\n\n\n<p>A continuaci\u00f3n incluimos un v\u00eddeo que detalla el procedimiento de creaci\u00f3n y edici\u00f3n de estilos CSS mediante el personalizador de WordPress:<\/p>\n\n\n<div class=\"wptuts-video-container\"><iframe src=\"\/\/www.youtube.com\/embed\/ovuH0aK7K2w\" height=\"240\" width=\"320\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/div>\r\n    <!--.wptuts-video-container-->\n\n\n\n<p>La \u00fanica dificultad seria que plantea la utilizaci\u00f3n de esta t\u00e9cnica deriva de la propia naturaleza del c\u00f3digo CSS, que tiene unas reglas y una sintaxis que es preciso conocer y practicar, lo cual puede desanimar a algunos usuarios. Por otro lado, el c\u00f3digo CSS est\u00e1 oculto a la vista en condiciones normales, lo cual supone una dificultad adicional, ya que no es posible modificar un estilo si no hay forma de averiguar qu\u00e9 estilo se debe modificar. Afortunadamente, los navegadores modernos ofrecen una funci\u00f3n de inspecci\u00f3n de c\u00f3digo que se puede activar haciendo clic con el bot\u00f3n derecho sobre cualquier zona de la p\u00e1gina web, y seleccionando a continuaci\u00f3n la opci\u00f3n \u00abInspeccionar\u00bb (Google Chrome) o \u00abInspeccionar elemento\u00bb (Firefox). Tanto en el v\u00eddeo que acabamos de incluir como en el que ofrecemos a continuaci\u00f3n se explica c\u00f3mo activar esta funci\u00f3n e identificar los estilos CSS que en cada caso deban modificarse. Aconsejamos a los alumnos y alumnas del curso que vean ambos videotutoriales con la debida atenci\u00f3n.<\/p>\n\n\n<div class=\"wptuts-video-container\"><iframe src=\"\/\/www.youtube.com\/embed\/LzQW5QOSkMI\" height=\"240\" width=\"320\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe><\/div>\r\n    <!--.wptuts-video-container-->\n\n\n\n<h2>3. Ejemplos de estilos CSS para realizar pr\u00e1cticas<\/h2>\n\n\n\n<p>A continuaci\u00f3n proponemos una serie de sencillos ejemplos de estilos CSS personalizados que se pueden probar en los sitios de pr\u00e1ctica que han elaborado los alumnos y alumnas de este curso. Es posible que no todos los estilos sirvan para todos los temas, pero esa aparente desventaja es en realidad beneficiosa, ya que nos permitir\u00e1 ir comprendiendo la naturaleza del c\u00f3digo CSS y sus infinitas variaciones. Varios de entre los ejemplos que figuran a continuaci\u00f3n se utilizan en este mismo sitio web:<\/p>\n\n\n\n<p>1. Estilo para ocultar el t\u00edtulo y la descripci\u00f3n del sitio. Se utiliza en este mismo sitio para evitar que aparezcan en la parte superior derecha de la cabecera el nombre del sitio y su descripci\u00f3n, ya que, especialmente en dispositivos m\u00f3viles, su aspecto es poco satisfactorio.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.site-title, .site-description {\ndisplay:none;\n}<\/pre>\n\n\n\n<p>2. Estilo para conseguir que toda el \u00e1rea del pie de p\u00e1gina tenga un fondo de color p\u00farpura, con texto y enlaces de color blanco. Se utiliza en este mismo sitio web. Los c\u00f3digos o nombres de los colores en HTML pueden obtenerse en p\u00e1ginas como <a href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\" target=\"_blank\" rel=\"noopener noreferrer\">HTML Color Picker<\/a> o&nbsp;<a href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\" target=\"_blank\" rel=\"noopener noreferrer\">HTML Color Names<\/a>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.site-footer, .site-footer a {\nbackground-color:#660033;\ncolor: white;\n}<\/pre>\n\n\n\n<p>3. Estilo para que los p\u00e1rrafos de primer nivel vayan en color rojo. Este estilo afecta a todos los titulares de primer nivel del sitio en el que se defina.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">h1 {\ncolor:red;\n}<\/pre>\n\n\n\n<p>El estilo se puede precisar para que solo afecte a los titulares de determinadas p\u00e1ginas; por ejemplo, si solo queremos aplicarlo a una entrada, cuyo ID es el \u00ab1\u00bb, utilizar\u00edamos el siguiente c\u00f3digo<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.postid-1 h1 {\ncolor:red;\n}<\/pre>\n\n\n\n<p>4. Estilo para poner un borde s\u00f3lido de 2 pixels y color negro a las entradas fijas o \u00absticky posts\u00bb. Este estilo se utiliza en este mismo sitio web, para destacar las entradas marcadas como fijas.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.sticky {\nborder: 2px solid #000000;\n}<\/pre>\n\n\n\n<p>5. Estilos para los widgets del pie de p\u00e1gina, ambos aplicados en este mismo sitio web. El primero de ellos sirve centrar, subrayar y dar \u00e9nfasis a los t\u00edtulos de los widgets. El segundo, para centrar el contenido de esos mismos widgets.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.footer-widgets .widget-title {\ntext-align: center;\ntext-decoration: underline;\nfont-weight: 900;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.footer-widget-area{\ntext-align: center;\n}<\/pre>\n\n\n\n<p>Un estilo semejante, aunque algo m\u00e1s complejo, nos sirve para centrar todos los widgets de entradas destacadas y de p\u00e1ginas destacadas de la p\u00e1gina de inicio de este mismo sitio web, que tiene el ID 62.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.page-id-62 #featured-post-3, #featured-post-4, #featured-post-5, #media_image-3, #media_image-4, #media_image-5 {\ntext-align:center;\n}<\/pre>\n\n\n\n<p>6. Estilos para eliminar el subrayado de los enlaces; de acuerdo con el primer estilo, el subrayado solo aparecer\u00e1 cuando se pase el rat\u00f3n por encima. Se ha aplicado a este mismo sitio web, para as\u00ed evitar que todos los enlaces aparezcan subrayados por defecto; el segundo estilo sirve para que el subrayado solo se aplique cuando se pasa el rat\u00f3n por encima.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">a {\ntext-decoration: none;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">a:hover {\ntext-decoration: underline;\n}<\/pre>\n\n\n\n<p>7. Estilo para conseguir que la letra negrita tenga m\u00e1s intensidad de lo normal. Lo hemos activado en este mismo sitio web porque originalmente la letra en negrita apenas se distingu\u00eda de la letra normal.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">strong {\nfont-weight: 900;\n}<\/pre>\n\n\n\n<p>Si se quiere que la negrita aparezca, adem\u00e1s, en color azul medianoche, habr\u00eda que utilizar este otro estilo:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">strong {\nfont-weight: 900;\ncolor:midnightblue;\n}<\/pre>\n\n\n\n<p>8. Estilo para crear una caja con bordes rojos y un fondo tambi\u00e9n rojo, pero de un matiz diferente, a modo de aviso con informaci\u00f3n importante. Para que pueda funcionar, hay que encerrar el texto en una etiqueta &lt;div&gt;, y aplicarle la clase .caja-texto-roja. V\u00e9ase&nbsp;<a href=\"https:\/\/www.studiopress.com\/colored-content-boxes-buttons\/\" target=\"_blank\" rel=\"noopener noreferrer\">Spruce Up Your Genesis-Powered Website with Content Boxes and Color Buttons<\/a>.&nbsp;El ejemplo de aplicaci\u00f3n de este widget puede verse en el \u00e1rea lateral derecha de esta misma p\u00e1gina:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.caja-texto-roja {\nmargin: 0 0 25px;\noverflow: hidden;\npadding: 20px;\nbackground-color: #f9dbdb;\nborder: 1px solid #e9b3b3;\n}<\/pre>\n\n\n\n<p>9. Estilos para modificar la apariencia de un widget individual, cuyo ID es \u00abtext-18\u00bb. Han sido adaptados a partir de los que se describen en el art\u00edculo <a href=\"https:\/\/wpsites.net\/web-design\/style-widgets-individually-beginners-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">Style Widgets Individually \u2013 Beginners Guide<\/a>.&nbsp;El primer estilo afecta al contenido del widget, y el segundo al t\u00edtulo. Un ejemplo de aplicaci\u00f3n de ambos estilo puede verse en el widget que aparece en el \u00e1rea lateral derecha de esta misma p\u00e1gina:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#text-18 {\nbackground: #699135;\ncolor: white;\npadding: 15px;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#text-18 .widget-title {\nfont-size: 2.7rem;\ncolor: black;\n}<\/pre>\n\n\n\n<p>10. Estilo para modificar el aspecto de la barra lateral derecha del tema, cuyo ID es \u00abgenesis-sidebar-primary\u00bb. Este estilo solo afecta a la entrada con el ID 404.&nbsp;El ejemplo de aplicaci\u00f3n de este widget puede verse en el \u00e1rea lateral derecha de esta misma p\u00e1gina:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.postid-404 #genesis-sidebar-primary {\nbackground-color: azure;\nborder: solid 1px aquamarine;\npadding: 10px;\n}<\/pre>\n\n\n\n<p>11.&nbsp;Estilo para conseguir que los listados de entradas generados por el plugin <a href=\"https:\/\/wordpress.org\/plugins\/display-posts-shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">Display Posts Shortcode<\/a> tengan exactamente la misma apariencia que los dem\u00e1s listados creados por los widgets est\u00e1ndar de WordPress. El efecto puede verse en la barra lateral de esta misma p\u00e1gina, en el widget titulado \u00abContenido de la cuarta sesi\u00f3n\u00bb<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.widget ol.display-posts-listing &amp;gt; li {\nmargin-bottom: 0.5em;\npadding-bottom: 0.5em;\npadding-left: 0;\ntext-indent: initial;\n}<\/pre>\n\n\n\n<p>12. Estilo para conseguir que los listados de entradas generados por el plugin <a href=\"https:\/\/wordpress.org\/plugins\/list-categories\/\" target=\"_blank\" rel=\"noopener noreferrer\">List Categories<\/a> tengan exactamente la misma apariencia que los dem\u00e1s listados creados por los widgets est\u00e1ndar de WordPress. El efecto puede verse en la barra lateral de esta misma p\u00e1gina, en el widget titulado \u00abTodas las sesiones del curso\u00bb.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.widget li.cat-item {\nmargin-bottom: 0.5em;\npadding-bottom: 0.5em;\n}<\/pre>\n\n\n\n<h2>4. Consejos para editar el CSS desde el personalizador<\/h2>\n\n\n\n<p>Cuando se vayan a editar los estilos CSS desde el personalizador de temas de WordPress, conviene tener en cuenta algunos consejos b\u00e1sicos:<\/p>\n\n\n\n<ol><li>Se debe actuar con cuidado y paso a paso, yendo siempre de lo m\u00e1s f\u00e1cil y conocido a lo m\u00e1s complejo. No conviene definir muchos estilos a la vez, porque eso puede dar lugar a confusi\u00f3n y dificultar la identificaci\u00f3n de los errores.<\/li><li>No hay que definir muchos estilos solo porque resulte f\u00e1cil crearlos, o porque \u00abquedan bonitos\u00bb. Los estilos deben tener un claro prop\u00f3sito funcional y no deben ser utilizados como mero adorno.<\/li><li>Cada vez que se crea un estilo, hay que a\u00f1adirle una l\u00ednea de comentarios, para poder identificar posteriormente lo que se ha hecho. En CSS, los comentarios se definen as\u00ed: \/* Esto es un comentario *\/.<\/li><li>Para poder avanzar en el conocimiento del CSS, es necesario investigar, buscar informaci\u00f3n, y hacer pruebas. En Internet hay una verdadera multitud de tutoriales sobre CSS y una cantidad interminable de ejemplos, tanto para los temas de la familia Genesis, como para otros temas.<\/li><\/ol>\n\n\n\n<h2>5. Recursos \u00fatiles sobre CSS<\/h2>\n\n\n\n<p>A continuaci\u00f3n incluimos algunos recursos online que ser\u00e1n muy \u00fatiles a todas las personas interesadas en aprender CSS y utilizar estilos para mejorar la apariencia y funcionalidad de sus sitios web:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/codemyui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CodeMyUI<\/a>: repositorio especializado en estilos para construir y mejorar interfaces de usuario.<\/li><li><a href=\"https:\/\/codepad.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">Codepad<\/a>: estilos CSS, scripts en distintos lenguajes de programaci\u00f3n, etc.<\/li><li><a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Codepen<\/a>: un enorme repositorio en el que publicar y compartir scripts en diversos lenguajes, CSS incluido.<\/li><li><a href=\"http:\/\/cssdeck.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSSDeck<\/a>: otro gran repositorio, en esta ocasi\u00f3n exclusivamente de CSS.<\/li><li><a href=\"http:\/\/www.cssflow.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSSFlow<\/a>: no solo contiene estilos en CSS, sino incluso interfaces de usuario completos (estos \u00faltimos de pago).<\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Tricks<\/a>: muchos trucos y \u00absnippets\u00bb, aunque de un nivel bastante avanzado.<\/li><li><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Tutorial de W3Shools<\/a>: una aut\u00e9ntica enciclopedia del CSS, con todo tipo de ejemplos.<\/li><li><a href=\"http:\/\/www.csszengarden.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Zen Garden<\/a>: bell\u00edsimos dise\u00f1os en CSS. En la mayor\u00eda de los casos son muy complejos, pero pueden servir como fuente de inspiraci\u00f3n.<\/li><li><a href=\"http:\/\/littlesnippets.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Little Snippets<\/a>: estupendos y muy elegantes snippets en CSS.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e9cnica para personalizar los estilos CSS del sitio web mediante el personalizador de temas de WordPress y la funci\u00f3n de CSS adicional.<\/p>\n","protected":false},"author":1,"featured_media":410,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"content-sidebar"},"categories":[7],"tags":[123,122,91,114],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Personalizaci\u00f3n del tema mediante CSS - Curso de WordPress 2018<\/title>\n<meta name=\"description\" content=\"Personalizaci\u00f3n del tema mediante CSS. T\u00e9cnica para personalizar los estilos CSS del sitio web mediante el personalizador de temas de WordPress y la funci\u00f3n de CSS adicional.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Personalizaci\u00f3n del tema mediante CSS - Curso de WordPress 2018\" \/>\n<meta property=\"og:description\" content=\"Personalizaci\u00f3n del tema mediante CSS. T\u00e9cnica para personalizar los estilos CSS del sitio web mediante el personalizador de temas de WordPress y la funci\u00f3n de CSS adicional.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Curso de WordPress 2018\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-07T21:20:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-11T19:40:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-content\/uploads\/2018\/03\/codigo-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1067\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Administrador\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Administrador\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/\",\"url\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/\",\"name\":\"Personalizaci\u00f3n del tema mediante CSS - Curso de WordPress 2018\",\"isPartOf\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#website\"},\"datePublished\":\"2018-03-07T21:20:45+00:00\",\"dateModified\":\"2020-08-11T19:40:27+00:00\",\"author\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/66915292b50e141a7c1d01acb5eb0f84\"},\"description\":\"Personalizaci\u00f3n del tema mediante CSS. T\u00e9cnica para personalizar los estilos CSS del sitio web mediante el personalizador de temas de WordPress y la funci\u00f3n de CSS adicional.\",\"breadcrumb\":{\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Personalizaci\u00f3n del tema mediante CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#website\",\"url\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/\",\"name\":\"Curso de WordPress 2018\",\"description\":\"Curso avanzado sobre WordPress en el CAP de Pamplona\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/66915292b50e141a7c1d01acb5eb0f84\",\"name\":\"Administrador\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g\",\"caption\":\"Administrador\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Personalizaci\u00f3n del tema mediante CSS - Curso de WordPress 2018","description":"Personalizaci\u00f3n del tema mediante CSS. T\u00e9cnica para personalizar los estilos CSS del sitio web mediante el personalizador de temas de WordPress y la funci\u00f3n de CSS adicional.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/","og_locale":"es_ES","og_type":"article","og_title":"Personalizaci\u00f3n del tema mediante CSS - Curso de WordPress 2018","og_description":"Personalizaci\u00f3n del tema mediante CSS. T\u00e9cnica para personalizar los estilos CSS del sitio web mediante el personalizador de temas de WordPress y la funci\u00f3n de CSS adicional.","og_url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/","og_site_name":"Curso de WordPress 2018","article_published_time":"2018-03-07T21:20:45+00:00","article_modified_time":"2020-08-11T19:40:27+00:00","og_image":[{"width":1600,"height":1067,"url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-content\/uploads\/2018\/03\/codigo-css.jpg","type":"image\/jpeg"}],"author":"Administrador","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Administrador","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/","url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/","name":"Personalizaci\u00f3n del tema mediante CSS - Curso de WordPress 2018","isPartOf":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#website"},"datePublished":"2018-03-07T21:20:45+00:00","dateModified":"2020-08-11T19:40:27+00:00","author":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/66915292b50e141a7c1d01acb5eb0f84"},"description":"Personalizaci\u00f3n del tema mediante CSS. T\u00e9cnica para personalizar los estilos CSS del sitio web mediante el personalizador de temas de WordPress y la funci\u00f3n de CSS adicional.","breadcrumb":{"@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/personalizacion-de-los-sitios-mediante-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/"},{"@type":"ListItem","position":2,"name":"Personalizaci\u00f3n del tema mediante CSS"}]},{"@type":"WebSite","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#website","url":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/","name":"Curso de WordPress 2018","description":"Curso avanzado sobre WordPress en el CAP de Pamplona","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/66915292b50e141a7c1d01acb5eb0f84","name":"Administrador","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/636dfeeef5d663d0784baecccc697b02?s=96&d=identicon&r=g","caption":"Administrador"}}]}},"_links":{"self":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/posts\/404"}],"collection":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/comments?post=404"}],"version-history":[{"count":0,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/posts\/404\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/media\/410"}],"wp:attachment":[{"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/media?parent=404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/categories?post=404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2018\/wp-json\/wp\/v2\/tags?post=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}