Saltar para: Post [1], Comentar [2], Pesquisa e Arquivos [3]

Ajuda Blogs

Um blog para esclarecer dúvidas sobre o SAPO Blogs.

Ajuda Blogs

Um blog para esclarecer dúvidas sobre o SAPO Blogs.

Editor de CSS

23.09.14

O que é CSS?

Para explicar o papel do CSS numa página, ajuda pensar na página de um blog como um bolo com três camadas:

1. a base da página é feita dos seus textos e imagens - são o conteúdo;

2. a segunda camada é o HTML, que assinala e delimita cada conteúdo (onde acaba o cabeçalho e começa um post, por exemplo) - é a estrutura;

3. finalmente, o CSS é a decoração do bolo, por definir, entre outras coisas, a cor de fundo da página e o tipo de letra dos textos - é a apresentação.

Ou seja, o CSS é uma linguagem que define como um conteúdo deve ser apresentado ao nível das cores, tipos e tamanhos de letra, imagens de fundo, entre muitos outros aspetos. A grande maioria dos websites modernos é feita usando CSS, sem a qual seriam apenas páginas com texto e imagens corridas, sem muito apelo.

 

O que posso fazer com CSS no SAPO Blogs?

Todos os nossos templates são feitos usando HTML e CSS. Já vimos que o HTML define a estrutura da página (por exemplo: um cabeçalho, duas colunas com conteúdos e um rodapé), ao passo que o CSS define como cada elemento do HTML deve ser apresentado. Isto significa que a mesma estrutura de HTML pode ser apresentada de mil e uma maneiras diferentes usando CSS.

É por isso que criámos uma área (no menu Template, a página CSS), onde é possível acrescentar e editar definições de CSS aos nossos templates. As estruturas dos nossos templates são apenas o ponto de partida para quem quiser aventurar-se na edição do CSS.

Para mais informações e demonstrações do que é possível fazer com CSS, recomendamos a consulta da página CSS Tutorial (página externa ao SAPO).

 

Para que serve a CSS Personalizada?

Imaginem que pretendem capitalizar todos os títulos dos posts (algo que não recomendamos fazer, pois texto em maiúsculas perde legibilidade e dá a sensação de ESTAR A SER GRITADO). Capitalizar os títulos não é uma opção disponível na página Personalização da área de gestão. Podemos, todavia, acrescentar uma definição de CSS ao template, para aplicar esse efeito. É para isso que serve a CSS Personalizada, para que possamos acrescentar algumas definições ou atributos que não estão disponíveis na página Personalização.

Na área de gestão do blog, a página CSS Personalizada encontra-se no menu Template, na página CSS.

 

Recomendações

  • Não confundir CSS com HTML. Se o objetivo é acrescentar um código ou script de HTML/Javascript à página do blog, devemos recorrer aos Componentes e Widgets, na página Layout.
  • Cuidado ao acrescentar definições de CSS: basta uma chaveta em falta para potencialmente desformatar a página do blog. Se isso acontecer, é preciso remover a definição acrescentada e validar que está tudo bem no CSS.
  • Não é necessário (nem aconselhável) ativar o Editor de CSS, para aplicar algumas definições de CSS - para isso basta abrir a página CSS e colar para lá as definições de CSS que queremos usar. O Editor de CSS só deve ser ativado por utilizadores muito familiarizados com CSS, que não precisem de usar a página Personalização. Importante: ao ativar o Editor de CSS deixa de ser possível personalizar o template (alterar as cores, tamanhos e tipos de letra) a partir da página Personalização.

13 comentários

  • Imagem de perfil

    Pedro 26.10.2016

    Boa tarde,
    qual é o blog e template em causa?
  • Imagem de perfil

    Oksi 26.10.2016

    O blog é o http://dicasdaoksi.blogs.sapo.pt/, atualmente tenho o templade Galão mas estou a remodelar o blog e a mudança seria para fazer no templade Blogzine!
  • Imagem de perfil

    Pedro 27.10.2016

    Bom dia,
    pode usar a página CSS para acrescentar definições que se aplicam ao menu. Exemplo:
    .menularge {font-size:large;}
    Esta definição aumenta o tamanho da letra do texto.
    .horizontal.menu a {font-weight:bold;}
    E esta deve colocar o texto a negrito.
  • Imagem de perfil

    Oksi 27.10.2016

    Muito obrigada, resultou! E é possível mudar a fonte?
  • Imagem de perfil

    Pedro 27.10.2016

    Boa tarde,
    Dentro das definições acima basta inserir font-family: e o nome do tipo de letra, que precisa de ser já suportado pelo blog.
  • Imagem de perfil

    Oksi 27.10.2016

    Coloquei isto: .horizontal.menu a {font-weight:bold; font-family:Mathlete;}

    mas a letra não mudou. Coloquei a fonte Mathlete que existe na parte da personalização
  • Imagem de perfil

    Oksi 28.10.2016

    Mudei os códigos para estes:

    .horizontal.menu a {font-weight:bold;}
    .horizontal.menu a {font-family:playfair display}

    e o tipo de letra mudou e ficou a negrito. No entanto, queria usar a fonte Mathlete (que também está ativa no sapo), mas quando coloco esta, não muda. Podem-me ajudar? É a última coisa que me falta para re-lançar o blog!
  • Imagem de perfil

    Pedro 31.10.2016

    Bom dia,
    Tente esta definição (com o tipo de letra que pretende):
    #container .menularge li {font-family: Arial;}
  • Imagem de perfil

    Oksi 06.11.2016

    Olá, com Arial resulta mas com fonte Mathlete não, apesar de desta fonte fazer parte da plataforma :(
  • Imagem de perfil

    Pedro 07.11.2016

    Bom dia,
    Qual é o blog em causa (precisamos de ver o blog com o template que está a usar).
  • Imagem de perfil

    Oksi 08.11.2016

    É este: http://coisastom.blogs.sapo.pt/ (este é meu blog de testes para o blog oficial - http://dicasdaoksi.blogs.sapo.pt/)
  • Imagem de perfil

    Oksi 14.11.2016

    Olá, já encontraram alguma solução?
  • Comentar:

    Comentar via SAPO Blogs

    Se preenchido, o e-mail é usado apenas para notificação de respostas.

    Este blog tem comentários moderados.