Back to top

Autore Topic: Creare uno stile personalizzato per il menu  (Letto 5007 volte)

Offline Giacomino1983

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Creare uno stile personalizzato per il menu
« il: 17 Mar 2010, 22:15:27 »
Buonasera ragazzi.
Il mio template personalizzato sta' prendendo lentamente forma!! 8) Con molta pazienza e con alcuni ottimi link sto' analizzando tutte le classi di joomla e dove loro agiscono all'interno del layout.

Ora, andando a mettere mano ai menu ho notato che per creare l'effetto bordi stondati, il template di default usa lo stile rounded che consiste nell'annidare 4 div e utilizzare lo stesso numero di immagini.. Non so se questa sia pazzia blasfemia o Sparta ma di certo non e' il modo migliore (almeno per me) per creare quest'effettino (se devo passare 20 minuti a tagliare i rettangolini su photoshop uso javascript ???). Vorrei quindi creare un modulo personalizzato per agire in questo modo (quello che in genere utilizzo per i siti statici): Vorrei creare un div con background transparent e un immagine di sfondo di un rettangolino di 5 px con bordi stondati (che creo con photo), sotto di esso un div di pari dimensioni e colore in cui andranno le voci di menu, e sotto ancora un div identico al primo con la stessa immagine (ovviamente rovesciata).
Il codice html potrebbe essere questo:
Codice: [Seleziona]
<div class="imagineStondata"></div>
<div class="menu"></div>
<div class="immStondRov"></div>
Ma dove lo dovrei mettere??
Sul module.php cosa dovrei mettere??
Qualche buon anima potrebbe farmi un chiaro esempio di codice??

Grazie a tutti

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:Creare uno stile personalizzato per il menu
« Risposta #1 il: 21 Mar 2010, 01:17:06 »
ciao
Citazione
Ora, andando a mettere mano ai menu ho notato che per creare l'effetto bordi stondati, il template di default usa lo stile rounded che consiste nell'annidare 4 div e utilizzare lo stesso numero di immagini.. Non so se questa sia pazzia blasfemia o Sparta ma di certo non e' il modo migliore (almeno per me) per creare quest'effettino (se devo passare 20 minuti a tagliare i rettangolini su photoshop uso javascript ???).

se tu hai un modo migliore  di far un'immagine  con angoli tondi sensa usare l'ausilio dei div x inserire le immagine , ben venga ci puoi illuminare anche noi comuni mortali?

ps vedi che un'immagine  con angoli tondi  , come tu dici la usi come sfondo , non hai pensato che andresti  a rifare non una volta ma piu volte  l'immagine  se il contenuto del modulo  fuori esce dalla tua immagine?

se si usano i div un motivo  c'è non credi?

comunque se ate non va di faticare  come dici trova la soluzione e postala che allora anche noi non buttiamo tempo a fare i ritagli dell'immagine.

altra cosa se posti la tua soluzione  l'immagine deve essere  flessibile  nel senso che :
se il contenuto del modulo si allunga ho si allarghi  limmagine deve seguire il contenuto , non devo rifare l'immagine in base a quello che ci metto.
« Ultima modifica: 21 Mar 2010, 01:19:03 da conti1 »
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline Giacomino1983

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Re:Creare uno stile personalizzato per il menu
« Risposta #2 il: 21 Mar 2010, 01:40:50 »
se tu hai un modo migliore  di far un'immagine  con angoli tondi sensa usare l'ausilio dei div x inserire le immagine , ben venga ci puoi illuminare anche noi comuni mortali?
Ma bevi?? Ma lo hai letto il post? Ti ho postato anche il codice in cui ho tre div uno sotto l'altro... ho cercato di spiegarti che nel primo div carico l'immagine con un rettangolino con i bondi stondati (il bordo superiore sinistro e destro)--> nel secondo div che e' sotto metto il menu vero e proprio... questo e' flessibile poiche' non c'e' nessun immagine di sfondo e si allunga a seconda del contenuto che inserisco e magicamente, man mano che si estende spinge sempre piu in basso il terzo div che sta sotto, che contiene la stessa immagine del primo solo rovesciata.. difficile?? Invece di star a ritagliare 4 fottuti angoli faccio una sola immagine e la ribalto...
Citazione
comunque se ate non va di faticare  come dici trova la soluzione e postala che allora anche noi non buttiamo tempo a fare i ritagli dell'immagine.
Che e' hai avuto una serataccia?? C'e' bisogno di rispondere cosi?
« Ultima modifica: 21 Mar 2010, 01:42:40 da Giacomino1983 »

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:Creare uno stile personalizzato per il menu
« Risposta #3 il: 21 Mar 2010, 01:54:14 »
ho solo risposto al tuo post  sei  tu che hai detto che il metodo div e sbagliato non lo inventato io. io ho solo riportato quanto detto tu
comunque x mettere gli angoli tondi se non hai mmagini ma solo colore hai anche un'altra strada.

