Customizando o layout do plone
Nesse artigo vamos aprender como modificar a "cara" do Plone, fazendo algumas customizações em sua aparência, cor e layout.
Parte 5: Colocando Bordas no site Plone
Para adicionar um borda a um site Plone, novamente recorremos ao CSS, vamos acessar novamente o arquivo ploneCustom.css e adicionar as
linhas abaixo:
/* Coloca as bordas no site */
#portal-top {
background: #FFFFCC;
border-top: 2px dotted black; /* Borda em cima */
border-right: 2px dotted black; /* Borda a direita */
border-left: 2px dotted black; /* Borda a esquerda*/
}
#portal-columns {
border-right: 2px dotted black; /* Borda a direita */
border-bottom: 2px dotted black; /* Borda em baixo */
border-left: 2px dotted black; /* Borda a esquerda*/
}
#portal-top {
background: #FFFFCC;
border-top: 2px dotted black; /* Borda em cima */
border-right: 2px dotted black; /* Borda a direita */
border-left: 2px dotted black; /* Borda a esquerda*/
}
#portal-columns {
border-right: 2px dotted black; /* Borda a direita */
border-bottom: 2px dotted black; /* Borda em baixo */
border-left: 2px dotted black; /* Borda a esquerda*/
}
Como no exemplo anterior, colocamos no CSS:
#portal-top { background: #FFFFCC; }
Vamos substituí-lo pelo acima. Salve e veja o resultado:
Depois de todas essas modificações, o nosso ploneCustom.css deverá estar dessa forma:
/* Centraliza o Site no Meio da Página */
#visual-portal-wrapper {
margin: 2em auto 0 auto;
width: 760px;
}
/* Coloca as bordas no site */
#portal-top {
background: #FFFFCC;
border-top: 2px dotted black; /* Borda em cima */
border-right: 2px dotted black; /* Borda a direita */
border-left: 2px dotted black; /* Borda a esquerda*/
}
#portal-columns {
border-right: 2px dotted black; /* Borda a direita */
border-bottom: 2px dotted black; /* Borda em baixo */
border-left: 2px dotted black; /* Borda a esquerda*/
}
#visual-portal-wrapper {
margin: 2em auto 0 auto;
width: 760px;
}
/* Coloca as bordas no site */
#portal-top {
background: #FFFFCC;
border-top: 2px dotted black; /* Borda em cima */
border-right: 2px dotted black; /* Borda a direita */
border-left: 2px dotted black; /* Borda a esquerda*/
}
#portal-columns {
border-right: 2px dotted black; /* Borda a direita */
border-bottom: 2px dotted black; /* Borda em baixo */
border-left: 2px dotted black; /* Borda a esquerda*/
}