--- title: "Como estilizar widget de calendario no WordPress em 6 passos" description: "Estilizar widget de calendario no WordPress é aplicar regras CSS aos seletores que o core já gera, sem editar arquivos do núcleo." url: https://full.services/estilizar-widget-calendario-wordpress/ date: 2026-06-27 author: "Clayton Margiotti" --- # Como estilizar widget de calendario no WordPress em 6 passos **Estilizar widget de calendario no WordPress** exige mirar os seletores reais do core: a classe `.widget_calendar` e a tabela `#wp-calendar`. Segundo a [WordPress Developer Docs](https://developer.wordpress.org/reference/functions/get_calendar/) (2026), o core gera a tabela com id `wp-calendar` e classe `wp-calendar-table`. Mude cores, bordas e o dia atual com 8 a 12 linhas de CSS. Teste pelo Customizer e migre ao child theme para persistir. Estilizar widget de calendario no WordPress é aplicar regras CSS aos seletores que o core já gera, sem editar arquivos do núcleo. O widget de calendário do WordPress sai com a classe `.widget_calendar` no contêiner e uma tabela `#wp-calendar` por dentro, então você mira nesses alvos e ajusta cor, borda, espaçamento e o destaque do dia de hoje. Este tutorial mostra o caminho prático: do CSS no Additional CSS do Customizer para teste imediato até o child theme para produção, com responsividade e os seletores corretos. Quem usa Elementor ou um tema de blocos também encontra aqui o ponto de injeção certo. Veja todos os [tutoriais de WordPress da FULL](https://full.services/tutoriais-wordpress/) para o contexto completo. --- ## Primeiros passos: Onde o CSS do calendario vive O widget de calendário do WordPress gera uma estrutura HTML fixa e previsível, e é nela que todo o CSS se apoia. O contêiner do widget recebe a classe `.widget_calendar`; dentro dele, o core monta `` com `` e ``. Saber esses 3 alvos resolve a maior parte do trabalho de estilo. A tabela abaixo resume os seletores reais que você vai usar.
`, `
Estilizar widget de calendario no WordPress: seletores reais do core
Seletor CSS O que controla Uso tipico
.widget_calendar Conteiner do widget inteiro Fundo, padding, borda externa
#wp-calendar Tabela do calendario Largura, borda das celulas, fonte
#wp-calendar caption Mes e ano no topo Cor, peso, alinhamento do titulo
#wp-calendar #today Celula do dia atual Destaque com cor de fundo
.wp-calendar-nav-prev Link de mes anterior Cor e tamanho da navegacao

Legenda: a tabela #wp-calendar é o alvo central , cada coluna do thead e o id #today recebem CSS de forma independente.

