Saltar para: Post [1], Comentários [2], Pesquisa e Arquivos [3]

SAPO Blogs

CSS personalizada

por Pedro, em 30.08.10

A funcionalidade CSS personalizada permite-lhe fazer pequenos ajustes ao template do seu blog usando CSS.

 

CSS é a sigla de Cascading Style Sheet e consiste numa lista de atributos que definem a aparência de uma página da Internet, da cor de fundo da página ao tipo de letra dos textos, entre muitas outras coisas.

 

Todos os templates do SAPO, assim como a quase totalidade das páginas da internet, são feitos recorrendo a CSS.

O HTML é o código usado para estruturar uma página, ao passo que o CSS é o código usado para definir a sua aparência.

 

A nossa Personalização Intermédia foi concebida para que não tenha de saber ou mexer em qualquer código, seja ele HTML ou CSS, mas alguns utilizadores por vezes sentem a necessidade de alterar um ou outro aspeto do template do seu blog, que não está contemplado nos separadores convencionais (relativos às cores, tamanho e tipo de letra, imagens usadas no template, etc).

 

Foi por isso que disponibilizámos esta área, chamada CSS Personalizada (no separador Extras da Personalização Intermédia).

Nela, os utilizadores podem customizar o seu template em CSS, até ao limite e sem perder funcionalidades nos restantes separadores da Personalização Intermédia.

 

Por exemplo:

 

 

Imagine que escolheu utilizar o Template Notas Soltas 2 e que não gosta do risco que separa o cabeçalho do resto do blog.

Na Personalização Intermédia não é possível retirar esse risco nos separadores destinados à personalização dos textos, imagens ou cores.

 

Todavia, se for ao separador Extras e colar no campo CSS personalizada o seguinte atributo, esse risco é eliminado:

 

#header {border-bottom:none;}

 

Contamos nos próximos tempos deixar neste post ajuda mais dicas de personalização em CSS.

Deixe as suas dúvidas, e explore aquelas deixadas por outros utilizadores, nos comentários deste post.

 

(post de ajuda publicado originalmente em 10/10/11)

168 comentários

  • Imagem de perfil

    De Pedro a 26.03.2014 às 17:52

    E mais uma coisa: não precisa mais de justificar os textos (ou colocar o tipo de letra) no editor. O blog vai assumir automaticamente os textos como justificados, com aquele tipo e cor de letra (que podem ser alterados a nível geral na Personalização Intermédia). Espero que isto ajude :)
  • Imagem de perfil

    De sweet a 30.03.2014 às 15:18

    Muito obrigada Pedro! Tenho então algumas dúvidas:
    1 - É possível retirar aquela "caixa" em volta dos links de anterior, início, post seguinte e manter apenas o texto? 
    2 - Como faço para retirar a barra de pesquisa do cabeçalho e a coloco na barra lateral?
    3 - Onde é que posso alterar o tamanho dos links de comentar, favorito, link do post, tags, publicado por etc?
    4 - Nuvem de tags e arquivo em pull down não estão disponíveis neste template certo?
    5 - Relativamente aos títulos da barra lateral eu penso que eles têm o mesmo tamanho que tinham quando eu utilizava o template Sapo, no entanto por mais que aumente a largura da barra lateral não consigo que o texto caiba todo "ao comprido" (se é que me faço entender) como sucedia no template anterior. Por exemplo no subscrever feeds, a palavra feeds fica em baixo do subscrever e não ao lado, o mesmo acontece com o título do componente que se encontra acima deste.
    6 - Obrigada pela preocupação mas prefiro os títulos sem o sombreado :)
    7 - Eu gostava de criar um menu no cabeçalho do blog e queria saber se no Menu de texto temos de imperativamente escrever directamente lá ou podemos colocar o url de uma imagem no lugar do texto.
    8 - Ainda em relação ao menu ele irá aparecer no lugar em que aparece o menu de ícones (topo do cabeçalho, canto superior esquerdo) ou posso escolher colocá-lo noutro local mais abaixo e centrado?
    9 - Caso eu queira retirar o itálico dos títulos dos posts e da área de comentários (onde diz x nr de comentários) que códigos devo alterar/retirar?


    Peço desculpa por fazer tanta pergunta e obrigada pela ajuda!
  • Imagem de perfil

    De Pedro a 31.03.2014 às 10:35

    Bom dia,

    para responder aos pontos:

    1- precisa de costumizar o CSS dos links de navegação, no campo CSS Personalizada, da Personalização Intermédia, usando esta definição:

    .nav a {
      background-color:#444444;
      border-bottom-left-radius:0.3em;
      border-bottom-right-radius:0.3em;
      border-top-left-radius:0.3em;
      border-top-right-radius:0.3em;
      color:#FFFFFF;
      padding:6px 16px;
      text-decoration:none;
    }

    2- para remover a pesquisa, adicione esta definição no mesmo sítio do ponto 1

    #pesquisatop {display:none;}

    3- para aumentar os links da assiantura dos posts, no mesmo sítio do ponto 1, acrescente esta definição:

    #posts .author {font-size:large;}

    4- não, nuvem de tags e arquivo em pull down não estão disponíveis nos templates mais recentes;
    5- os títulos da coluna lateral estão muito grandes, pelo que precisaria de alargar ainda mais a coluna lateral, para evitar essa quebra de linha;
    6- sombreados retirados
    7- na realidade, pode usar imagens, se usar código HTML no lugar do nome de cada opção, mas os endereços das imagens precisam de ser muito curtos, as imagens também precisam de ser muitos pequenas; por outro lado, se pretende usar um tipo de letra diferente, basta usar texto e depois aplicar uma webfont diferente à secção do menu, usando a CSS Personalizada (do ponto 1) e uma font do Google, por exemplo;
    8- creio que neste template o menu irá aparecer abaixo da imagem de cabeçalho, mas basta experimentar :)
    9- para retirar os itálicos, basta ir à área do ponto 1 e retirar a definição font-style:italic;
  • Imagem de perfil

    De sweet a 08.04.2014 às 17:06


    1. Coloquei o código que me forneceu no campo da css personalizada mas não ocorreu qualquer alteração :/

    Ainda em relação aos linkd de post anterior, início e post seguinte, como faço para que eles apareçam somente no fim dos posts e não no topo?
    2. Existe alguma maneira de manter a barra de pesquisa e alterar apenas o local em que ela aparece? É que eu gostava de colocá-la na barra lateral e não sei se é possível.


    Muito obrigada mais uma vez :) 
  • Imagem de perfil

    De Pedro a 10.04.2014 às 10:26

    Olá,

    O código do ponto 1 precisa de ser revisto para ver alterações :) Pode alterar a cor de fundo do botão (background-color), a cor do texto do botão (color), só precisa de usar o código hexadecimal da cor que pretende usar.

    Quanto ao ponto 2, não é possível. Pode esconder o campo de pesquisa, mas não mudá-lo de lugar. De qualquer modo, pode sempre ativar o componente de pesquisa na coluna lateral do blog (no separador Posições).
  • Imagem de perfil

    De sweet a 10.04.2014 às 14:38

    Feito ;) Muito obrigada!
  • Imagem de perfil

    De Pedro a 31.03.2014 às 10:36

    Nota: CSS Personalizada, que está no separador "Extras" da Personalização Intermédia.
  • Comentar post

    Pág. 1/6