Adicionar CSS extra ao painel

Arquivos: functions.php

Funções: add_action

Este filtro simplesmente adiciona CSS extra às paginas do painel WordPress. Isso pode ser  útil para modificar páginas de painel WordPress e também as páginas criadas por plugins.

Um exemplo: de vez em sempre uso o plugin CodeStyling Localization, um ótimo plugin para traduções mas que para mim apresenta um problema (talvez seja muito específico para que o autor faço algo a respeito): o tamanho e a família da fonte não ajudam! Não sei quanto a maioria das pessoas, mas simplesmente não consigo lidar com fontes em tamanho de 11 pixel em resolução alta.

Até então o único jeito de remediar isso era usar zoom do navegador (para não apelar logo para a lente de aumento 😕 ) mas graças a este simples filtro, consegui adicionar um CSS para modificar as modais do Codestlying:

Você pode criar um plugin ou apenas adicionar o código a seguir no functions.php do tema atual mesmo:

1
2
3
4
5
6
7
8
9
10
11
function dkc_add_css_on_pages() {
    echo '
            #csp-dialog-msgid[style], #csp-dialog-msgid-plural[style] {font-size:14px!important; font-family:"Lucida Console"!important; color:#333; padding:10px;background:#D8E8F5;border:none;line-height:18px!important  }
 
            #csp-dialog-msgstr[style], #csp-dialog-msgstr-0[style], #csp-dialog-msgstr-1[style] {font-size:14px!important; font-family:"Lucida Console"!important; color:#000; background:#FAFCFE;border:none;padding:10px;line-height:18px!important }
            #csp-dialog-msgstr[style]:focus, #csp-dialog-msgstr-0[style]:focus, #csp-dialog-msgstr-1[style]:focus {font-size:14px!important;-webkit-box-shadow:  0px 1px 0px 2px #A6BFD3; box-shadow:  0px 1px 0px 2px #A6BFD3;:  0px 0px 10px 2px #A6BFD3;background:#f7f7f7}
 
            #csp-dialog-body strong {color:#85B7E0}
          ';
}
add_action('admin_head', 'dkc_add_css_on_pages');

Não é estranho que funções do tema funcionam para o painel? É por essas e outras que temas com scripts podem causar problemas de segurança…

Com o filtro e o CSS código acima, as janelas modais do Codestlying ficarão com o estilo que eu preciso para não ficar cega de vez é só questão de encontrar a classe e o identificador CSS dos elementos que quer mudar, de qualquer página dentro do painel.

Veja o antes e o depois:

A modal original

Como fica com o CSS novo:

A nova modal com fonte maior e mono espaçada!

Adicionar CSS extra ao painel é um artigo sobre CSS, páginas, painel CSS, páginas, painel Códigos http://dianakcury.com/wp/codigos/adicionar-css-extra-ao-painel#commentsDiana K. Cury http://dianakcury.com/wordpress/wp-content/themes/di3554/img/card.png

Uma ideia sobre “Adicionar CSS extra ao painel

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *