{"id":72,"date":"2026-05-14T09:00:10","date_gmt":"2026-05-14T12:00:10","guid":{"rendered":"https:\/\/www.portanova.com.br\/?page_id=72"},"modified":"2026-05-21T11:21:26","modified_gmt":"2026-05-21T14:21:26","slug":"css-style-lists","status":"publish","type":"post","link":"https:\/\/www.portanova.com.br\/notebook\/css-style-lists\/","title":{"rendered":"[CSS] Estilizando as Listas e as Cita\u00e7\u00f5es"},"content":{"rendered":"<h2>\ud83d\udccb Estilizando listas e cita\u00e7\u00f5es para melhorar a leitura<\/h2>\n<p>Listas e cita\u00e7\u00f5es s\u00e3o elementos muito comuns em posts e p\u00e1ginas. Por padr\u00e3o, o WordPress (e a maioria dos temas) aplica estilos simples. Nesta aula, voc\u00ea vai aprender a deixar esses elementos mais bonitos, alinhados com a identidade visual do seu site.<\/p>\n<hr \/>\n<h3>\ud83c\udfaf O que vamos estilizar<\/h3>\n<ul>\n<li><strong>Listas n\u00e3o ordenadas<\/strong> (<code>ul<\/code>) \u2013 marcadores comuns (\u25cf, \u25cb, \u25a0).<\/li>\n<li><strong>Listas ordenadas<\/strong> (<code>ol<\/code>) \u2013 numerais (1, 2, 3) ou letras.<\/li>\n<li><strong>Cita\u00e7\u00f5es<\/strong> (<code>blockquote<\/code>) \u2013 trechos destacados de textos externos ou depoimentos.<\/li>\n<\/ul>\n<hr \/>\n<h3>\ud83d\udccc M\u00e9todo 1: Personalizar (Customizer) \u2013 Prioridade m\u00e1xima<\/h3>\n<p><strong>Passo a passo:<\/strong><\/p>\n<ol>\n<li>No painel do WordPress, v\u00e1 em <strong>Apar\u00eancia \u2192 Personalizar<\/strong>.<\/li>\n<li>Clique em <strong>&#8220;CSS Adicional&#8221;<\/strong>.<\/li>\n<li>Cole o c\u00f3digo abaixo (ou partes dele) e ajuste os valores como desejar.<\/li>\n<li>Publique.<\/li>\n<\/ol>\n<pre><code>\/* === ESTILOS PARA LISTAS === *\/\r\nul, ol {\r\n    margin: 0 0 1.5em 1.5em;   \/* espa\u00e7amento externo *\/\r\n    padding: 0;\r\n    line-height: 1.6;\r\n}\r\n\r\nul li, ol li {\r\n    margin-bottom: 0.5em;       \/* espa\u00e7amento entre itens *\/\r\n}\r\n\r\n\/* Marcadores personalizados para listas n\u00e3o ordenadas *\/\r\nul {\r\n    list-style-type: square;    \/* pode ser disc, circle, square, none *\/\r\n}\r\n\r\n\/* Numerais personalizados para listas ordenadas *\/\r\nol {\r\n    list-style-type: decimal;   \/* decimal, lower-latin, lower-roman, etc. *\/\r\n}\r\n\r\n\/* === ESTILOS PARA CITA\u00c7\u00d5ES === *\/\r\nblockquote {\r\n    margin: 1.5em 0;\r\n    padding: 0 0 0 2em;\r\n    border-left: 4px solid #0073aa;\r\n    font-style: italic;\r\n    color: #333;\r\n    line-height: 1.6;\r\n}\r\n\r\nblockquote p {\r\n    margin-bottom: 0.5em;\r\n}\r\n\r\nblockquote cite {\r\n    display: block;\r\n    margin-top: 0.5em;\r\n    font-size: 0.9em;\r\n    color: #666;\r\n    font-style: normal;\r\n}\r\n<\/code><\/pre>\n<hr \/>\n<h3>\ud83d\udccc M\u00e9todo 2: MU-Plugin (solu\u00e7\u00e3o definitiva, independente de tema)<\/h3>\n<p>Crie um arquivo na pasta <code>\/wp-content\/mu-plugins\/<\/code> chamado <strong><code>estilos-listas-citacoes.php<\/code><\/strong> com o seguinte conte\u00fado:<\/p>\n<pre><code>&lt;?php\r\n\/**\r\n * Plugin Name: Estilos para Listas e Cita\u00e7\u00f5es\r\n * Description: Aplica estilos personalizados a ul, ol e blockquote.\r\n * Version: 1.0\r\n * Author: Reinaldo (Neodoor)\r\n *\/\r\n\r\nif ( ! defined( 'ABSPATH' ) ) exit;\r\n\r\nadd_action( 'wp_head', function() {\r\n    echo '&lt;style&gt;\r\n        ul, ol {\r\n            margin: 0 0 1.5em 1.5em;\r\n            padding: 0;\r\n            line-height: 1.6;\r\n        }\r\n        ul li, ol li {\r\n            margin-bottom: 0.5em;\r\n        }\r\n        ul {\r\n            list-style-type: square;\r\n        }\r\n        ol {\r\n            list-style-type: decimal;\r\n        }\r\n        blockquote {\r\n            margin: 1.5em 0;\r\n            padding: 0 0 0 2em;\r\n            border-left: 4px solid #0073aa;\r\n            font-style: italic;\r\n            color: #333;\r\n            line-height: 1.6;\r\n        }\r\n        blockquote p {\r\n            margin-bottom: 0.5em;\r\n        }\r\n        blockquote cite {\r\n            display: block;\r\n            margin-top: 0.5em;\r\n            font-size: 0.9em;\r\n            color: #666;\r\n            font-style: normal;\r\n        }\r\n    &lt;\/style&gt;';\r\n}, 100 );\r\n<\/code><\/pre>\n<hr \/>\n<h3>\ud83d\udccc M\u00e9todo 3: No Elementor (segunda op\u00e7\u00e3o)<\/h3>\n<p>Se voc\u00ea estiver editando uma p\u00e1gina espec\u00edfica com o Elementor, pode aplicar os estilos diretamente nos widgets de texto ou usar o widget <strong>&#8220;HTML&#8221;<\/strong> para adicionar CSS personalizado apenas naquela p\u00e1gina. No entanto, para estilos globais, o Customizer ou o MU-Plugin s\u00e3o mais recomendados.<\/p>\n<hr \/>\n<h3>\ud83e\uddea Testando e personalizando<\/h3>\n<p>Ap\u00f3s aplicar o CSS, crie um post de teste com uma lista e uma cita\u00e7\u00e3o para ver o resultado. Voc\u00ea pode ajustar:<\/p>\n<ul>\n<li><code>list-style-type<\/code> \u2013 experimente <code>circle<\/code>, <code>disc<\/code>, <code>upper-roman<\/code>, etc.<\/li>\n<li><code>border-left<\/code> \u2013 mude a cor e a espessura da borda da cita\u00e7\u00e3o.<\/li>\n<li><code>font-style<\/code> \u2013 pode ser <code>normal<\/code> para cita\u00e7\u00e3o sem it\u00e1lico.<\/li>\n<li><code>margin-bottom<\/code> nos itens da lista \u2013 controle o espa\u00e7amento vertical.<\/li>\n<\/ul>\n<hr \/>\n<h3>\u2705 Resumo<\/h3>\n<ul>\n<li>Listas e cita\u00e7\u00f5es ganham muito com um pequeno CSS.<\/li>\n<li>Voc\u00ea pode aplicar via <strong>Customizer<\/strong> (f\u00e1cil) ou <strong>MU-Plugin<\/strong> (definitivo).<\/li>\n<li>O Elementor permite ajustes pontuais, mas n\u00e3o \u00e9 ideal para estilos globais.<\/li>\n<\/ul>\n<p><strong>Arquivo MU-Plugin:<\/strong> <code>\/wp-content\/mu-plugins\/estilos-listas-citacoes.php<\/code><\/p>\n<p>Agora suas listas e cita\u00e7\u00f5es ficar\u00e3o t\u00e3o elegantes quanto o restante do conte\u00fado. Copie e cole no seu caderno de estudos! \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udccb Estilizando listas e cita\u00e7\u00f5es para melhorar a leitura Listas e cita\u00e7\u00f5es s\u00e3o elementos muito comuns em posts e p\u00e1ginas. Por padr\u00e3o, o WordPress (e a maioria dos temas) aplica estilos simples. Nesta aula, voc\u00ea vai aprender a deixar esses elementos mais bonitos, alinhados com a identidade visual do seu site. \ud83c\udfaf O que vamos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,2],"tags":[],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-extras","category-lessons"],"_links":{"self":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":0,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}