qui visto che ho bevuto ti posto il link
http://www.contiweb.altervista.org/index.php?option=com_content&view=article&id=69:angoli-tondi-con-div-e-css&catid=11:new-progk3


« Ultima modifica: 21 Mar 2010, 01:55:45 da conti1 »
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline Giacomino1983

  • Nuovo arrivato
  • *
  • Post: 11
    • Mostra profilo
Re:Creare uno stile personalizzato per il menu
« Risposta #4 il: 21 Mar 2010, 02:42:40 »
Scusami forse ho esagerato non volevo offendere e nemmeno fare l'arrogante; C'e' stato un malinteso  :'(

Ora io so come fare i miei box con i bordini stondati in modo da inserire il contenuto e fare si che questi si estendano in maniera dinamica (con i 3 div e l'immagine che ribalto), il fatto e' che non so applicarli a joomla..

non so creare il modulo e non so dove dvorei andare a mettere il codice php ne quello html.. l'ho installato 3 giorni fa e infatti chiedevo una guida che mi spiegasse come modificare (in modo un pelino avanzato) il template..

Per questo chiedevo un esempietto di codice ma non per creare il box bensi per capire come farlo digerire a joomla..

Grazie lo stesso

Offline conti1

  • Global Moderator
  • Instancabile
  • *****
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:Creare uno stile personalizzato per il menu
« Risposta #5 il: 21 Mar 2010, 03:45:42 »
nulla non  mi sono offeso
fai una ricerca con google e scrivi modulo crhome

ti crei un modulo crhome e lo aplichi  come style  hai moduli che vuoi
 qui ti posto altro esempio di bordi tondi

http://www.webconti.altervista.org/

non so dirti se c'è una guida  ma una volta che sai fare un modulo crhome  fai tutto con quello

ps usa firebug e cerca di capire come ho integrato i div del mio crhome
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

Offline simonepozzobon

  • Nuovo arrivato
  • *
  • Post: 28
    • Mostra profilo
Re:Creare uno stile personalizzato per il menu
« Risposta #6 il: 06 Giu 2010, 23:47:29 »
per gli angoli arrotondati puoi usare anche i plugin di jquery: jquery.corner.js
devi inserire queste due righe tra i tag <head> e </head>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="directory_dove_hai_salvato_lo_script/jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("div#contenitore").corner();
});
</script>

e poi posiziona dove vuoi all'interno di <body> e </body>

<div id="contenitore">testo all'interno del box con gli angoli arrotondati</div>

ovviamente puoi chiamarlo come vuoi io l'ho chiamato contenitore per semplicità.

lo script lo trovi qui http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09
se non te lo scarica cercalo qui http://jquery.malsup.com/corner/

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:Creare uno stile personalizzato per il menu
« Risposta #7 il: 07 Giu 2010, 00:47:38 »
Limiti al metodo Giacomino1983: funziona solo se il modulo si allunga ma non se si allarga;  :(
Limiti al metodo simonepozzobon: non funziona su internet explorer, circa il 40% degli utenti;  :(
Morale della storia: il metodo usato con il modulo di stile rounded utilizzato da joomla resta il migliore!
 ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

 



Web Design Bolzano Kreatif