Ayuntamiento de Granada: Ayuntamiento

Menú: (Estilos estándar) (Estilos estendidos) (Estilos de bordes) (Iconos) (Colores)

Novedades
Estilo	Ejemplo	Donde se usa
filavistas	[<div class="filavistas">...</div>]	Para vistas donde una columna tiene más de una línea o más de un campo y dentro pueden utilizarse br's <-ahí hay dos lleva una linea abajo
bordeimg	[<div class="bordeimg">...</div>]	A las imagenes de este div, le coloca un borde. Es útil para objetos anexos (que no siempre incorporaba los iconos) ejemplo:
LI.mgv	[<li class="mgv">...</li>]	Para listas Con triangulitos
LI.mgvp	[<li class="mgvp">...</li>]	Para listas Con cuadraditos
hrptos	[<hr class="hrptos"> <div class="hrptos"> </div>]	borde inferior punteado
cabpagina	[<div class="cabpagina"> </div>]	borde inferior punteado, contenido negrita y centrado
tablatr	[<div class="tablatr"> </div>]	En las tablas de ese div, al pasar el raton por una celda, se ilumina la fila (como esta tabla)
calculoNum	[<div class="calculoNum"> </div>]	Para sacar el número de páginas de una vista (cuando se ejecuta el agente calculonum)

Estilos estándar
Estilo	Ejemplo	Donde se usa
mainBody	[<div class="mainBody">...</div>]	Para el fondo de la página por defecto
mainMarco	[<div class="mainMarco">...</div>]	Marco de la página donde se sitúan el escudo, sugerencias, pestañas, etc.
textoNegro	[<div class="textoNegro">...</div>]	Texto normal. Normalmente no es necesario ponerlo ya que se trata del estilo por defecto
textoRojo	[<div class="textoRojo">...</div>]	Texto normal rojo. Para detarcar algo dentro de un texto normal
nota	[<div class="nota">...</div>]	Notas al texto normal. Aclaraciones u otro tipo de texto que quiere diferenciarse del texto general
TitularRojo	[<div class="titularRojo">...</div>]	Para títulos normales.
vinculoAncla	[<a href="#" class="vinculoAncla">...</a>] [<div class="vinculoAncla">...</div>]	Enlace de anclado (dentro del propio documento)
vinculoanclao	[<a href="#" class="vinculoanclao">...</a>] [<div class="vinculoanclao">...</div>]	Enlace de anclado con fondo claro
vinculoInterno	[<a href="#" class="vinculoInterno">...</a>] [<div class="vinculoInterno">...</div>]	Enlace a otro documento o página del Ayuntamiento (www.granada.org)
vinculoInternoO	[<a href="#" class="vinculoInternoO">...</a>] [<div class="vinculoInterno">...</div>]	Enlace a otro documento o página del Ayuntamiento con fondo claro
vinculoExterno	[<a href="#" class="vinculoExterno">...</a>] [<div class="vinculoExterno">...</div>]	Enlace a una pagina de internet externa al Ayuntamiento
vinculoExternoO	[<a href="#" class="vinculoExternoO">...</a>] [<div class="vinculoExternoO">...</div>]	Enlace a una pagina de internet externa al Ayuntamiento
vinculoBlancoNegrita	[<a href="#" class="vinculoBlancoNegrita"> ...</a>] [<div class="vinculoBlancoNegrita"> ...</div>]	Rótulos de campos y enlaces de las vistas. Normalmente no se utiliza en documentos
vinculorojo	[<a href="#" class="vinculorojo"> ...</a>] [<div class="vinculorojo"> ...</div>]	Enlaces especialmente remarcables
vinculoverde	[<a href="#" class="vinculoverde"> ...</a>] [<div class="vinculoverde"> ...</div>]	Enlaces especialmente remarcables
stxt	[<input type=text class="stxt" name="texto">] [<div class="stxt">...</div>]	Cuadro de texto. Entrada de texto
stxtv	[<input type=text class="stxtv" name="texto">] [<div class="stxtv">...</div>]	Cuadro de texto. Entrada/salida de texto
stxta	[<input type=text class="stxta" name="texto">] [<div class="stxta">...</div>]	Cuadro de texto. Entrada/salida de texto
scap	[<span class="scap">...</span>]	Rótulos de campos
sbtn	[<input type=button class="sbtn" value="Enviar datos">] [<div class="sbtn">...</div>]	Botones de formularios
sbtn1	[<input type=button class="sbtn1" value="Enviar datos">] [<div class="sbtn1">...</div>]	Botones de formularios
Estilos Extendidos
Estilo	Ejemplo	Donde se usa
vinculoCapa	[<a href="#" class="vinculoCapa">...</a>]	Normalmente no se utiliza en documentos
vinculoNegro	[<a href="#" class="vinculoNegro">...</a>]	Normalmente no se utiliza en documentos
vinculoBlanco	[<a href="#" class="vinculoBlanco">...</a>]	Normalmente no se utiliza en documentos
vinculoNegroNegrita	[<a href="#" class="vinculoNegroNegrita">...</a>] [<div class="vinculoNegroNegrita">...</div>]	Normalmente no se utiliza en documentos, salvo para resaltar palabras en un texto y en vinculos internos por razones de contraste.
vinculoBlancoNegrita2	[<a href="#" class="vinculoBlancoNegrita2"> ...</a>] [<div class="vinculoBlancoNegrita2"> ...</div>]	Rótulos de campos y enlaces de las vistas en zonas con fondo muy oscuro. Normalmente no se utiliza en documentos
TitularCeleste	[<div class="titularCeleste">...</div>]	Para títulos y no se utiliza "titularRojo" por razones de contraste con el fondo
TitularAmarillo	[<div class="titularAmarillo">...</div>]	Para títulos y no se utiliza "titularRojo" por razones de contraste con el fondo
cabeceraAzul	[<div class="cabeceraAzul">...</div>]	Títulos de primer nivel en el Correo Juvenil
cabeceraAzulClaro	[<div class="cabeceraAzulClaro">...</div>]	Títulos de segundo nivel en el Correo Juvenil
cabeceraVerde	[<div class="cabeceraVerde">...</div>]	Títulos primer nivel en guía de Parques y árboles
cabeceraVerdeClaro	[<div class="cabeceraVerdeClaro">...</div>]	Títulos segundo nivel en guía de Parques y árboles
cabeceraRojo	[<div class="cabeceraRojo">...</div>]	Títulos de primer nivel en Actividades Culturales
cabeceraRojoClaro	[<div class="cabeceraRojoClaro">...</div>]	Títulos de Segundo nivel en Actividades Culturales
textofondorojo	[<div class="textofondorojo">...</div>]	julio 2013: Agenda Palacios
textofondoverde	[<div class="textofondoverde">...</div>]	julio 2013: Agenda Palacios
textofondoazul	[<div class="textofondoazul">...</div>]	julio 2013: Agenda Palacios
textofondonaranja	[<div class="textofondonaranja">...</div>]	julio 2013: Agenda Palacios
buscador	[<input type=text class="buscador" name="texto">] [<div class="buscador">...</div>]	Cuadro de texto. Entrada de texto