--- ## Por que mirar os seletores do Core importa Mirar `.widget_calendar` e `#wp-calendar` em vez de seletores genéricos evita que sua regra vaze para outras tabelas e perca a guerra de especificidade. Um id como `#wp-calendar` tem peso 100 de especificidade, contra apenas 10 de uma classe e 1 de um elemento, então a regra com id sobrescreve a do tema sem `!important`. Segundo a [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), a cascata resolve conflitos pela soma de seletores de id, classe e elemento, e o id sempre vence a classe. Na prática isso significa que `#wp-calendar td` derrota qualquer `table td` herdado do tema, sem gambiarra. Quem ignora a especificidade acaba colando `!important` em tudo e quebra a manutenção meses depois, quando o tema atualiza e o CSS para de pegar. A maioria dos tickets de CSS quebrado que chega ao suporte da FULL nasce justamente de seletor genérico demais brigando com o tema. A regra de ouro: prefira o id `#wp-calendar` para a tabela e a classe `.widget_calendar` para o contêiner, e reserve `!important` só para o caso raro em que um plugin injeta estilo inline. --- ## Passo a passo: Estilize o calendario com CSS Estilizar o calendário leva cerca de 10 minutos e cabe em 4 blocos de CSS. O fluxo é testar no Additional CSS do Customizer, inspecionar com o Chrome DevTools, ajustar os seletores e só então mover para o child theme. Os 6 passos abaixo cobrem fundo, bordas, o dia atual e a navegação, na ordem em que fazem sentido aplicar. ### Passo 1: Abra o additional CSS no customizer Vá em Aparência, Personalizar, CSS adicional. Esse painel injeta CSS ao vivo e mostra o resultado em tempo real no preview à direita, sem recarregar a página. É o ambiente certo para experimentar, porque nada é salvo no banco até você clicar em Publicar. Cole aqui as regras dos próximos passos e observe o calendário mudar enquanto digita. ### Passo 2: Estilize o conteiner com .widget_calendar Comece pelo contêiner para dar respiro e identidade visual ao bloco: ```css .widget_calendar { background: #f7f7f9; padding: 16px; border-radius: 8px; border: 1px solid #e2e2e6; } ``` Isso aplica fundo claro, espaçamento interno de 16px e cantos arredondados ao widget inteiro, sem tocar na tabela ainda. ### Passo 3: Formate a tabela #wp-calendar Agora a tabela. Use o id para vencer a especificidade do tema: ```css #wp-calendar { width: 100%; border-collapse: collapse; font-size: 14px; } #wp-calendar th, #wp-calendar td { border: 1px solid #e2e2e6; padding: 6px; text-align: center; } ``` O `border-collapse: collapse` junta as bordas das células numa linha única e limpa, padrão de grade de calendário. ### Passo 4: Destaque o dia atual com #today O core marca a célula de hoje com o id `today`. Dê a ela uma cor de marca: ```css #wp-calendar #today { background: #2563eb; color: #fff; font-weight: 700; border-radius: 4px; } ``` Esse é o detalhe que mais agrega: o usuário enxerga o dia de hoje à primeira batida de olho. ### Passo 5: Ajuste a navegacao de meses Os links de mês anterior e próximo vivem em `.wp-calendar-nav-prev` e `.wp-calendar-nav-next`: ```css .wp-calendar-nav-prev a, .wp-calendar-nav-next a { color: #2563eb; text-decoration: none; font-weight: 600; } ``` Mantenha o contraste alto: a navegação precisa ser clicável e óbvia, não decorativa. ### Passo 6: Migre o CSS para o child theme Quando o visual agradar, mova o bloco do Customizer para o `style.css` do seu child theme. Isso versiona o CSS no código, sobrevive a backups e não fica preso ao banco de dados. Quem nunca criou um, o guia de [como alterar corretamente um tema do WordPress](https://full.services/como-alterar-corretamente-um-tema-do-wordpress/) mostra o caminho seguro. --- ## Customizer ou child theme: Onde salvar o CSS A escolha entre os 2 destinos, Additional CSS e child theme, define se o estilo persiste numa migração ou se evapora. O Additional CSS do Customizer salva o CSS no banco de dados, na tabela de opções, então ele acompanha o site mesmo se você trocar de tema dentro do mesmo WordPress. O child theme guarda o CSS num arquivo `style.css` versionável, ideal para agências que sobem o site por Git. A regra prática: use o Customizer para testar e para clientes que mexem sozinhos; use o child theme para entregas profissionais e sites que recebem deploy. O child theme é a única opção que sobrevive a uma exportação de arquivos sem o banco junto. Para entender a base, o conceito de [child theme](https://full.services/glossario/child-theme/) e o de [widget WordPress](https://full.services/glossario/widget-wordpress/) ajudam a separar o que é tema do que é bloco. --- ## Como deixar o calendario responsivo Tornar o calendário responsivo evita que a tabela estoure a largura no celular, onde mais de 60% do tráfego brasileiro acontece. A tabela `#wp-calendar` tem 7 colunas fixas, uma por dia da semana, e em telas estreitas o texto encolhe demais se a fonte não for ajustada. Use uma media query mirando 480px para reduzir o padding e a fonte sem quebrar a grade: ```css @media (max-width: 480px) { #wp-calendar th, #wp-calendar td { padding: 3px; font-size: 12px; } .widget_calendar { padding: 10px; } } ``` Esse ajuste mantém os 7 dias visíveis e legíveis, sem esconder nenhuma coluna. Em sidebar estreita abaixo de 280px, vale também testar o `overflow-x: auto` no contêiner `.widget_calendar` para impedir corte horizontal quando o número do dia tem 2 dígitos. Evite reduzir a fonte abaixo de 11px: o calendário vira ruído e ninguém clica numa data ilegível. Outra dica de campo: em temas que aplicam `min-width` na tabela, sobrescreva com `#wp-calendar { min-width: 0; }` dentro da media query, senão a regra de fonte não resolve o estouro. O conceito de [widget area](https://full.services/glossario/widget-area/) ajuda a prever onde a sidebar afunila no mobile e quanto espaço o calendário realmente tem. --- ## Estilizar o calendario no Elementor e em temas de bloco No Elementor e nos temas de bloco, o ponto de injeção do CSS muda, mas os 2 seletores `.widget_calendar` e `#wp-calendar` continuam idênticos. O Elementor oferece o campo CSS personalizado por widget e por página, além do CSS global no painel de estilo do tema, num total de 3 pontos de injeção. Já um tema de blocos (FSE) usa o editor de estilos, mas aceita CSS adicional pelo mesmo Customizer ou pelo arquivo `theme.json`. Em todos os casos, o calendário renderizado pelo core mantém a tabela `#wp-calendar`, então as regras dos passos anteriores funcionam sem nenhuma alteração de seletor. Um detalhe que confunde: o widget de calendário nativo não é o mesmo que widgets de evento de plugins como o The Events Calendar, que trazem o próprio HTML e exigem outras classes. Para CSS dentro do Elementor, o tutorial de [como adicionar CSS personalizado no Elementor](https://full.services/como-adicionar-css-personalizado-no-elementor-5-metodos-infaliveis/) lista os 5 métodos com seus prós. Quem trabalha com o builder pode aprofundar no guia [para dominar o Elementor](https://full.services/guias/domine-o-elementor/). --- ## Estilizar outros widgets com a mesma logica A lógica de estilizar o calendário se repete em qualquer um dos widgets do WordPress: cada um sai com uma classe `.widget_` própria e uma estrutura HTML previsível. O widget de busca usa `.widget_search`, o de categorias `.widget_categories`, o de posts recentes `.widget_recent_entries`, o de tags `.widget_tag_cloud`. Você inspeciona o HTML com o Chrome DevTools, copia o seletor real e aplica a regra, exatamente como fez com `.widget_calendar` nos 6 passos anteriores. Esse padrão de mirar a classe específica do widget mantém o CSS organizado e fácil de manter num arquivo só. A vantagem prática é que uma folha de estilo única, com um bloco por classe `.widget_`, padroniza todos os widgets da sidebar de uma vez. Para um panorama de quais widgets existem e como ativá-los, o tutorial de [adicionar e usar widgets no WordPress passo a passo](https://full.services/adicionar-e-usar-widgets-no-wordpress-passo-a-passo/) serve de base, e há também uma lista dos [melhores plugins de widget do WordPress](https://full.services/35-melhores-plugins-de-widget-do-wordpress/) quando o core não basta. --- ## Acelere a estilizacao de widgets com a FULL Quem gerencia muitos sites ganha tempo padronizando o CSS de widgets com as ferramentas da FULL. O plano PRO da FULL sai por R$849,90 e inclui os 17 plugins premium ativados em 1 clique; dividido pelos 10 sites que o plano cobre, dá R$85 por site, contra comprar Elementor PRO, Astra PRO e cache avulsos. A gente vê no suporte da FULL que a maior parte do retrabalho de estilo some quando o time usa um child theme único replicado entre sites. Conheça os [planos da FULL](https://full.services/planos) para padronizar a estilização em escala. --- --- ## Perguntas frequentes sobre estilizar o widget de calendario
É possível estilizar o calendário sem editar arquivos do tema?

