Parte 6 — MenttesLabs

Document Actions

Parte 6

Trabajando con CSSManager

Ejemplo:

Recursos

Logo
Main font: Arial, Helvetica, sans-serif
Default text color: #66CCFF
Page background color: #333
Unvisited link color: #0f0
Active link color: #66CCFF
Visited link color: #0f0
Annotation border style: solid
Default border color: #0f0
Secondary background color: #333
Secondary text color: #0f0
Heading font: Arial, Helvetica, sans-serif

Editando CSS

Resources

En un sitio plone nuevo ir a plone -> zmi -> portal_css

Herramientas para Firefox

Mockup

Creando producto

$ paster create -t plone3_theme

Editar buildout.cfg

eggs = 
      example.theme 

develop =
      src/example.theme

zcml = 
      example.theme

Luego ejecutar

$ bin/buildout -o
$ bin/instance fg

Logo

logo.jpg

Encabezado

/********************************HEADER**************************************/
#portal-top {
   background-color: #333;
   border: 5px solid white;
   padding-bottom:5px;
}
/***logo***/
#portal-logo img {
   border:none;
   text-decoration:none;
   margin:20px;
}
/***tabs***/
#portal-globalnav {
   margin:0px 5px;
   padding:8px;
   background-color:#e9e8df;
}
#portal-globalnav li{
    display:inline;
    padding:3px 0px;
    font-size:14px;
}
#portal-globalnav li a {
  color:#333;
  text-decoration:none;
  text-transform:uppercase;
  padding:0px 5px;
}
/*cuando pasamos sobre una tab*/
#portal-globalnav li a:hover {
   color:#600707;
}
/*cuando una tab esta seleccionada*/
#portal-globalnav li.selected {
  background-color:#333;
}
#portal-globalnav li.selected a {
  color:#fff;
}

Portlets

/***************************** PORTLETS***************************************/

.portlet dd {
    margin:10px;/*ffx margin supression*/
}
.portlet {
   border: 4px solid #e9e8df;
   padding:10px;
}
.portletHeader {
  text-align:center;
}
.portletHeader a{
  color:#4c4a3e;
  font-size:16px;
  text-decoration:none;
}

/* NAVTREE*/
.portletNavigationTree img{
   display:none;/*ocultamos la imagen de los items del navtree*/
}
.portletNavigationTree dd.portletItem .navTreeItem a{
   color:#4c4a3e;
   text-decoration:none;
   padding:0.5em !important;
   border:2px solid transparent;
}


.portletNavigationTree dd.portletItem .navTreeItem a:hover {
  border:2px solid #e9e8df !important;
  color:white !important;
  background-color:#333;
}
.portletNavigationTree dd.portletItem .navTreeItem .navTreeCurrentItem {
  background-color:transparent;
  color:#333 !important;
  border:2px solid transparent !important;
}

Area de contenido

/***************************** CONTENT AREA ********************************/

#region-content {
   padding:0px 10px;
}
#content {
   border:4px solid #E9E8DF;
}
#content h1.documentFirstHeading {
   font-size:22px;
   color:#333;
   background-color:#E9E8DF;
   padding:10px;
   margin:0px;
}

#plone-document-byline {
   color:gray;
   font-size:10px;
   margin:10px;
}

.documentDescription, #link-presentation {
   margin:10px;
   font-size:12px;
}
#parent-fieldname-text {
   margin:10px;
}

h2,h3,h4 {
   font-size:16px;
   color:#333;
}

p{
   color:#333;
   font-size:12px;
}

Footer

/****************************** FOOTER Y COLOPHONE *************************/

#portal-footer {
   margin:20px;
   border-top: 4px solid #333;
}

#portal-colophon {
   padding:0px 20px 10px 20px;
}
#portal-colophon ul {
   padding:0px;
}
#portal-colophon li {
   display:inline;
   padding:0px 10px 0px 0px;
}
#portal-colophon li a{
 color:#333;
 text-decoration:none;
}