← WordPress

Estilizar texto

Lida 2503 vezes

Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Bom dia.

Criei um efeito pautado (a imitar folha) para colocar por baixo de um texto.
Ao fazê-lo localmente, está perfeito. Coloquei o line-height com a mesma altura do fundo para as linhas coincidirem.

Ao exportar isto para o Wordpress, não há line-height que me valha que aquilo não bate certo!

Apaguei TUDO o que o single.php e só deixei isto:
Código: [Seleccione]
<style>
#bloco {
background:url('fundo-bloco.png') repeat;
line-height:22px;
font-family: arial;
padding-left: 50px;
font-size: 16px;
color: #4B4B4B;
}
</style>
<div id="pautado"> <?php the_content(); ?></div>

Fica desalinhado. Se substituir o <?php the_content(); ?> por um texto, bate certo.

A minha questão é: o <?php the_content(); ?> tem algum tipo de estilo directamente associado à função?

Obrigado :)
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Tens #bloco no css e #pautado na div...
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

No site está bem, a copiar para aqui é que tive de alterar o nome da DIV, mas não reparei e pus diferente no style e no corpo :lol:
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

No site está bem, a copiar para aqui é que tive de alterar o nome da DIV, mas não reparei e pus diferente no style e no corpo :lol:

Tenta assim:

Código: [Seleccione]
<style>
#pautado{
background:url('fundo-bloco.png') repeat;
}
#pautado p {
        line-height:22px;
font-family: arial;
padding-left: 50px;
font-size: 16px;
color: #4B4B4B;
}
</style>
<div id="pautado"><?php the_content(); ?></div>
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Tenta assim:

Código: [Seleccione]
<style>
#pautado{
background:url('fundo-bloco.png') repeat;
}
#pautado p {
        line-height:22px;
font-family: arial;
padding-left: 50px;
font-size: 16px;
color: #4B4B4B;
}
</style>
<div id="pautado"><?php the_content(); ?></div>
Com uma pequena alteração ficou a funcionar :)

Mas não posso dar espaços (<br>) que desconfigura logo, vou tentar arranjar uma solução.

Muito obrigado ;)

EDIT: Já arranjei solução para dar espaço entre linhas. Peguei numa imagem transparente com a mesma altura que as linhas e uso-a onde usaria o <br> :)
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

E que tal:

Código: [Seleccione]
#pautado br {
        height: 10px;
}

Onde 10px é a altura da linha. Não funciona?
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

E que tal:

Código: [Seleccione]
#pautado br {
        height: 10px;
}

Onde 10px é a altura da linha. Não funciona?
Não :(
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Não :(

E em vez de height, line-height?

EDIT:

Ah, pera... O WordPress não adiciona br's se não me engano.

Tenta meter um padding-bottom no p.

Código: [Seleccione]
#pautado p {
        line-height:22px;
font-family: arial;
padding: 0 0 22px 50px;
font-size: 16px;
color: #4B4B4B;
}
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

E em vez de height, line-height?

EDIT:

Ah, pera... O WordPress não adiciona br's se não me engano.

Tenta meter um padding-bottom no p.

Código: [Seleccione]
#pautado p {
        line-height:22px;
font-family: arial;
padding: 0 0 22px 50px;
font-size: 16px;
color: #4B4B4B;
}

Está a funcionar :) Muito obrigado de novo ;)

Diz-me só uma coisa, qual é a ordem dos valores do "padding"?
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Está a funcionar :) Muito obrigado de novo ;)

Diz-me só uma coisa, qual é a ordem dos valores do "padding"?

De nada. :)

Cima - Direita - Baixo - Esquerda
Clockwise.

Podes usar em pares, por exemplo:

Código: [Seleccione]
padding: 10px 10px;
Em que o primeiro é para Cima e Baixo e o segundo Esquerda e Direita. ;)
Offline

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

De nada. :)

Cima - Direita - Baixo - Esquerda
Clockwise.

Podes usar em pares, por exemplo:

Código: [Seleccione]
padding: 10px 10px;
Em que o primeiro é para Cima e Baixo e o segundo Esquerda e Direita. ;)
Obrigado :)
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3