Sim. O Additional CSS do Customizer, em Aparência, Personalizar, CSS adicional, aplica todo o CSS sem tocar em nenhum arquivo. Ele salva as regras no banco de dados e mostra o resultado ao vivo no preview. Para os seletores `.widget_calendar` e `#wp-calendar`, esse caminho cobre 100% da estilização de cor, borda e destaque do dia atual, sem FTP nem editor de código.

Por que minha regra de CSS no calendário não funciona?

Quase sempre é especificidade. O tema aplica uma regra com mais peso, e a sua, mais fraca, perde na cascata. Mire o id `#wp-calendar`, que vale 100 de especificidade, em vez de uma classe genérica que vale 10. Se ainda assim não pegar, confirme o seletor no Chrome DevTools com clique direito, Inspecionar. O id sempre vence a classe do tema sem precisar de `!important`.

Qual é o seletor CSS do dia atual no calendário do WordPress?

O core marca a célula de hoje com o id `today`, então o seletor é `#wp-calendar #today`. Aplique nele uma cor de fundo e cor de texto para destacar a data. Exemplo: `#wp-calendar #today { background:#2563eb; color:#fff; }`. Esse é o detalhe de maior impacto visual, porque guia o olho do usuário direto para a data corrente sem nenhum esforço de leitura.

