Artisteer - Problema con niveles del menú vertical

[crujikoki]

Hola,

He hecho un tema con el Artisteer para el Drupal y veo que el programa no me permite modificar según que cosas. Una de las cosas que quiero modificar, es que en el menú de navegación vertical (como pude ser el que trae el drupal por defecto en su tema por defecto) no puedo distinguir entre elementos padre, hijos, nietos,...

Es una chorrada, pero quiero que el icono que sale al lado de los elementos padre, no sea el mismo que el que sale en los elementos hijos y tampoco en los de más abajo. Lo que si que me hace el menú es tabularlos a la derecha, pero si le pongo un icono a los padres, el mismo icono pasa a los hijos.

He intentado modificarlo yo a mano, pero no logoro encontrar donde se le añade el icono al menú, ya que el nombre que tiene el tag style en el HTML no existe en el css y tampoco he sabido verlo en el .js.

Pues bien, sobre esto tengo dos preguntas:

1. Alguien sabe si se puede hacer esto con el Artisteer? Si es así, como???

2. En el caso de que no´se pueda o no tengáis ni idea de como hacerlo con el Artisteer, me podréis decir como lo modifico en los css o en el .js que me genera el Artisteer?

Muchas gracias de antemano!
Saludos.

[BrutuSS]

Con esta propiedad de CSS puedes cambiar dicho icono

http://www.w3schools.com/css/pr_list-style-image.asp

Deberías definir los distintos iconos para los distintos niveles del menú.

Ya nos dirás si te ha funcionado ;)

[crujikoki]

Hola,

Muchas gracias por responder! A ver, lo que comentas es lo primero que miré. Por eso puse en el post deque no lo he podido encontrar. Concretamente en el css me sale esto:

ul li, .item-list ul li, li.expanded, li.leaf, li.collapsed
{
text-align: left;
display: block;
list-style-type: none;
list-style-image: none;
}

Por eso no veo como poder cambiar ese icono. De hecho ya no es que no sepa como cambiarlo, es que no se como lo pone!!!

Saludos.

[BrutuSS]

Para poder cambiar el icono lo que deberías hacer es en el trozo de código CSS que me has copiado sustituir la regla list-style-image: none; por list-style-image: url('ruta_imagen');

Otra solución que también podrías probar ( y a lo mejor es así como están puestas las imágenes actuales ) es poniendo dichas imágenes como imágenes de fondo.

Te pongo un ejemplo para explicarme...

Si tenemos una estructura como la siguiente:

Código HTML:

<ul>
<li><a href="#">Primera entrada menu</a></li>
<li><a href="#">Segunda entrada menu</a></li>
</ul> 

podemos establecer como imagen de fondo a las etiquetas <a> el elemento que queramos que se vea en la lista, de la siguiente forma:

Código:

a{
background: url("ruta_a_la_imagen") no-repeat scroll left center transparent;
}

No se si me habré explicado con claridad. Prueba con esto y si no funciona intentaremos buscar otra solución ;)

Saludos!

[crujikoki]

Hola,

Lo de la hoja de estilos creo que no va a ser, porque con el none ya se ve la imagn en el drupal.

Por otro lado, no entiendo como metiéndole una imagen de fondo a un <a> no los pone en todos y solo los pone en los que está dentro de un li...

De todas formas lo miro y te comento.

Saludos.

[crujikoki]

Vale, ya lo he encontrado, mete la imagen aquí:

.art-BlockContent-body ul li
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
line-height: 125%;
line-height: 1.25em;
padding: 0px 0 0px 10px;
background-image: url('images/BlockContentBullets.png');
background-repeat: no-repeat;
}

Ahora como me recomendáis que le meta la imagen al submenú. Yo lo que quiero es que cuando esté sin desplegar tenga una imagen y cuando esté desplegado tenga otra. A mi me da que en esta hoja de estilos de artisteer no se contempla, pero en cambio en la del drupal si. Puedo pillar las imagenes que trae el drupal por defectoque ya me sirven, y meterlas, pero supongo que tendré que añadir una clase a la hoja, no? O tendré que hacerme un script?

No es problema hacer una cosa u otra, pero lo que quería saber es si hay alguna forma de hacerlo con el Drupal o el Artister.

Saludos.

[crujikoki]

A ver, que no se como meterle la imagen... Os pongo el HTML que genera el drupal para que veáis las clases de los CSS y a ver si me podéis echar un cable:

Con el menú sin expandir:

Código CSS:

<div class="art-BlockContent content">
        <div class="art-BlockContent-body">
    
        <ul class="menu"><li class="leaf first"><a href="/drupal/user/1">Mi cuenta</a></li>
<li class="collapsed"><a href="/drupal/node/add">Crear contenido</a></li>
<li class="collapsed"><a href="/drupal/admin">Administrar</a></li>
<li class="leaf last"><a href="/drupal/logout">Terminar sesión</a></li>
</ul>
        </div>
    </div>
 

Con el menú "Administrar" expandido:

Código CSS:

<div class="art-BlockContent content">
        <div class="art-BlockContent-body">
    
        <ul class="menu"><li class="leaf first"><a href="/drupal/user/1">Mi cuenta</a></li>
<li class="collapsed"><a href="/drupal/node/add">Crear contenido</a></li>
<li class="expanded active-trail"><a href="/drupal/admin" class="active">Administrar</a><ul class="menu"><li class="collapsed first"><a href="/drupal/admin/content" title="Administrar el contenido de su sitio.">Administración de contenido</a></li>
<li class="collapsed"><a href="/drupal/admin/build" title="Controla la apariencia del sitio.">Construcción del sitio</a></li>
<li class="collapsed"><a href="/drupal/admin/settings" title="Ajustar opciones básicas de configuración del sitio.">Configuración del sitio</a></li>
<li class="collapsed"><a href="/drupal/admin/user" title="Gestiona los usuarios del sitio, los grupos y el acceso a las características del sitio.">Administración de usuario</a></li>
<li class="collapsed"><a href="/drupal/admin/reports" title="Ver informes del historial del sistema y otra información de estado.">Informes</a></li>
<li class="leaf last"><a href="/drupal/admin/help">Ayuda</a></li>
</ul></li>
<li class="leaf last"><a href="/drupal/logout">Terminar sesión</a></li>
</ul>
        </div>
    </div>
 

Lo que quiero saber es a que clases del CSS tengo que meterle la imagen cuando está espandido el menú "Administrar", en este caso.

Muchas gracias!

[NUCKLEAR]

Te lo dice claramente "expanded active-trail"
Recuerda que css significa "Hoja de estilos en cascada" y el archivo que hace de "override" debe ser el ultimo en cargar.
Te recomiendo que uses alguna extension de Firefox que te muestre los estilos usados y cuales se estan "pisando" o puedes usar el navegador Opera y dragon Fly que para eso para mi es mucho mejor que Web developer de Firefox.

[crujikoki]

Hola,

Gracias por responder, el problema que tenía era el orden en que metía las clases en la hoja de estilos. Lo he visto claro al ver la hoja de estilos del drupal para el tema Garland. Simplemente he copiado la misma estructura y he modificado las imágenes.

NUCKLEAR, el problema que tenía era que por mucho que le añadía a la clase que tu me dices la imagen que yo quería, el drupal pasaba de mi cara. Hasta qu no he editado los UL y LI no me ha hecho ni caso. No soy un crack con los CSS, por eso me ha costado pillarlo hasta que no he visto la del Garland.

Gracias de todas formas por la ayuda.

Saludos!

*DUDA RESUELTA*