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 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.

2 comentários

  • Imagem de perfil

    Pedro 09.03.2015

    Bom dia,

    o template que escolheu coloca uma cor escura por cima das imagens de cabeçalho, para que o título fique sempre legível. Pode escolher outro template sem essa funcionalidade, para que isso não aconteça.
  • Comentar:

    Comentar via SAPO Blogs

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

    Este blog tem comentários moderados.