Comunidad de diseño web y desarrollo en internet online

Indice alfabético de etiquetas expandibles

Citar            
MensajeEscrito el 31 Dic 2009 03:05 pm
a partir de esta página

[/url]

he creado un índice alfabético de etiquetas expandibles



para mi blog

[url=http://afasiaarq.blogspot.com/]



¿alguien sabe cómo puedo modicar el estilo del texto del índice? yo soy un completo analfabeto en css.


este es el código del widget de mi css:

Código :

<b:widget id='Label2' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<!-- INICIO -->
<script type='text/javascript'>

// definición de las variables utilizadas
var elBlog ="<data:blog.homepageUrl/>"; // la URL del blog
var listaEtiquetas = new Array(); // el array que contendrá las etiquetas
var listaEtiquetasNum=0; // contador auxiliar
var laSeccion = ""; // guarda los nombres de las categorías
var elEnlace =""; // el enlace a cada subcategoría

// usamos los datos de Blogger para recopilar todas las etiquetas del blog
<b:loop values='data:labels' var='label'>
// leemos el nombre de cada una de las etiquetas
var elNombre = "<data:label.name/>";
// lo guardamos en el array
listaEtiquetas[listaEtiquetasNum] = elNombre;
listaEtiquetasNum ++; // incrementamos el contador
</b:loop>

// función auxiliar para expandir y contraer las secciones
function linkLista(cual) {
var idListaUL = document.getElementById(cual);
if(idListaUL.style.display == 'none') {
idListaUL.style.display = 'block';
}else{
idListaUL.style.display = 'none';
}
return false;
}

</script>

<script type='text/javascript'>
//<![CDATA[

// leemos todas las etiquetas, las separamos en dos partes y procesamos
for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var leerSeccion = cual.substr(0,1); // guardamos el nombre de la categoría
var leerItem = cual; // guardamos el nombre de la subcategoría
// si no hay una subategoría, leerItem no tendrá un valor y lo salteamos
if (leerItem!=undefined) {
// sólo mostramos categorías y subcategorías
if (laSeccion != leerSeccion) {
// si todavía no lo hicimos, creamos el enlace de la categoría desplegable
document.write("</ul>"); // por las dudas, cerramos cualquier lista abierta
laSeccion = leerSeccion; // el nombre de la categoría (el continente)
// creamos un enlace con una clase CSS llamada listadoSECCION que servirá para desplegar y contraer la categoría
document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\">" + laSeccion + "</a> ");
// iniciamos el bloque oculto con la lista de subcategorías a las que le establecemos una clase CSS llamada listadoBloqueITEMS
document.write("<ul class=\"listadoBloqueITEMS\" id=\"" + laSeccion + "\" style=\"display:none;\">");
}
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + leerItem
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<span class=\"listadoITEM\"><a href=\""+ elEnlace + "\">" + leerItem + "</a></span> ");
}
}
//]]>
</script>
<!-- FIN -->
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget> 



gracias.!

Por anafasia

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 31 Dic 2009 03:12 pm
crea estas declaraciones en tu css:

Código HTML :

.listadoBloqueITEMS a {/*propiedades que necesites*/}
.listadoBloqueITEMS a:hover {/*propiedades al posicionarte sobre cada enlace*/}


Saludos

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 31 Dic 2009 06:47 pm
probaré con calma a ver si soy capaz de adivinar dónde van las líneas. si no lo logro pediré alguna aclaración más.

muchas gracias, de verdad.

Por anafasia

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Ene 2010 06:27 pm
lo he intentado, insertando las líneas en varios sitios pero no he logrado nada.

¿sabes dónde hay que insertarlas exactamente? ¿es necesario añadir algo a las líneas?

gracias por adelantado.

Por anafasia

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Ene 2010 07:51 pm
Lo tienes que incluir en tu archivo css.
Y debes sustituir lo que es un comentario

code escribió:

/*propiedades que necesites*/

por las propiedades y valores que necesites/quieras. Como por ejemplo el color, o el tipo de fuente, o cualquier otra.
Creo que te sería conveniente echar un vistazo al manual en .pdf de iniciación a css que encontrarás en http://www.librosweb.es

Saludos

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Ene 2010 09:09 pm
ya, ya le he echado, pero si no tienes ni idea de CSS, es casi incomprensible. para poner los estilos del texto creo que me apañaré pero para lo demás me era imposible.

creo que con lo que me has dicho me será más fácil intentarlo. a ver si lo logro.

muchas gracias de nuevo!

Por anafasia

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Ene 2010 09:23 pm
ah, vaya, lo de sustituir las propiedades que necesites ya lo había entendido. y en lo que va entre corchetes creo que ya me apañaré para poner lo que necesite. por ejemplo por poner algo a voleo supongo que podría poner
.listadoBloqueITEMS a {/*font-weight: bold;*/} para que saliesen en negrita


lo que no sé dónde insertar las dos líneas que me sugieres:
.listadoBloqueITEMS a {/*propiedades que necesites*/}
.listadoBloqueITEMS a:hover {/*propiedades al posicionarte sobre cada enlace*/}

he probado a ponerlas en unos puntos u otros del widget, por tanteo y error, y o bien me desaparece el índice o bien se queda donde está.

Por anafasia

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Ene 2010 11:14 pm
veo que utilizas blogspot, ¿cierto?
Vas a Configuración --> Diseño --> Edicción de HTML
Te aparece un textarea con el código html. Busca donde está el código css. Debes ver algo así como:

codigo css escribió:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
ahí podrás colocar el código nuevo de la siguiente manera:

código css escribió:

/* Sidebar Content ----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.listadoBloqueITEMS a {
color: #500000;
text-decoration: none;
font-weight: bold;
}
.listadoBloqueITEMS a:hover {
color: #5000F0;
text-decoration: underline;
}

Cambia las propiedades y calores que yo he puesto por los que tu desees.
Sigo opinando que es básico y elemental que adquieras unos conocimientos mínimos de css + (x)html. La mayoría de las veces será muy difícil que te den el código mascadito. Mayoritariamente recibirás sugerencias e indicaciones para que las apliques tú.

Saludos.

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Ene 2010 01:47 am
siempre hay un alma caritativa como tú :)

el problema es que no tengo ni idea y aunque intente leer el manual son demasiadas cosas para encontrar soluciones rápidas. con el html todavía, pero el CSS es demasiado complejo -y la plantilla que utilizo supongo que también-. al menos entiendo inglés si no iría perdidísimo -bueno, en realidad ya voy así- aunque indicaciones como las tuyas crean grandes atajos.

lo he probado y parece que funciona, al menos el hover, ya que cuando voy a pinchar una etiqueta cambia de color.

seguiré investigando ya que debe haber otra variable que defina las letras del alfabeto antes de desplegarlas.

muchas gracias de nuevo, para cada ignorante siempre hay un alma bondadosa dispuesta a echar una mano :)

Por anafasia

3 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.