OOoES/Desarrollo/CSS

From OpenOffice.org Wiki

Jump to: navigation, search

Este documento explica la estructura de los scripts de CSS en el sitio de OOoES. En la pagina de OOoES esta dividido en dos archivos CSS.

  • principal.css
  • estructura.css
  • tour.css


Contents

Principal.css

El archivo de la pagina principal tuvimos una hoja de estilos llamado Principal.css. Esta pagina principal tendremos dividos en diferentes estilos tales como:

  • Encabezados
  • Logo y menu de imágen
  • Menu inferior

Encabezados

El encabezado trata de diferentes clases e identificadores. Este encabezado ha sido depreciado ya que pertenece a un estilo anterior. Este html todavia pertenece en el código sin embargo esta comentado y era para una serie de menus.

Sin embargo los encabezados utiles son las ligas asi como ocultar la barra de menu designada en tigris como identificadores llamados toptabs. El siguiente identificador es una div nueva que asigna una sombra debajo de la barra de opciones llamado #contextualinformation.contentpart. Esto trae la clase y el identificador.

El codigo que se utiliza es este:

[css] a { 

   text-decoration: none !important;
   color: #09388F;

}

  1. toptabs { 
    display: none ! important;

}

  1. contextualinformation.contentpart { 
    background: none ! important;

}

Logo y menu de imagen

Aqui podemos el CSS que se asigna al cuerpo del sitio de la pagina principal, esta abarca el menu, logo y un break intermedio para dar espacio. Aqui tenemos tres categorias:

  • break - espacio entre el logo y el menu
  • logo - contiene la imagen wiregull.png como fondo asi como alto por ancho
  • menu derecho - mueve el menu a la derecha y utiliza los tipos de opciones

[css]

  1. break {

margin: auto; font-weight: bold; width: 400px; margin-bottom: 5em; }

  1. opt img {

padding-bottom:1em; border: 0px; }

  1. logo {

width: 100%; height: 300px; float:right; background-image:url('../images/wiregulls.png'); background-repeat:no-repeat; }

  1. menu {

float:right; width: 276px; margin-bottom: 3em; }

Menu Inferior

El menu inferior transforma una lista no ordenada (UL) en una barra con los diferentes modulos de OpenOffice.org usando los logos de cada modulo como imagen de fondos y un boton para tomar el tour de OpenOffice.org.

Aqui usamos las siguientes clases:

[css] /* Menus horizontales de abajo */ .lmenu { /*float: right; margin-top: 0px; padding-top: 0px; top: 0px; */ position:relative; width:100%; height:125px; background-color:#CDDEF8; border: 1px solid #000066; }

.lmenu ul { list-style: none; display: inline; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:600; color:#000066; }

.lmenu li { font-size: 14px; display: inline; padding-top:100px; padding-right:70px; background-repeat:no-repeat; margin-right: 3em; }

  1. Tour {

margin-left: 80%; background-image:url('../images/pill.png'); background-repeat:no-repeat; color: white; font-size: 14px; height: 30px; padding-top:5px; padding-left: 8px; font-family: Verdana, sans; text-decoration: none; }

Estructura.css

Esta es la estructura base de todas las hojas, esta intenta esconder los elementos que trae Collabnet por defacto. El script oculta:

  • Columnas de la derecha llamada #leftcol
  • Barra de navegacion #navcol
  • Información contextual #contextualinformation y #contextualinformation.contentpart
  • Las etiquetas #toptabs

Pie de Pagina

[css]

  1. pie {

clear:left; }

.tabs { display: none ! important; }

  1. projecttools {

display: none ! important; }

  1. leftcol { display: none ! important;

}

  1. navcol { display: none ! important;

}

  1. contextualinformation { display: none ! important;

}

  1. contextualinformation.contentpart { display: none ! important;

}

  1. toptabs { display: none ! important;

}

Estructura

Esta parte agrega la estructura del sitio incluye diferentes caracteristicas que intentan definir:

  • Formato generico (h1, h2, a)
  • Barra lateral
  • Menu y submenu
  • Cuerpo del documento

El formato generico esta compuesto de elementos 'genericos' dentro del documento. Este no especifica p ya que podria afectar otros estilos.

[css] /* --- Reglas para elementos generales --- */ body { margin: 0px; }

h1 { padding: 5px; background-color: #DEE4EE; -moz-border-radius: 5px; }

h2 { padding-bottom: 2px; border-bottom: 2px solid #DEE4EE; }

a { 

       text-decoration: none !important;
       color: #09388F;

}

Barra lateral realmente contiene no solo el espacio de barra lateral sino tambien contiene tanto menu como submenu del que se encuentran en esta seccion. Dentro del menu definimos, la lista (UL), los elementos (LI), las acciones (hover) y una sub-identificador llamado .current. Tenemos tambien un estilo para las ligas (a).

[css] /* --- Seccion Barra Lateral --- */

  1. barra_lateral {

float: left; width: 180px; }

/* --- Menu --- */

  1. menu { }
  1. menu ul {

margin-left:10px; padding-left:0; list-style-type:none; }

  1. menu_principal li {

padding:10px; margin-bottom:5px; background-color:#DEE4EE; -moz-border-radius: 5px; cursor: pointer; }

  1. menu_principal li:hover{ background-color: #E1ECF4; }
  1. menu_principal li.current {

background-color: #F2F2F2; font-weight: bold; color: gray; cursor:default; }

  1. menu_principal a {

text-decoration:none !important; font-weight:bold; color: #06348C;

}

  1. menu_principal a.current {

color: grey; }

/* -- submenu -- */

  1. submenu {

margin-top: 15px; -moz-border-radius:5px; }

  1. submenu li {

padding: 5px; background-color:#A2D700; -moz-border-radius:5px; margin-bottom:5px; margin-left:15px; cursor: pointer; }

  1. submenu li:hover { background-color:#C4E65D; }
  1. submenu li.current {

background-color:#D1D1D1; //color: white; cursor: default; }

  1. submenu a {

text-decoration: none !important; }

  1. submenu a.current {

color: white; }

Finalmente tenemos el cuerpo del documento y este se aplica al area denominada contenido. El contenido es una clase la cual se asigna el margen divisorio entre el menu y el contenido. Tambien clasifica elementos generales como el posicionamiento del area.

Para el texto 'especial' como las citas se tiene una clase alternativa llamada #head_menu la cual asigna propiedades especiales. Finalmente .optionitem presenta caracteristicas para items como imagenes u objetos que se quieran tener en el contenido.

[css] /* --- Cuerpo del documento --- */

.content { margin-left: 20%; padding-left: 10px; padding-top: 1px; border-left: dashed 1px gray; margin-right:10px; }

.content a { text-decoration: none !important; }

.seccion { padding: 5px; margin: 5px; }

.content p { margin-left: 5px; }

.contenido { margin-left: 5%; margin-right: 5%; font-size: 1em; }

.head_menu { background-color:#000099; color:white; font-size:10px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-weight: bold; border-right-width: 2px; border-bottom-width: 2px; border-right-style: solid; border-bottom-style: solid; border-right-color: #555555; border-bottom-color: #555555; padding-top: 5px; padding-bottom: 2px; }

.optionitem { background: #b9e06c; margin-bottom: 2em; padding: 0.5em; padding-left: 1em; padding-right: 1em; cursor: pointer; -moz-border-radius: 5px; }

Retrieved from "http://wiki.services.openoffice.org/wiki/OOoES/Desarrollo/CSS"
Personal tools