Template transparente nos blogs SAPO

« post anterior | home | post seguinte »

Segunda-feira, 6 de Agosto de 2007

Há um novo template para os blogs do Sapo!!

Ok, ok, há muitos novos templates para os blogs do Sapo, até os que são usados no blogger também podem ser usados no Sapo, mas este é especial, porque, pelo que julgo saber, é o primeiro que permite, que qualquer utilizador possa, facilmente, colocar TODO o blog, incluindo texto de posts, e conteúdo das barras laterais, de forma transparente, ou seja, permitindo ver a imagem que estiver em fundo.

E ainda permite rolar o texto da página, mantendo a imagem "parada" (atributo "fixed"), o que sempre dá um efeito catita.

Tudo isto é feito usando a personalização avançada do blog, alterando as definições de estilo no CSS (Cascading Style Sheets).

Muito boa a imagem escolhida como predefinição para o template, hein?

(estou a referir-me à segunda imagem...)

E ainda lembra vagamente a imagem predefinida do Ambiente de Trabalho no Windows XP.

Bem, chega de esforçar a vista a olhar para a imagem... (sim, para a segunda), aqui está o guia que mostra, como usar o template.

Como usar o template, com uma imagem de fundo:

Fazer login no vosso blog, e clicar em Entrar,
Ir a "Gestão do blog", "personalização", "básica",
no template SAPO, clicar em "usar este template",
Seleccionar e copiar o código abaixo (na caixa de texto ao fundo do post),
passar à área "avançada", ainda na "personalização",
em "Opções Avançadas", abrir o "Editor CSS",
marcar a caixinha "editar CSS do blog",
seleccione todo o código existente na caixa (CTRL + A, após clicar com o rato dentro da caixa),
cole o novo código que foi copiado daqui (CTRL + V).

Nota: para guardar este código para referência ou uso futuro, guarde-o num documento TXT, ou CSS (recomendado, sobretudo se usar um editor de texto com distinção de comandos por cores), no seu computador.

guardar as alterações. (pode ficar por aqui, se quiser manter a imagem predefinida, para a mudar, continue a ler)
localizar a expressão "background: url('http://css.do.sapo.pt/paisagem.jpg')", logo no inicio do código, e que define a imagem a usar como fundo,
substituir o endereço da imagem actual, pelo endereço completo da imagem que se quiser utilizar (a imagem deve ter dimensões minimas de 800 x 600 pixeis, o recomendado é de 1280 x 800).

Dicas:

Trabalhar com CSS

Como a janela que mostra o código CSS é ~~muito~~ pequena, sugiro a que, quando se queira fazer alterações ao CSS, se copie todo este código para o editor de texto preferido (eu uso o Notepad++), de forma a poder trabalhar mais confortavelmente nele. Depois é só colar o código alterado de volta para a caixa.

Imagens cortadas

Se a imagem que quiser usar ficar "cortada", por exemplo ao usar uma imagem, sei lá, da Anna kournikova, por exemplo (quem quereria usar uma imagem da Anna kournikova?), e ela aparecer "sem cabeça", pode alinhá-la, de outra forma (a predefinição é ela ser alinhada a partir do fundo, do lado esquerdo).

Para mudar para o topo esquerdo, por exemplo, altere "fixed bottom left", que está na mesma linha do endereço da imagem a usar, para "fixed top left".

Diminuir espaço em branco no topo do blog

Esta está no blog dos templates, e mostra como reduzir o espaço que fica entre o título do blog e o conteúdo do post do topo, sobretudo nos blogs que não mostram uma descrição por baixo do título:

Na janela do Editor de CSS, localizar a primeira ocorrência da tag "header", e alterar o valor "height" (altura), de 160 pixeis, para um valor inferior, por exemplo, 80. Gravar as alterações.

Ah, e aqui está o link para a página do Estoril Open, que, ao que parece, esteve na origem da criação deste template.

Código CSS para o template transparente:

