Ciao a tutti!
Per farla breve, avrei la necessità di cambiare la visualizzazione dei soliti Tabs di una views da così:
A così:
Questo perchè spesso ho i titoli molto lunghi e a volte, i Tabs di default, rimangono "inline" o "scivolano" sotto al titolo se quest'ultimo è troppo lungo (e questo non è propriamente professionale...) e poi, sinceramente, siccome ho delle Views che mostrano questi Tabs come Node Reference es. Modelli, Colori (sempre dello stesso Costruttore/Views e quindi mostrati nella stessa pagina/view di fianco al titolo...), mostrare i Tabs della seconda opzione (seconda immagine...) francamente risulterebbero più eleganti!
Mah... se devo essere sincero mi andrebbe anche bene mostrare/spostare i Tabs di default sotto il titolo però non riesco a capire dove devo intervenire...
Esaminando con Firebug, ho notato che tali Tabs fanno parte della classe "tabs primary" però, il problema, è che a sua volta, la classe "tabs primary" si trova all'interno dell'ID "tabs-wrapper" che mi sembra di aver capito che è il contenitore principale del titolo e che, al suo interno contiene questi Tabs... appunto...
Quindi (sempre non perdendo di vista che il mio obiettivo è quello di ottenere il risultato del *jpg; #2 che ho allegato e che, eventualmente mi va bene anche questa seconda soluzione...), qualcuno saprebbe dirmi come devo fare per "estrarre" la classe > "tabs primary" dall'id > "tabs-wrapper" per far si che possa posizionarla in un mio DIV appena sotto l'id > "tabs-wrapper" il quale, ad operazione effettuata, alla fine conterrà solo il titolo, e i "tabs primary" saranno di fatto mostrati appena sotto?
Si, ho provato a mettere 2/3 BR, mi vanno sotto, però non mi sembra proprio una soluzione "pulita" anzi, è uno schifo!
Mah... pensandoci bene, basta individuare il codice che stampa questi tabs e spostarlo nel mio DIV, proverò nonappena finisco di risolvere un'altro grattacapo... ma se qualcuno ha una soluzione nel frattempo gliene sarei grato... anche perchè è un po che mi porto questo sassolino nella scarpa...
Spero di essermi spiegato
Grazie
Ciao
Kipper
Mah... qualcosa ho risolto ma subentrano delle irregolarità nel layout:
In page.tpl.php del tema Garland, più o meno alla riga 71 ho agito sul DIV modificando il codice interessato originale da così:
<?php print $breadcrumb; ?><?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
<?php print $help; ?>
...a così:
<?php print $breadcrumb; ?><?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2></div>'; endif; ?>
<?php if ($tabs): print '<div><ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
<?php print $help; ?>
Come si può notare ho chiuso un div e ne aperto un altro cercando di far scendere i Tabs che, in effetti sono scesi, ma vanno a sballare il layout dal punto di vista delle distanze - riporto in alcune schermate con le irregolarità visibili dopo tale operazione:
Mi sembra che la causa potrebbe essere quella variabile "$tabs" poco prima di "tabs-wrapper" che viene tirata in ballo anche nella classe "tabs primary"...
Credo di essere vicino alla soluzione... qualcuno mi aiuterebbe a dargli il "colpo di grazia"!?!?
P.S. Non dimentichiamo se è fattibile anche la prima mia necessità dei Tabs in stile drupal.org...
Grazie
Ciao
Kipper
Usando Garland come esempio, modifica da:
<?php print $breadcrumb; ?><?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
...
a:
<?php print $breadcrumb; ?><?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
<?php if ($title): print '<h2>'. $title .'</h2>'; endif; ?>
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
...
Cos'ho fatto: Spostato la riga
<div>dei tabs, e tolto la classe CSS che rende il titolo in-line.Per cambiare il 'look' dei tabs stessi bisogna aggire sul CSS - che lascio felicemente a te come "esercizio per il lettore" ;-)
Più imparo, più dubito.
Perfettissimo John!
Mah... sento che sto un pochino migliorando nel capire i meccanismi di PHP (analizzando il tuo codice...) ...il fatto è che fino adesso ho sempre tirato avanti con qualche riga scritta da me, copiata quà e là in rete e/o passatomela da qualcuno sempre con genuino e forte spirito Open Source...
Il fatto è che la giornata ha 24 ore!!! ...ma credo che mi metterò un po a studiare...
...e che se mi comprassi gli occhiali come a fatto DREAMBODY mi aiuterebbero a diventare più studioso :) ?
Grazie
Giuliano
Migliora, migliora, migliora...
Facendo esperimenti su style.css del tema Garland ho scoperto delle cose interessanti - con qualche piccolo accorgimento mi sto avvicinando alla visualizzazione di questi Tabs in stile drupal.org - comunque, in ogni caso sarei già apposto così ma, tuttavia, c'è una cosa che non mi quadra e non funziona (apparentemente come dovrebbe secondo la logica...): La dimensione del bordo del Tabs che, di default è impostato a "0" e, se lo imposto a "1" viene visualizzato ma, se lo "aumento" es. 2/3/4... rimane sempre impostato a "1" ...sembrerebbe che qualcosa blocca l'aumento delle dimensioni del bordo - sicuramente l'attributo si troverà in un altro *.css; ma quale!?!? ...sto investigando ancora...
Segue la schermata dove è possibile notare il "bordino" del Tab impostato a "1" (di default è impostato a "0") e anche "bg-tab" (/images/bg-tab), che ho personalizzato con una mia immagine (un gradiente blu, appunto... ovviamente stesse dimensioni...) quindi, impostando questo bordo a "1" già si può notare il miglioramento di come questi Tabs vengono "presentati"... (ricordo sempre che nel mio caso, ho alcune Views con dei Node Reference che mostrano questi Tabs sotto il titolo es. "Nome Costruttore (Titolo)" e Modelli, Video, Prova etc come Tabs (Node Reference, appunto...) sotto il titolo e quindi, diventa importante "presentarli" con una grafica/stile migliore di quella offerta di default dal tema...
Non voglio esagerare, ma almeno il bordo lo vorrei impostare a "2"... suggerimenti?
Segue la schermata di Firebug dove si nota che (nel Tab Layout...), con il bordo impostato a 2, mi sembra di notare che nel "quadretto" riassuntivo del Layout rimane a "1" insomma, mi scuso per questi enormi giri di parole...
Una cosa è certa, in style.css del tema non esiste nessun attributo che controlla il "colore" (la dimensione si > "border: 2;") di questo bordino - ho individuato il suo colore > #cccccc e, facendo un "search" nel css non restituisce nessun risultato e poi, l'ultima cosa:
perchè la dimensione del bordino è stabilita solo da un numero > "border: 2;" e non in pixel > "border: 2px;" ??? ...se metto "border: 2px;" non si visualizza più il bordino!
Segue il frammento di css che controlla questi tabs - Notare "border: 2;" che di default è settato a "0"
ul.primary li a, ul.primary li.active a, ul.primary li a:hover, ul.primary li a:visited,ul.secondary li a, ul.secondary li.active a, ul.secondary li a:hover, ul.secondary li a:visited {
border: 2;
background: transparent;
padding: 4px 1em;
margin: 0 0 0 1px; /* LTR */
height: auto;
text-decoration: none;
position: relative;
top: -1px;
display: inline-block;
}
ul.primary li.active a, ul.primary li.active a:link, ul.primary li.active a:visited, ul.primary li a:hover,
ul.secondary li.active a, ul.secondary li.active a:link, ul.secondary li.active a:visited, ul.secondary li a:hover {
background: url(images/bg-tab.png) repeat-x 0 50%;
color: #fff;
}
ul.primary li.active a,
ul.secondary li.active a {
font-weight: bold;
}
Suggerimenti per chiudere qui la faccenda???
P.S. Opzionale - A dire il vero si potrebbe mettere la "ciliegina" sulla torta mettendo una linea (1/2 pixel...) orizzontale alla base che unisca il tutto evitando così di NON lasciare nessuno spazio tra il bordo di un Tabs e un altro... una linea di lunghezza 100% ad esempio ma mi sa che sto chiedendo troppo però, tutto questo potrebbe (una volta risolto...) essere utile a molti... credo.
Ciao
Kipper
Ma si... direi che così va più che bene...
Facendo un po di prove sul css si possono fare molte modifiche
Grazie ancora Mr. John
Questa tua modifica sul codice tornerà sicuramente utile a qualcuno oltre a me...
Ciao
Kipper