Como deixar o widget de calendário responsivo no celular?

Use uma media query mirando 480px que reduz o padding das células de 6px para 3px e a fonte de 14px para 12px. Isso mantém as 7 colunas do calendário visíveis sem estourar a largura. A tabela `#wp-calendar` tem largura fixa de 7 dias, então o ajuste é na fonte e no espaçamento, nunca em esconder colunas. Em sidebars muito estreitas, adicione `overflow-x: auto` no contêiner `.widget_calendar`.

O CSS do Customizer some quando eu troco de tema?

Não. O Additional CSS do Customizer fica salvo no banco de dados, na tabela de opções, e acompanha o site mesmo trocando de tema dentro do mesmo WordPress. O que ele não sobrevive é a uma migração só de arquivos sem o banco. Para entregas profissionais que sobem por Git, o CSS no `style.css` do child theme é mais seguro, porque vive no código versionado.

--- ## Próximos passos para personalizar sua sidebar Estilizar widget de calendario no WordPress se resolve mirando 3 seletores reais do core: `.widget_calendar`, `#wp-calendar` e `#today`, aplicados primeiro no Customizer e depois migrados ao child theme para persistir. Com os 6 passos deste tutorial você ajusta cor, borda, o dia atual e a responsividade em cerca de 10 minutos, e a mesma lógica de mirar a classe `.widget_` específica vale para qualquer outro widget da sidebar. O segredo é vencer a especificidade com o id em vez de espalhar `!important`. Para continuar aprendendo WordPress, o [FULL Academy](https://full.services/academy/) reúne tutoriais, guias e reviews num só lugar. --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/estilizar-widget-calendario-wordpress/#article", "headline": "Como estilizar widget de calendario no WordPress em 6 passos", "description": "Estilizar widget de calendario no WordPress é aplicar regras CSS aos seletores que o core já gera, sem editar arquivos do núcleo.", "url": "https://full.services/estilizar-widget-calendario-wordpress/", "datePublished": "2026-06-27T09:00:00-03:00", "dateModified": "2026-06-27T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Tutoriais WordPress", "keywords": [ "estilizar widget de calendario no wordpress", "WordPress", "Web Development" ], "author": { "@id": "https://full.services/#person-clayton" }, "publisher": { "@id": "https://full.services/#org" }, "about": [ { "@type": "Thing", "name": "WordPress", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" }, { "@type": "Thing", "name": "Web Development", "@id": "https://www.wikidata.org/wiki/Q386275", "sameAs": "https://www.wikidata.org/wiki/Q386275" } ], "mentions": [ { "@type": "Organization", "name": "WordPress", "url": "https://wordpress.org/", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" } ], "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/estilizar-widget-calendario-wordpress/" }, "wordCount": 2458, "citation": [ { "@type": "CreativeWork", "name": "WordPress Developer Docs", "url": "https://developer.wordpress.org/reference/functions/get_calendar/", "publisher": { "@type": "Organization", "name": "WordPress Developer Docs" } }, { "@type": "CreativeWork", "name": "Mozilla Observatory", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity", "publisher": { "@type": "Organization", "name": "Mozilla Observatory" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/estilizar-widget-calendario-wordpress/#faq", "isPartOf": { "@id": "https://full.services/estilizar-widget-calendario-wordpress/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/estilizar-widget-calendario-wordpress/#faq-q1", "name": "É possível estilizar o calendário sem editar arquivos do tema?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim. O Additional CSS do Customizer, em Aparência, Personalizar, CSS adicional, aplica todo o CSS sem tocar em nenhum arquivo. Ele salva as regras no banco de dados e mostra o resultado ao vivo no preview. Para os seletores `.widget_calendar` e `#wp-calendar`, esse caminho cobre 100% da estilização de cor, borda e destaque do dia atual, sem FTP nem editor de código.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/estilizar-widget-calendario-wordpress/#faq-q2", "name": "Por que minha regra de CSS no calendário não funciona?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Quase sempre é especificidade. O tema aplica uma regra com mais peso, e a sua, mais fraca, perde na cascata. Mire o id `#wp-calendar`, que vale 100 de especificidade, em vez de uma classe genérica que vale 10. Se ainda assim não pegar, confirme o seletor no Chrome DevTools com clique direito, Inspecionar. O id sempre vence a classe do tema sem precisar de `!important`.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/estilizar-widget-calendario-wordpress/#faq-q3", "name": "Qual é o seletor CSS do dia atual no calendário do WordPress?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O core marca a célula de hoje com o id `today`, então o seletor é `#wp-calendar #today`. Aplique nele uma cor de fundo e cor de texto para destacar a data. Exemplo: `#wp-calendar #today { background:#2563eb; color:#fff; }`. Esse é o detalhe de maior impacto visual, porque guia o olho do usuário direto para a data corrente sem nenhum esforço de leitura.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/estilizar-widget-calendario-wordpress/#faq-q4", "name": "Como deixar o widget de calendário responsivo no celular?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Use uma media query mirando 480px que reduz o padding das células de 6px para 3px e a fonte de 14px para 12px. Isso mantém as 7 colunas do calendário visíveis sem estourar a largura. A tabela `#wp-calendar` tem largura fixa de 7 dias, então o ajuste é na fonte e no espaçamento, nunca em esconder colunas. Em sidebars muito estreitas, adicione `overflow-x: auto` no contêiner `.widget_calendar`.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/estilizar-widget-calendario-wordpress/#faq-q5", "name": "O CSS do Customizer some quando eu troco de tema?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Não. O Additional CSS do Customizer fica salvo no banco de dados, na tabela de opções, e acompanha o site mesmo trocando de tema dentro do mesmo WordPress. O que ele não sobrevive é a uma migração só de arquivos sem o banco. Para entregas profissionais que sobem por Git, o CSS no `style.css` do child theme é mais seguro, porque vive no código versionado.", "author": { "@id": "https://full.services/#org" } } } ] }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://full.services/" }, { "@type": "ListItem", "position": 2, "name": "Tutoriais WordPress", "item": "https://full.services/tutoriais-wordpress/" }, { "@type": "ListItem", "position": 3, "name": "Como estilizar widget de calendario no WordPress em 6 passos", "item": "https://full.services/estilizar-widget-calendario-wordpress/" } ] }, { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services", "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023 (https://thewpweekly.com/awards-2023/)", "Gold Medal - The WP Weekly Awards 2024 (https://thewpweekly.com/awards-2024/)" ], "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Certificação válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "Person", "@id": "https://full.services/#person-clayton", "name": "Clayton Margiotti", "givenName": "Clayton", "familyName": "Margiotti", "jobTitle": "Fundador e CEO da FULL Services", "description": "Fundador e CEO da FULL Services, plataforma WordPress SaaS com 50 mil clientes e 150 mil sites conectados, e anchor do ecossistema Elevor Global. Em 2024 conduziu a FULL a se tornar a primeira e unica empresa brasileira aprovada como CVE Numbering Authority sob a CISA (DHS/EUA). Mais de 20 anos construindo empresas digitais, com 13+ reconhecimentos internacionais (Facebook, GPTW, ONU, RD Summit).", "url": "https://full.services/sobre-nos/", "image": "https://full.services/wp-content/uploads/2026/05/clayton-margiotti.jpg", "sameAs": [ "https://www.linkedin.com/in/cmargiotti/" ], "knowsAbout": [ "Artificial Intelligence", "Cybersecurity", "CVE Program", "WordPress Enterprise", "SaaS Platforms", "Digital Infrastructure", "Technology Entrepreneurship", "Company Building", "Business Leadership", "Digital Growth" ], "hasOccupation": { "@type": "Occupation", "name": "Fundador e CEO", "occupationalCategory": "11-1011.00" }, "knowsLanguage": [ { "@type": "Language", "name": "Portuguese", "alternateName": "pt-BR" }, { "@type": "Language", "name": "English", "alternateName": "en" } ], "memberOf": { "@type": "Organization", "name": "CVE Numbering Authorities", "url": "https://www.cve.org/", "sameAs": "https://www.cve.org/" }, "alumniOf": [ { "@type": "EducationalOrganization", "name": "Global Scaling Academy (Blitzscaling Program)", "url": "https://www.blitzscalingacademy.com" }, { "@type": "EducationalOrganization", "name": "Esade", "url": "https://www.esade.edu" }, { "@type": "EducationalOrganization", "name": "Business School Sao Paulo (BSP)", "url": "https://bsp.edu.br/" }, { "@type": "EducationalOrganization", "name": "Tera", "url": "https://somostera.com" }, { "@type": "EducationalOrganization", "name": "Le Wagon", "url": "https://www.lewagon.com" }, { "@type": "EducationalOrganization", "name": "FIAP", "url": "https://www.fiap.com.br" }, { "@type": "EducationalOrganization", "name": "PUCRS", "url": "https://online.pucrs.br/" } ], "award": [ "Digital Disruptor – Engaging Experiences Master (Globant, 2021)", "Maior ROI do e-commerce brasileiro – Letrissimas (Facebook, 2019)", "1º lugar – Melhores Empresas para Trabalhar no Brasil – Eleva Digital (Great Place to Work, 2018)", "Case global de educacao no Facebook – Metodo SUPERA (Facebook, 2017)", "Maquina de Geracao de Leads, Agencia do Ano (RD Summit / RD Station, 2015)", "Monthly Recurring Revenue, top performance (RD Summit / RD Station, 2015)", "Quality/Efficiency – Entrepreneurship Training (UNCTAD / PNUD-ONU, 2010)" ], "subjectOf": [ { "@type": "NewsArticle", "url": "https://www.globant.com/news/globant-reveals-inaugural-digital-disruptors-award-winners", "publisher": { "@type": "Organization", "name": "Globant" } }, { "@type": "NewsArticle", "url": "https://www.prnewswire.com/news-releases/letrissimas-com-e-destaque-do-e-commerce-brasileiro-com-maior-roi-de-2018-877517801.html", "publisher": { "@type": "Organization", "name": "PR Newswire" } }, { "@type": "NewsArticle", "url": "https://www.segs.com.br/seguros/102599-gestao-de-pessoas-garante-mais-lucro-as-empresas", "publisher": { "@type": "Organization", "name": "Segs" } }, { "@type": "NewsArticle", "url": "https://franquiaeducacional.com/negocios-inovadores-facebook-elege-supera-case-mundial-de-educacao", "publisher": { "@type": "Organization", "name": "Franquia Educacional" } }, { "@type": "NewsArticle", "url": "https://acontecendoaqui.com.br/marketing/resultados-digitais-divulga-vencedores-do-premio-agencias-de-resultados-2015-durante-o-rd", "publisher": { "@type": "Organization", "name": "Acontecendo Aqui" } } ], "worksFor": { "@type": "Organization", "@id": "https://full.services/#org" } }, { "@type": "HowTo", "@id": "https://full.services/estilizar-widget-calendario-wordpress/#howto", "isPartOf": { "@id": "https://full.services/estilizar-widget-calendario-wordpress/#article" }, "name": "Passo a passo: estilizar widget de calendario no wordpress", "description": "Guia passo a passo sobre estilizar widget de calendario no wordpress para WordPress.", "url": "https://full.services/estilizar-widget-calendario-wordpress/", "totalTime": "PT36M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Abra o additional CSS no customizer", "text": "Vá em Aparência, Personalizar, CSS adicional. Esse painel injeta CSS ao vivo e mostra o resultado em tempo real no preview à direita, sem recarregar a página. É o ambiente certo para experimentar, porque nada é salvo no banco até você clicar em Publicar. Cole aqui as regras dos próximos passos e observe o calendário mudar enquanto digita." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Estilize o conteiner com .widget_calendar", "text": "Comece pelo contêiner para dar respiro e identidade visual ao bloco: ```css .widget_calendar { background: #f7f7f9; padding: 16px; border-radius: 8px; border: 1px solid #e2e2e6; } ``` Isso aplica fundo claro, espaçamento interno de 16px e cantos arredondados ao widget inteiro, sem tocar na tabela ainda." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Formate a tabela #wp-calendar", "text": "Agora a tabela. Use o id para vencer a especificidade do tema: ```css width: 100%; border-collapse: collapse; font-size: 14px; } border: 1px solid #e2e2e6; padding: 6px; text-align: center; } ``` O `border-collapse: collapse` junta as bordas das células numa linha única e limpa, padrão de grade de calendário." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Destaque o dia atual com #today", "text": "O core marca a célula de hoje com o id `today`. Dê a ela uma cor de marca: ```css background: #2563eb; color: #fff; font-weight: 700; border-radius: 4px; } ``` Esse é o detalhe que mais agrega: o usuário enxerga o dia de hoje à primeira batida de olho." }, { "@type": "HowToStep", "position": 5, "name": "Passo 5: Ajuste a navegacao de meses", "text": "Os links de mês anterior e próximo vivem em `.wp-calendar-nav-prev` e `.wp-calendar-nav-next`: ```css .wp-calendar-nav-prev a, .wp-calendar-nav-next a { color: #2563eb; text-decoration: none; font-weight: 600; } ``` Mantenha o contraste alto: a navegação precisa ser clicável e óbvia, não decorativa." }, { "@type": "HowToStep", "position": 6, "name": "Passo 6: Migre o CSS para o child theme", "text": "Quando o visual agradar, mova o bloco do Customizer para o `style.css` do seu child theme. Isso versiona o CSS no código, sobrevive a backups e não fica preso ao banco de dados. Quem nunca criou um, o guia de como alterar corretamente um tema do WordPress mostra o caminho seguro. --- A escolha entre os 2 destinos, Additional CSS e child theme, define se o estilo persiste numa migração ou se evapora. O Additional CSS do Customizer salva o CSS no banco de dados, na tabela de opções, então ele acompanha o site mesmo se você trocar de tema dentro do mesmo WordPress. O child theme guarda o CSS num arquivo `style.css` versionável, ideal para agências que sobem o site por Git. A regra prática: use o Customizer para testar e para clientes que mexem sozinhos; use o child theme para entregas profissionais e sites que recebem deploy. O child theme é a única opção que sobrevive a uma exportação de arquivos sem o banco junto. Para entender a base, o conceito de child theme e o de widget" } ] } ] } ```