body { margin:0px 10px 0px 10px; background: url('http://css.do.sapo.pt/paisagem.jpg') no-repeat fixed bottom left; } form { margin:0; padding: 0; } a, a:link, a:active {color:#3e424a; text-decoration:underline;} a:visited { color:#3e424a; text-decoration:underline;} a:hover {color:#C64F00; text-decoration:underline;} p { margin:0px;} .clear { clear: both; height: 0px; line-height: 0px; font-size: 1px;} #container { float:left; padding-left:100px; font-family:Verdana, Arial, Helvetica, sans-serif; width:685px; font-size:13px; padding-top:10px; color:#7C808C; margin: auto; } #header {width:410px; height:160px; padding-right:18px; margin-bottom:18px; } #header .title { font-size:30px; font-weight:bold; color:#777975; padding-top:30px; margin-left:0px; text-align:left;} #header .title a, .title a:link, .title a:visited, .title a:active, .title a:hover{ color:#FFFFFF; text-decoration:none;} #header .descri { color:#FFFFFF; margin-left:0px; text-align:left; font-size:13px} #header .descri a, .descri a:link, .descri a:visited, .descri a:active, .descri a:hover { color:#FFFFFF; text-decoration:underline;} #extras { float:right; width:186px; padding-top:40px; padding-left: 14px; padding-right:4px; padding-bottom:13px; background: url('') no-repeat bottom center #FFFFFF; filter:alpha(opacity=60); -moz-opacity:.60; opacity:.60; } #extras .title { font-family:Arial; font-weight:bold; font-size:13px; color:#000000;} #extras p { font-size:13px; color:#000000; font-weight:none;} #extras p a, p a:link, p a:active{ font-size:11px; color:#000000; text-decoration:underline; font-weight:normal;} #extras p a:visited { color:#000000; text-decoration:underline;} #extras p a:hover { color:#000000; text-decoration:underline;} #extras .sep {margin-bottom:20px;} #extras .sepB {margin-bottom:5px; margin-top:5px;} #extras .sapo img { border:1px solid #CCC;} #profile img { border:1px solid #000; /*float:left;*/ margin-right:7px;} #messenger img { border:0px solid #CCC;} .buton { margin-top:5px; font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #ffffff; background: #b8bbc2; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #787a80; border-right-color: #787a80; border-bottom-color: #787a80; border-left-color: #787a80;} .form { font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #787a80; background: #ffffff; border: 1px solid #787a80; margin-top:5px; padding-left:3px; padding-right:3px;} #calendar { text-align:center;} #calendar .day { width:19px; padding:2px 3px; height:19px; float:left; text-transform:uppercase; font-size:8px; color:#d8d8d8;} #calendar .dayNum { font-size:10px; font-weight:bold; color:#d8d8d8; float:left; width:19px; padding:2px 3px; height:19px;} #calendar .dayNum a, .dayNum a:link, .dayNum a:visited, .dayNum a:active{ color:#ffffff; text-decoration:underline; background-color:#b8bbc2; padding:2px 3px; } #calendar .dayNum a:hover { color:#ffffff; text-decoration:underline; background-color:#787a80; padding:2px 3px; } #calendar .today { font-size:10px; font-weight:bold; color:#ffffff; float:left; width:19px; padding:2px 3px; height:19px;} #calendar .today a, .today a:link, .today a:visited, .today a:active { color:#ffffff; text-decoration:underline; padding:2px 3px; background-color:#787a80;} #calendar .today span { color:#ffffff; padding:2px 3px; background-color:#787a80;} #calendar .today a:hover{ color:#787a80; text-decoration:underline; padding:2px 3px; background-color:#b8bbc2;} #barrita { text-align:center;} #posts { float:left; width:428px; padding-left:18px; font-size: 13px; color:#000; padding-top:20px; padding-right:18px; background:white; filter:alpha(opacity=70); -moz-opacity:.70; opacity:.70; } #posts .date { font-size:11px; font-weight:none; text-transform:none; margin-bottom:10px; color:#C64F00;} #posts .title { font-family:Trebuchet MS; font-size:16px; font-weight:bold; color:#2E404B; margin-bottom:10px;} #posts p { margin:0px 0px 5px 0px; color:#000; font-size:13px; font-weight:normal; } #posts p a, p a:link, p a:active {color:#3e424a; text-decoration:underline; font-size:13px; font-weight:normal;} #posts p a:visited {color:#3e424a; text-decoration:underline;} #posts p a:hover {color:#C64F00; text-decoration:underline;} #posts .sign { font-size:9px; margin-top:15px; margin-bottom:15px; color:#9a9ea8;} #posts .sep { width:400px; border-bottom:1px dotted #b8bbc2; height:15px; margin-bottom:20px;} #posts .sepB { margin-bottom:30px;} #posts .otherInfo { margin:5px 0px; font-size:11px; color:#7c808c;} #posts .nav { font-size:10px; text-align:center; padding-bottom:20px;} #posts .nav2 { font-size:10px; text-align:right; padding-bottom:20px;} #comentar .title { font-size:16px; color:#3E424A; font-weight:bold;} #comentar .campo1 { float:left; width:55px; padding:12px 4px 3px 0px; font-weight:bold; font-size:12px; color:#3E424A;} #comentar .campo1B { float:left; width:65px; padding:12px 4px 3px 0px; font-weight:bold; font-size:11px; color:#7c808c;} #comentar .campo1C { width:475px; float:left; padding:12px 4px 3px 0px; font-size:13px; font-weight:normal; color:#7c808c;} #comentar .campo1D { float:left; padding:10px 4px 3px 0px; font-size:11px; font-weight:normal; color:#7c808c; width:475px;} #comentar .campo2 { float:left; padding:10px 4px 3px 0px; font-size:11px; font-weight:normal; color:#7c808c; width:390px;} #comentar .campo2 em { font-style:normal; font-weight:bold; color:#7c808c; font-size:13px;} #comentar .campo2B { padding:10px 4px 3px 0px; font-size:11px; font-weight:normal; color:#7c808c;} #comentar .campo2C { width:390px; float:left; padding:12px 4px 3px 0px; font-size:13px; font-weight:normal; color:#7c808c;} #comentar .campo2C em { font-style:normal; font-weight:bold; color:#7c808c;} #comentar .campo2D { padding:12px 4px 3px 0px; font-size:13px; font-weight:normal; color:#7c808c;} #comentar .campo2D em { font-style:normal; font-weight:bold; color:#7c808c;} #comentar p { margin:0px; color:#7C808C; font-weight:bold; font-size:16px;} #comentar p a, p a:link, p a:visited, p a:active { color:#7C808C; text-decoration:underline; font-weight:bold; font-size:16px;} #comentar p a:hover {color:#3E424A; text-decoration:underline;} #comentar .txt {color:#7c808c; font-size:13px;} #comentar .options {font-size:10px;} #comentar2 { margin-left:30px;} #comentar2 .campo1C { width:445px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#7c808c;} #comentar2 .campo2C { width:360px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#7c808c;} #comentar3 { margin-left:60px;} #comentar3 .campo1C { width:415px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#7c808c;} #comentar3 .campo2C { width:330px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#7c808c;} #comentar4 { margin-left:90px;} #comentar4 .campo1C { width:385px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#7c808c;} #comentar4 .campo2C { width:300px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#7c808c;} #comentar5 { margin-left:120px;} #comentar5 .campo1C { width:355px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#7c808c;} #comentar5 .campo2C { width:270px; float:left; padding:12px 4px 3px 0px; font-size:12px; font-weight:normal; color:#7c808c;} /*SEARCH RESULTS*/ #searchResults .quantos { color:#7c808c; font-size:10px;} #searchResults .pesquisapor { font-size:11px; font-weight:bold;} #searchResults .pesquisapor a, .pesquisapor a:link, .pesquisapor a:visited, .pesquisapor a:active{ text-decoration:underline; font-weight:bold; font-size:11px;} #searchResults .pesquisapor a:hover { text-decoration:underline;} #results li { list-style-type:decimal; font-size:14px; font-weight:bold; margin:0px 0px 15px 0px;} /*title*/#results h1 { margin:0px; font-size:18px; color:#3e424a;} #results h1 a, h1 a:link, h1 a:visited, h1 a:active{color:#3e424a; text-decoration:none; font-weight:bold; font-size:14px;} #results h1 a:hover { color:#3e424a; text-decoration:underline;} /*data e autor*/#results h2 { margin:0px; font-size:9px; color:#9a9ea8; font-weight:normal;} /*texto*/#results p { margin:0px; font-weight:normal; font-size:13px;} /*highlight*/#results em { font-weight:bold; font-style:normal;} /*url*/#results h3 { margin:0px; font-size:11px; font-weight:normal; } #results h3 a, h3 a:link, h3 a:visited, h3 a:active{ text-decoration:underline; font-weight:normal; font-size:11px;} #results h3 a:hover { text-decoration:underline;} #navega p{ text-decoration:none; float:right; margin:0px 0px 25px 0px; padding:2px 4px 2px 4px; font-size:10px; font-weight:bold; text-transform:uppercase;} #navega p a, p a:link, p a:visited, p a:active { text-decoration:none; padding:2px 4px 2px 4px; font-weight:bold; font-size:10px;} #navega p a:hover { text-decoration:none; padding:2px 4px 2px 4px; background-color:#E1E1D2;} #navega em { text-decoration:none; padding:2px 3px 2px 3px; font-style:normal; font-weight:bold; border:solid 1px #E1E1D2;} /*ADWORDS*/ #adw {font-size:10px; margin-bottom:20px; width:150px;} #adw #adwtop * p {color:#787a80;}#adw #adwcont .adwtit a {color:#9d9fa5; text-decoration:underline;} #adw #adwcont .adwtit .title {color:#9d9fa5; text-decoration:underline; font-size:10px;} #adw #adwsub {display:none;} #adw #adwcont .adwtit {font-weight:normal;} #adw #adwcont .adwtit a:hover, #adw #adwsub a:hover, #adw #adwcont .urlbot a:hover {color:#787a80; text-decoration:underline;} #adw #adwcont .urlbot a, .urlbot a:link,.urlbot a:visited,.urlbot a:active {color:#9d9fa5; text-decoration:underline;} #adw #adwcont #adwad4, #adw #adwcont #adwad5, #adw #adwtop #adwright, #adw #adwbot, #adw #adwcont .s {display:none;} #adw .pos {display:none;} #adw .url {display:none;} #adw .adwline {margin-bottom:10px;}

Fonte: Templates do Sapo