celdasSeparadas
A nivel de div	[<div class="celdasSeparadas">...</div>]	Para tablas con solo una celda por fila

Estilos 2007/08 y accesibilidad
tablacontenido	[<div class="tablacontenido">...</div>]	Fondo degradado para cabeceras
actCultural
notas	[<div class="notas">...</div>]	Fondo degradado con texto centrado para notas
pruebas	[<div class="notas">...</div>]	Fondo degradado con texto centrado para notas
boxInfo	[<div class="boxInfo">...</div>]	Fondo degradado para avisos
h1	[<h1>...</h1>]	Titulo de las páginas
h2	[<h2>...</h2>]	segundo titulo de las páginas
h3	[<h3>...</h3>]	Tercer titulo de las páginas
h4	[<h4>...</h4>]	cuarto titulo de las páginas
Anchos de columnas	class="ancho10" class="ancho20" class="ancho30" class="ancho40" class="ancho50" class="ancho60" class="ancho70" class="ancho80" class="ancho90" class="ancho100" class='ancho20l' 'ancho60c' 'ancho20r'
Alineación de textos	class="textaligncenter" class="textalignright" class="textalignleft" class="textalignjustify" class="aligncenter" class="alignright" class="alignleft"
border0	[<img src="..." class="border0">]	Sin border para imágenes y celdas

ficha - fichaTitulo - fichaContent

Para fichas, como las de la guia de recursos
/inet/wpim.nsf

Estilos de borde
bordeTablaExterior1	tablacontenido

