Joomla.it Forum

Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : Salvù 21 Mar 2012, 21:22:37

: Creare Riquadro sul Sito
: Salvù 21 Mar 2012, 21:22:37

Ciao a tutti   

Come faccio a creare un riquadro simile a quello verde che potete vedere a destra su questo sito http://www.giovanidemocratici.net/doc/230267/ora-tocca-a-noi-cambiare-la-storia.htm (http://www.giovanidemocratici.net/doc/230267/ora-tocca-a-noi-cambiare-la-storia.htm) ?

Io lo vorrei inserire nella colonna di destra che c'è sul mio sito www.bagheriabenecomune.org (http://www.bagheriabenecomune.org/)

Grazie a tutti per le info!  :)

: Re:Creare Riquadro sul Sito
: MasterTheBest 21 Mar 2012, 21:33:49

Dipende come vuoi farlo:

• puoi usare solo css ed effetti hover ed utilizzare le immagini lato css
• usare immagini dal menu, tecnica override e stile
• modulo html, dentro tutte le voci (flagga NON preparare il contenuto)
• inserire direttamente nel template un area apposita, con if condizionale
• ...

Se ti senti spaventato o spaesato dalla mia risposta è normale: devi descrivere COME vuoi farlo, se ti accontenti di un codice html fisso nel template, etc.. etc..


Il risultato è lo stesso, ma ci sono caratteristiche e privilegi differenti. Se il menu rimane fisso, puoi fare modifiche permamenti (come ritoccare template). Altrimenti, la strada è per chi mastica css e template by joomla.

: Re:Creare Riquadro sul Sito
: Salvù 21 Mar 2012, 21:38:50

Ciao Masterthebest  :)

innanzitutto ti ringrazio per avermi risposto!  :)  Io innanzitutto vorrei creare quel rettangolo che c'è su quel sito solo che lo vorrei di un'altro colore, esattamente #eeaa7b

