Ho sbranato i libri di Html Css Php ma c'è un piccolo mah......

10 contenuti / 0 new
Ultimo contenuto
Ho sbranato i libri di Html Css Php ma c'è un piccolo mah......

Ciao Amici,

in questi giorni ho ripreso con un certa fame la rilettura dei miei libri su html,php ed uno nuovo sul css per realizzare il mio tema da zero usando phptemplate con Drupal 6.
Niente da dire, adesso riesco a personalizzare quasi tutto del mio sito con i CSS ma c'è un piccolo MAH! :D che mi sta un po' mandando in bestia nei primary links, indovinate un po'? esatto :) vorrei ad esempio inserire una piccola immagine invece del testo ma dai vari esempi presenti sul web non ci ho capito molto.
Andandolo ad inserire nel css ul li a mi inserisce l'immagine ma dietro il testo invece che al suo posto, come far capire a Drupal che per ogni singolo elemento del vettore $primary_links deve renderizzare una immagine e renderla clikkabile?
Dal web molti dicono che c'è da modificare il template, ma quale? si riferiscono a phptemplate.engine?

esistono moduli che lo fanno
http://www.juliusdesign.net/11964/sostituire-testo-con-immagini-css-tric... e molte altre
P.S. capisco che c'è crisi ma mangiarsi la carta :)

AHAHAHAHAHHA :-))))
si ma questa mi cancella TUTTI i collegamenti dei primary links, ho provato a cercare qualche modulo ma non ne ho trovati.

update:ho trovato imagemenu module vediamo come va.

ogni link ha un suo id usa quelli.

potresti provare http://drupal.org/project/menu_icons e poi per nascondere il testo usi

.menu_icon {
  display: block;
  overflow: hidden;
  padding-left: 100%;
}

come dice il readme

Quoto @motocad, probabilmente con qualche CSS te la cavi e lasci persino il testo delle briciole di pane (per chi non usa le immagini/vuole farsi "leggere" le briciole).

Ciao
Marco
--
My blog
Working at @agavee

mmm allora vediamo un po', ho creato dei primary links e gli ho associato l'immagine attraverso il modulo menu icon.
Vado nei css ed ho inserito il seguente codice:

#primary-links .menu_icon {
  display: block;
  overflow: hidden;
  padding-left: 100%;
}

quello che succede è che si effettivamente viene associata un immagine al primo collegamente dei primary links ma prima viene ripetuta la stessa immagine sulla riga.
Ho anche provato ad usare firebug per vedere is ingoli id dei primary links ma ho firefox 3.5.5 e questo plug in non viene supportato.

....Einne Moment!! forse assegnandogli un Id con menu attributes posso modificare quello...adesso vedo :-)

allora vediamo un po', ho usato firebug ed il codice che mi trova per i primary links è:

HTML

<ul class="links">
<li class="menu-132 first">
</li>
<li class="menu-138">
</li>
<li class="menu-159">
</li>
<li class="menu-158 last">
</li>
</ul>

supponiamo che voglio del primo cambiare il colore del testo, quindi dai CSS inserisco il codice:

CSS

#primary-links li.menu-132 first{
color: Red;
}

ma sbaglio qualcosa in quanto non me lo cambia

le voci di menù una volta impostato il sito non hanno bisogno di essere aggiunte/tolte/modificate spesso e allora propongo una mia soluzione... ma è solo un mio punto di vista... se il sito lo gestisci tu va bene, altrimenti no... per ovvi motivi...

esistono dei bellissimi menu in jQuery, perchè non usarli?

l'obiettivo è quello di "incastonare" un menu statico bypassando i primary e secondary link

in page.tpl.php:

<?php if (array_search('boss', $user->roles)): ?>
  <?php if (isset($primary_links)) : ?>
    <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
  <?php endif; ?>
  <?php if (isset($secondary_links)) : ?>
    <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
  <?php endif; ?>
<?php else: ?>
<div id='mio_menu_statico'>
Mio menu jQuery o come quello che voglio...
</div>
<?php endif; ?>

aggiungo che con questo sistema (che naturalmente va preso con le pinze, per quello che è, ma ti assicuro che funziona benissimo...) si andrebbe a risolvere tra l'altro anche il problema di un'eventuale pagina con "Accesso negato" collegata direttamente ad una voce di menu infatti, in uno scenario del genere, la voce di menu NON verrebbe visualizzata...

qui la discussione >>> http://www.drupalitalia.org/node/10954

mi spiace solo che il link alla demo che avevo fatto, per qualche motivo non è più disponibile...

in pratica puoi inserire menu in Flash, jQuery e tutto ciò che vuoi ma ripeto: dipende in che situazione ti trovi; se sei tu a gestire il sito oppure il cliente che, in questo ultimo caso, questa soluzione NON farebbe al caso tuo anzi, potrebbe anche andar bene... in alcuni siti gestiti dai clienti ho usato questo sistema tanto, come già detto sopra, le voci di menù non sono soggette a cambiamenti frequenti... il cliente ti chiama, aggiungi una voce di menu linkata al nodo preferito e sei a posto...

sono consapevole che tutto questo discorso esce dalla logica di Drupal, ma ti assicuro che si ottengono risultati molto superiori a quelli offerti da certi moduli...

se ho detto un sacco di boiate abbiate pazienza...

Allora smanettando con soddisfazione sono arrivato alla soluzione(parziale) ma il testo sui primary links rimane, allora lo ripeto magari puo' servire a qualcuno:

1-si inseriscono le varie item del menu primary links ed attraverso firebug si visualizzano gli id/class

</li>
<li class="menu-138">
</li>
<li class="menu-159">
</li>
<li class="menu-158 last">
</li>
</ul>

supponiamo che vogliamo inserire una immagine come background a menu-138, a questo punto modifico style.css con :

li.menu-138 a {
text-indent: -1999px;
color: #2B5986;
background: #2B5986;
background-image:url("http://localhost/drupal-6.22/themes/etc...etccc etcc");
}

ho inserito text-indent per eliminare il testo ma rimane ancora visualizzato, avete suggerimenti?

update:

sono riuscito a togliere il testo ma l'immagine di fondo, che viene visualizzata in base al testo si rimpicciolisce e scompare se ad esempio inserisco display:none;.

li.menu-138 a {
color: #2B5986;
background: #2B5986;
width:90%;
background-image:url("http://localhost/drupal-6.22/themes/bluemarine/cambiopassword.bmp");
background-repeat:no-repeat;
background-position: center center;
}
#primary-links ul li.menu-138 a#cambio_password {
font-size: 100%;
color:transparent;
}