Bug na implementação de widget de rede social

Olá Ana, tudo bom?

Poderia me passar o link de sua página onde está o erro?

Oi, Bruno, bom dia! Tudo bem sim e você?

Segue o link: http://brunoharnik.esy.es/

Bom dia Ana, tudo bem também...

Vamos lá...

Esse widget de redes sociais utiliza uma fonte chamada Genericons para estilizar os ícones com CSS para cada classe correspondente a sua rede social. Cada caractere da fonte é um ícone e eles têm tamanhos diferentes...

Você pode inserir um "custom CSS" no próprio editor do WordPress e redefinir o pseudo-elemento da propriedade que estiliza o ícone. Você deverá inserir o seguinte:

.genericon-googleplus:before {
    font-size: 1.2em;
    line-height: 1em;
}

Essa solução é um " número mágico" que testei no meu navegador, mas serve exatamente para o que você quer: tornar o ícone do Google Plus com tamanho equivalente aos outros ícones.

É importante lembrar, que nesse curso de WordPress trabalhamos com um tema bem simples, para que possamos entender os problemas que podem surgir no dia a dia de quem trabalha com essa ferramenta. O WordPress possui temas, normalmente premium, com funcionalidades mais complexas, design mais interessante e suporte.

Caso se interesse mais por essas manutenções e esse tipo de desenvolvimento, normalmente ligados à estrutura, aos estilos e à usabilidade, recomendo os cursos da Carreira Desenvolvedor Front-End.

Espero ter ajudado, depois comenta aqui se deu tudo certo...

Um abraço,

Bruno

Oi, Bruno, boa tarde!

Quanto ao ícone do G+, deu certo! Porém, acho que fiz a pergunta de forma errada. O Selo do Google que implementei no meu footer, está desalinhado (no topo) em relação ao Plugin de Página do Facebook. Como é possível resolver isso?

Obrigada pela recomendação dos cursos. Já fiz alguns deles e pretendo fazer todos, com certeza!

Abraços;

Ana

Bom dia Ana, tudo bom?

Agora entendi sua pergunta... Pelo que analisei com o inspector o widget do Google Plus possui uma tag h2vazia, enquanto o widget do Facebook não possui essa tag – por isso esse espaço vazio estranho.

Veja se possui algum campo do widget dentro do painel de controle do WordPress chamado título que esteja preenchido com uma barra de espaço, caso esteja, apague e verifique a página.

Caso não exista a solução acima, você pode inserir um custom CSS para resolver isso:

aside#googleplus-badge-2>h2.widget-title {
    display: none;
}

Com isso o título vazio não aparecerá na exibição da página e o widget sobe para a posição certa.

Espero ter ajudado, depois comenta aqui se deu certo...

Um abraço,

Bruno

Oi, Bruno, tudo bem sim! E você?

Então, primeiro entrei com o inspector e encontrei essa tag h2 vazia que você mencionou. Deletei a tag pelo inspector e o widget do Google Plus ficou alinhado. Porém, isso teria que ser feito direto no código fonte para dar certo, mas não consegui chegar até ele através do WordPress. Seria possível fazer isso?

Em seguida, inseri o custom CSS que você me indicou e o problema foi corrigido!

De qualquer forma, gostaria de saber se existe alguma possibilidade de mexer por meio do código fonte...

Muito obrigada!

Abraços;

Ana

Olá Ana, tudo bem também :-)

Provavelmente é possível sim. Você pode fazer uma busca nos arquivos que compõem o widget, ou o tema, identificar a classe no css, ou o arquivo php que estrutura o html desse widget. Porém, caso realize uma mudança na estrutura de um tema, essa mudança será eliminada sempre que o tema se atualizar (a menos que o tema atualize e corrija esse problema).

Abraço,

Bruno