Solo che lo vorrei in css non con un'immagine...  :'(

Puoi aiutarmi a realizzarlo?  :'(

: Re:Creare Riquadro sul Sito
: MasterTheBest 21 Mar 2012, 22:17:59

Ti posto, per intero, una mia guida che avevo da qualche parte. Eccoti servito

Browser?Ovviamente, ogni browser legge come più gli aggrada, i fogli css, con la solita conseguenza: stesso codice, effetti diversi! Nella tabella che segue, confronteremo i diversi codici, avente lo stesso medesimo effetto.

IExlporer	Firefox
border-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px;	-moz-border-radius: 10px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 20px;
Chrome	Safari
border-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px;	-webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px;

NB Per Google Chrome non c’è bisogno di utilizzare lo stesso prefisso di safari(-webkit-border-bottom/top-left/right-radius:xxpx;)Abbiamo confrontato, con un piccolo esempio, le diversità tra browser, ma manca un tassello fondamentale: cosa possiamo fare con questo “border/radius”? Presto fatto!Proprietà?Nel confronto abbiamo usato una sola misura in px, ma in generale le modalità di misurazione sono due:
 

• 1 misuraCome abbiamo visto, possiamo utilizzare una misura in px, oppure in %.
• 2 misureProprio come un ellisse, possiamo indicare il diametro maggiore e quello minore. Entrambi possono essere uguali, o diversi, uno in percentuale e l’altro in pixel, o viceversa o entrambi! Attenzione, in caso di valori negativi, verrà impostato a 0.

Risorse e riferimentiArticolo di riferimentoAvete bisogno di maggiori informazioni? Qui c’è l’articolo originale, di w3c, Border-radius: create rounded corners with CSS!, davvero esaustivo e fondamentale. Una volta appreso quanto è contenuto, non dovrete preoccuparvi di nulla!Tool di controlloPiù che un vero e proprio tool di controllo, potremmo definirlo come “Tester” per verificare il codice scritto da noi. Come funziona? Impostate i valori nei quattro quadrati agli angoli del riquadro centrale, settate le opzioni ed ottenere il codice! Utile, quando durante il lavoro “qualcosa non torna”. Eccovi il link CSS Border Radius Generator.

: Re:Creare Riquadro sul Sito
: Salvù 21 Mar 2012, 22:20:29

Gentilissimo  :D

dove devo inserire questo codice?

:

-webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 20px;


: Re:Creare Riquadro sul Sito
: MasterTheBest 21 Mar 2012, 22:24:24

Allora, qui c'è un problema di fondo: conosci un pò di css e sopratutto, i template per joomla? Se no, ora non riesco, però in fine settimana, posto un codicino per la tua situazione: può andare?

: Re:Creare Riquadro sul Sito
: Salvù 21 Mar 2012, 22:27:30

Non sono molto bravo con i codici in css...  :'(

Io avrei bisogno di un codice da inserire sul mio sito per avere quel riquadro...

Ho imparato da poco ad utilizzare Firebug e quindi a capire qualcosa di css  :'(

: Re:Creare Riquadro sul Sito
: Salvù 21 Mar 2012, 22:55:43

Puoi darmi una mano?  :'( :'( :'(

: Re:Creare Riquadro sul Sito
: Salvù 22 Mar 2012, 21:34:06

Troppo difficile quello che chiedo?  :'( :'(

: Re:Creare Riquadro sul Sito
: MasterTheBest 22 Mar 2012, 22:39:36

: MasterTheBest  21 Mar 2012, 22:24:24

... ora non riesco, però in fine settimana, posto un codicino per la tua situazione: può andare?

Quale parte di fine settimana non è chiara? Abbi pazienza, continuare a fare up, non ha senso. Tranquillo, entro lunedì avrai una bozza

: Re:Creare Riquadro sul Sito
: Salvù 22 Mar 2012, 22:41:10

Ah scusami!!!  :'(  Non avevo letto con attenzione!  :'(

Allora, grazie mille!!!  :D

: Re:Creare Riquadro sul Sito
: MasterTheBest 24 Mar 2012, 12:31:08

Guarda qui, troverai lo script adattato per un modulo menu denominato riquadro(inserisci nel campo classe modulo)
http://www.andrearossi.eu/public/tmp/script-generici/border-radius/greensimply.html (http://www.andrearossi.eu/public/tmp/script-generici/border-radius/greensimply.html)
L'effetto è associato alle immagini: leggiti il codice pasticcia un pò

: Re:Creare Riquadro sul Sito
: Salvù 24 Mar 2012, 12:50:45

Non mi puoi dare il codice?

Forse ci "gioco" meglio con il codice...

: Re:Creare Riquadro sul Sito
: Salvù 24 Mar 2012, 12:51:13

Altra cosa... dove lo inserisco? in un modulo html personalizzato?

: Re:Creare Riquadro sul Sito
: MasterTheBest 24 Mar 2012, 12:54:15

Ripeto:
devi imparare a costruire i template.
Per il codice ti basta cliccare con il destro nella pagina (OVUNQUE) e cercare codice sorgente.

Esistono le guide in http://wiki.joomla.it/index.php/Pagina_principale_Joomla!_1.5 (http://wiki.joomla.it/index.php/Pagina_principale_Joomla%21_1.5)

: Re:Creare Riquadro sul Sito
: Salvù 24 Mar 2012, 12:57:05

Ok, grazie!

Ora do un'occhiata alle guide perché ripeto, il sito è pronto. Devo solo capire dove e come devo inserire questo codice in modo che il riquadro appaia nella colonna di destra del mio sito!  :'(

: Re:Creare Riquadro sul Sito
: Salvù 24 Mar 2012, 13:14:40

Una cosa..

E se in questo riquadro vorrei inserire solo un campo dove la gente può scrivere la sua email e quindi "abbonarsi" alla newsletter???

: Re:Creare Riquadro sul Sito
: Salvù 24 Mar 2012, 13:18:40

Oppure tipo quel riquadro che puoi vedere sul sito oratoccaanoi.it


In questo caso, il riquadro "Dai voce al tuo quartiere" presenta questo codice di sorgente:

:


<form action="http://oratoccaanoi.it?form=dai-voce" method="post"> <div class="my-skinnable-select"> <select name="quartiere"> <option>Castello</option> <option>Marina</option> <option>Stampace</option> <option>Villanova, La Vega</option> <option>Castello</option> <option>Sant'Avendrace, Tuvixeddu, Tuvumannu</option> <option>Is Mirrionis, San Michele</option> <option>Mulinu Becciu</option> <option>San Benedetto, Sant'Alenixedda, Fonsarda, Genneruxi</option> <option>CEP, Quartiere Europeo</option> <option>Monte Urpinu, Bonaria, Monte Mixi</option> <option>Sant'Elia</option> <option>Poetto, La Palma, Quartiere del Sole</option> <option>Pirri</option> </select> <> <input id="dai-voce-name" type="text" name="namesurname" value=""></input> <input id="dai-voce-email" type="text" name="email" value=""></input> <div> <div class="privacy"> <div class="privacy-chk"> <input type="checkbox" name="privacy" value="1"></input> <> <div class="privacy-text"> <span>Autorizzo il trattamento dei miei dati ai sensi del D.lgs 196/2003.</span> <> <> <input class="submit" type="submit" name="submit" value="Partecipa"></input> <> <div class="clear"><> </form>


Dovrei modificarlo ed integrarlo al codice che mi hai dato tu, giusto?