Iconos de imágenes

	[<div class="ageImagen cCine"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Cine" title="Cine"></div>]
	[<div class="ageImagen cIcon"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Icon" title="Icon"></div>]
	[<div class="ageImagen cCent"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Cent" title="Cent"></div>]
	[<div class="ageImagen cCong"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Cong" title="Cong"></div>]
	[<div class="ageImagen cDepo"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Depo" title="Depo"></div>]
	[<div class="ageImagen cEspe"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Espe" title="Espe"></div>]
	[<div class="ageImagen cExpo"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Expo" title="Expo"></div>]
	[<div class="ageImagen cFies"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Fies" title="Fies"></div>]
	[<div class="ageImagen cLite"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Lite" title="Lite"></div>]
	[<div class="ageImagen cMonu"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Monu" title="Monu"></div>]
	[<div class="ageImagen cMusi"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Musi" title="Musi"></div>]
	[<div class="ageImagen cOtra"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Otra" title="Otra"></div>]
	[<div class="ageImagen cProg"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Prog" title="Prog"></div>]
	[<div class="ageImagen cTall"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Tall" title="Tall"></div>]
	[<div class="ageImagen cTeat"><img class="ageImagenImg" src="/icons/ecblank.gif" alt="Teat" title="Teat"></div>]

Iconos de imágenes de Talleres (/v10/actcenciv.css)

	[<div class="ageImagen"><img class="cenciv act-ot" src="/icons/ecblank.gif" alt="act-ot" title="act-ot"></div>]
	[<div class="ageImagen"><img class="cenciv act-tp" src="/icons/ecblank.gif" alt="act-tp" title="act-tp"></div>]
	[<div class="ageImagen"><img class="cenciv act-ts" src="/icons/ecblank.gif" alt="act-ts" title="act-ts"></div>]
	[<div class="ageImagen"><img class="cenciv act-co" src="/icons/ecblank.gif" alt="act-co" title="act-co"></div>]
	[<div class="ageImagen"><img class="cenciv act-td" src="/icons/ecblank.gif" alt="act-td" title="act-td"></div>]
	[<div class="ageImagen"><img class="cenciv act-cc" src="/icons/ecblank.gif" alt="act-cc" title="act-cc"></div>]
	[<div class="ageImagen"><img class="cenciv act-ex" src="/icons/ecblank.gif" alt="act-ex" title="act-ex"></div>]
	[<div class="ageImagen"><img class="cenciv act-fi" src="/icons/ecblank.gif" alt="act-fi" title="act-fi"></div>]
	[<div class="ageImagen"><img class="cenciv act-gy" src="/icons/ecblank.gif" alt="act-gy" title="act-gy"></div>]
	[<div class="ageImagen"><img class="cenciv act-jo" src="/icons/ecblank.gif" alt="act-jo" title="act-jo"></div>]
	[<div class="ageImagen"><img class="cenciv act-me" src="/icons/ecblank.gif" alt="act-me" title="act-me"></div>]
	[<div class="ageImagen"><img class="cenciv act-se" src="/icons/ecblank.gif" alt="act-se" title="act-se"></div>]
	[<div class="ageImagen"><img class="cenciv act-te" src="/icons/ecblank.gif" alt="act-te" title="act-te"></div>]
	[<div class="ageImagen"><img class="cenciv act-vi" src="/icons/ecblank.gif" alt="act-vi" title="act-vi"></div>]
	[<div class="ageImagen"><img class="cenciv act-vf" src="/icons/ecblank.gif" alt="act-vf" title="act-vf"></div>]
	[<div class="ageImagen"><img class="cenciv act-vs" src="/icons/ecblank.gif" alt="act-vs" title="act-vs"></div>]

Colores
#91AC8D (fondo)	#FFC0B6	#E0FFFF	#FFFFD0
#819c7d (mainmarco)	#005129 (escudo)	#ab2d42 (titulo)	#d2d252 (path)
Pestañas
#dda221	#3366cc	#bc7a1a	#93acbc
#ffcc99	#9db40c	#b7af99	#dc5555
#33b733	#00cccc	#6666b7	#99cc66

plegableTitulo, dentro imagen como plegableImg y el texto como plegableTexto

plegableContent y para el contenido que aparece/desaparece, la clase

Menú: (Estilos estándar) (Estilos estendidos) (Estilos de bordes) (Iconos) (Colores)

Lista (style='padding:0 0 .5em 3em;margin:0'):

opcion 1
opcion 2

Lista (sin style):

opcion 1
opcion 2

Lista (li20):

opcion 1: <li class='li20'>
opcion 2: <li class='li20'>

Lista (xli20 / xli21):

opcion 1: <li class='xli20'>
opcion 2: <li class='xli21'>

Lista (xli200 / xli210):

opcion 1: <li class='xli200'>
opcion 2: <li class='xli210'>

Lista (xlid / xlid1):

opcion 1: <li class='xlid'>
opcion 2: <li class='xlid1'>

1. introducir los datos

2. Introducir fotos

3. Finalizar

Cuerpohola

Fin del documento

Iconos
[<img src='/v10/img/pleg.png' alt='Plegar/Desplegar' title='Plegar/Desplegar'>]	[<img src='/v10/img/despleg.png' alt='Plegar/Desplegar' title='Plegar/Desplegar'>]
[<img src="/v10/IR_INICIO_OFF.png" alt="Ir al principio" title="Ir al principio">]	[<img src="/v10/IR_INICIO_ON.png" alt="Ir al principio" title="Ir al principio">]
[<img src="/v10/IR_FIN_OFF.png" alt="Ir al final" title="Ir al final">]	[<img src="/v10/IR_FIN_ON.png" alt="Ir al final" title="Ir al final">]
[<img src="/v10/RETROCEDER_OFF.png" alt="Ir a la página anterior" title="Ir a la página anterior" >]	[<img src="/v10/RETROCEDER_ON.png" alt="Ir a la página anterior" title="Ir a la página anterior" >]
[<img src="/v10/VOLVER_OFF.png" alt="Volver a la lista" title="Volver a la lista"gt;]	[<img src="/v10/VOLVER_ON.png" alt="Volver a la lista" title="Volver a la lista"gt;]
[<img src="/v10/AVANZAR_OFF.png" alt="Ir a la página siguiente" title="Ir a la página siguiente">]	[<img src="/v10/AVANZAR_ON.png" alt="Ir a la página siguiente" title="Ir a la página siguiente">]
[<img title="Plegar categorías" alt="Plegar categorías" src="/v10/img/menos1_OFF.png">]	[<img title="Plegar categorías" alt="Plegar categorías" src="/v10/img/menos1_ON.png">]
[<img title="Desplegar categorías" alt="Desplegar categorías" src="/v10/img/mas1_OFF.png">]	[<img title="Desplegar categorías" alt="Desplegar categorías" src="/v10/img/mas1_ON.png">]
[<img title="Imprimir" alt="Imprimir" src="/v10/print_OFF.png">]	[<img title="Imprimir" alt="Imprimir" src="/v10/print_ON.png">]
[<img title="primero" alt="primero" src="/v10/btnpri_ON.png">]	[<img title="anterior" alt="anterior" src="/v10/btnant_ON.png">]
[<img title="Siguiente" alt="Siguiente" src="/v10/btnsig_ON.png">]	[<img title="Ultimo" alt="Ultimo" src="/v10/btnult_ON.png">]
[<img title="ver 100%" alt="ver 100%" src="/v10/btn100_ON.png">]	[<img title="ver 100%" alt="ver 100%" src="/v10/btnajusta_ON.png">]
[<img title="ver 100%" alt="ver 100%" src="/v10/btnmas_ON.png">]	[<img title="ver 100%" alt="ver 100%" src="/v10/btnmenos_ON.png">]
[<img title="ver 100%" alt="ver 100%" src="/v10/btnnew_ON.png">]	[<img title="ver 100%" alt="ver 100%" src="/v10/rss_ON.png">]
[<img title="ver 100%" alt="ver 100%" src="/v10/size_ON.png">]	[<img title="ver 100%" alt="ver 100%" src="/v10/contact_ON.png">]
[<img title="ver 100%" alt="ver 100%" src="/v10/home_ON.png">]	[<img title="ver 100%" alt="ver 100%" src="/v10/seguridad1_OFF.png">]
[<img title="ver 100%" alt="ver 100%" src="/v10/seguridad2_OFF.png">]	[<img title="ver 100%" alt="ver 100%" src="/v10/info_OFF.png">]
[<img title="ver 100%" alt="ver 100%" src="/v10/calendario_OFF.png">]	[<img title="ver 100%" alt="ver 100%" src="/v10/grafico2_OFF.png">]
[<img src="/icons/vwicn103.gif" border=0 alt="Documento anterior">]	[<img src="/icons/vwicn104.gif" border=0 alt="Documento siguiente">]
[<img src="/icons/vwicn101.gif" border=0 alt="Volver a vista">]	[<img src="/icons/imprint.gif" border=0 alt="Vista previa para impresión">]
[<img alt="primeros" title="Primero" class="border0" src="/icons/bck.gif">]	[<img alt="Final" title="Final" class="border0" src="/icons/ultimo.gif">]
[<img border="0" title="Plegar" alt="Plegar" src="/icons/bpleg.gif">]	[<img border="0" title="Desplegar" alt="Desplegar" src="/icons/bdesp.gif">]
[<img class='border0' title='Se abre en ventana nueva' alt='Se abre en ventana nueva' src='/otraven.gif' />]
	[<img src="/blank.gif" class="vxbtn (tipo) 0\|1" onmouseover="vxBtn(this);" onmouseout="vxBtn(this);" />] Ejemplo: [<img src="/blank.gif" class="vxbtn sig0" onmouseover="vxBtn(this);" onmouseout="vxBtn(this);" />] (sin mouseout)

Estilos web

h1

h2

h3

h4