ciao,
ho iniziato a modificare il tema zen e per i primary link vorrei associare delle immagini.
Guardando il codice attraverso firebug ho associato a:
#main-menu li {
background: transparent url(../images/Bt-primary.png)no-repeat center ;
width: 125px;
height:35px;
margin-bottom:10px;
margin-top:0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}la possibilità di vedere l'immagine, ma credo di non aver seguito il modo corretto, anche perché se ci vado sopra l'unica cosa che cambia è il colore del link classe a. Come faccio a far caricare l'immagine "Bt-primaryOn".
Grazie
tz
ciao io ho risolto così anche se non so se sia corretto.
#main-menu li:hover {color: black;
background: transparent url(../images/Bt-primaryHover.png)no-repeat center ;
}
#main-menu li {
background: transparent url(../images/Bt-primary.png)no-repeat center ;
width: 125px;
height:35px;
margin-bottom:10px;
margin-top:0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
in generale è corretto, anche se sarebbe più oppurtuno inserire
#main-menu li a,#main-menu li a:link,
#main-menu li a:visited {
...
}
#main-menu li a:hover{
..}
Slice2Theme Servizio per la conversione di Design in markup HTML e/o temi.
WeBrain Solution | Pillsofbits Of Bits
Ok,modifichero' come mi suggerisci. Posso chiederti come si fa a creare un nuovo blocco e inserire delle immagini con un effetto rollover facendo in modo che le immagini vengano prese dal css? Io non so come fare e non capisco se devo scrivere nel blocco utilizzando il codice php o in altre maniere.non so da dove cominciare.
Grazie
Tz
Puoi sempre usare il pseudo classe :hover (non è limitato alle anchor, come già detto da tiziano1974).
Prova con qualcosa simile a:
#div-blocco-123 {background: transparent url(normale.png) no-repeat center;
}
#div-blocco-123:hover {
background: transparent url(hover.png) no-repeat center;
}
Più imparo, più dubito.
dunque inserisco questo codice nel css, ma nel blocco cosa inserisco? perché i miei dubbi sono anche volti a capire cosa scrivere nel blocco...
Io nel blocco scrivo codice php che richiama il css e ahimé dal momento che non so come fare cosa devo scrivere?
Diciamo che so cosa vorrei ma non ho gli strumenti tecnici per capire come si fa, immagino esistano diverse soluzioni ma non ho trovato nei post e cercando in rete post che illustrino effettivamente come si fa o qualcosa di simile.
Grazie
Non devi 'scrivere' niente nel blocco, solo nel file di css del tuo tema...
Facciamo un esempio usando questo sito e Firebug/Firefox (è divertente)...
Userò il logo del sito che si trova a
/sites/drupalitalia.org/themes/drupalitalia/logo.pngIl testo visualizzato nei commenti si trova in un div con classe
forum-post-content(basta usare l'inspettore di elementi - icone con la freccia che punta asd un rettangolo).Clicca su CSS nel menù di Firebug, nel sotto menù seleziona codefilter.css (perche è un file piccolo) clicca Edit ed aggiungi:
.forum-post-content:hover {background: transparent url('/sites/drupalitalia.org/themes/drupalitalia/logo.png');
}
Se tutto funziona quando passi sopra il testo di un commento vedrai tantei goccie a bandiera italiano...
Per il contenuto del blocco, puoi creare uno tuo mettendo HTML, oppura parecchie moduli offrono blocchi loro - views compreso. Ma questo lo sai già...
Più imparo, più dubito.
Ciao,
il tema che utilizzo è simply modern.
Ho inserito l'immagine che mi interessa direttamente nel blocco mediante fceditor:
<p><img src="images/Idea.jpg" /><img alt="L'idea" src="/sites/default/files/IdeaOff.jpg" style="width: 244px; height: 75px;" />
</p>
poi sono andato ad esaminare la pagina con firebug ho trovato:
<div id="block-block-1" class="block block-block"><div class="content"><p>
<img style="width: 244px; height: 75px;" src="/sites/default/files/IdeaOff.jpg" alt="L'idea"></p>
</div>
</div>
questo codice si trova nel file css style, così sono andato a cercare:
#sidebar-left .block, #sidebar-right .block {margin-bottom:5px;
padding:8px 16px;
}
ed ho inserito sotto
.content a:hover {background: transparent url('/sites/default/files/IdeaOnn.jpg');
}
finora ho eseguito correttamente le indicazioni?
perché non vedo nessun cambiamento quindi devo aver sbagliato qualcosa...
ho seguito le indicazioni presenti qui
http://css.html.it/articoli/leggi/3043/i-fondamenti-del-rollover-grafico...
è stato un suggerimento di bgiody credo di aver capito cosa fare, dunque...
il blocco ha un nome come suggerito da jhl.verona quindi associo a quell'id i vari stati e senza inserire del codice nel blocco dovrei visualizzare il codice presente nel css, giusto?
ora mi attivo per provare e sperare che sia la cosa corretta.
ho seguito il tuo esempio ho inserito il codice qui sotto nel file css
#block-block-1 {display: block;width: 245px;height: 75px;
background: url(images/Arianna_idea.jpg) no-repeat 0 0;
}
#block-block-1:hover{
display: block;width: 245px;height: 75px;
background-position: url(images/Arianna_idea.jpg) 0 -75px;
}
1. l'immagine è visibile SOLO se scrivo una lettera nel block body caso contrario nulla.
2. l'immagine creata non sale se vado sopra
se invece modifico il codice:
#block-block-1 {display: block;width: 245px;height: 75px;
background: url(images/Arianna_ideaoff.jpg) no-repeat 0 0;
}
#block-block-1:hover{
background: url(images/Arianna_ideaon.jpg) no-repeat 0 0;
}
FUNZIONA! ma sempre con una lettera inserita nel block body
ora per inserire un collegamento sul "pulsante" creato come posso fare sempre da css?
ho provato inserendo:
url("http://localhost:8888/arianna/?q=node/2"); in questo caso è locale per le prove ma se fosse on line?
Grazie
potrei rendere invisibile il testo con hidden?
Il tuo link va bene, usa la tecnica dei 'sprite'. Il tuo esempio no.
Hai scritto:
<div id="block-block-1" class="block block-block"><div class="content">
<p>
<img style="width: 244px; height: 75px;" src="/sites/default/files/IdeaOff.jpg" alt="L'idea">
</p>
</div>
</div>
Allora hai due problemi. Sia il mio esempio, sia quello del link, fanno cambiare lo sfondo, ma se usi un immagine (che è in primo piano) copre tutto lo sfondo - non puoi vedere la differenza. Il secondo problema è che il punto che vuoi cambiare è un
img, non un anchor, ma tu hai scritto.content a:hover {background: transparent url('/sites/default/files/IdeaOnn.jpg');
}
- non c'è un
adentro ildiv.contentPer provare usiamo w3schools: http://www.w3schools.com/css/tryit.asp?filename=trycss_link
Nel definizione di style:
<style type="text/css">a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
Aggiungi il seguente - cosi diventa:
<style type="text/css">a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
p { margin: auto; width: 300px; height: 75px; padding: 5px; background-color: #808080; }
p:hover { background-color: #c0c0c0; }
b:hover { background-color: #fff; }
</style>
Il primo
p { ... }definisce (in ordine) il centramento del testo, la larghezza, altezza, indentazione, e colore dello sfondo.Il secondo
p:hover { ... }fa che lo sfondo di ognipcambia colore quando passi sopra.Il terzo
b:hover { ... }è per divertimento, ma dimostra che il 'hover' passa attraverso tutti gli elementi nella zona...(L'esempio del link poteva molto più semplicemente cambiare il colore invece di usare un immagine)
Più imparo, più dubito.
Sei fenomenale mi hai aiutato in una situazione ma ora che ho provato e ri-provato la tua soluzione mi ritrovo a non sapere come far partire il link dall'immagine sullo stato hover...mannaggia eheh
è vero che avendo solo lo sfondo colorato sarebbe tutto più semplice ma le esigenze grafiche mi impongono di inserire delle immagini e quindi non posso fare diversamente.
quello che ho rilevato è che non sapendo come creare un blocco e un blocco tpl personalizzato mi ritrovo in questa situazione.
Ho notato che la visualizzazione ora è possibile solo se c'è del contenuto il contenuto non mi interessa o meglio vorrei solo inserire il link href ma spostare il testo per non visualizzarlo sull'immagine purtroppo mi sono fatto ingolosire guardando il sito http://www.psico-educazione.it/
in basso a sx ci sono dei pulsanti che richiamano a delle immagini e a delle pagine quello che vorrei creare io è esattamente quello, ma non capisco come fare.
Grazie e scusa per gli svariati post
Tz
Si, è apparso l'annuncio anche su questi forum di quel sito.
La tecnica
Il fatto sta ce stanno usando la tecnica del tuo link - niente di più. In questo caso l'immagine ci sta, e come, non è uno sfondo 'banale'.
Analizziamolo, prima l'HTML:
<div id="pe_consulenza_mail"><a href="http://www.psico-educazione.it/content/webform/consulenza-mail"><span>Co... Mail</span></a>
</div>
Molto semplice, un
divche contiene un anchor, che contiene un span (che in realtà non viene usato).Ed il CSS:
#pe_consulenza_mail a {background-attachment:scroll;
background-color:transparent;
background-image:url("images/FTD_25.jpg");
background-position:0 0;
background-repeat:no-repeat;
display:block;
height:106px;
text-decoration:none;
width:241px;
}
Qui sono due cose carine. Primo l'anchor viene definito come
display: blockin modo che 'riempie' lo spazio del div (usando width e height). Poi quell'immagine nelbackground-imageè in realtà uno 'sprite' (cioè multiple immagine, ma tu vedi solo uno alla volta). Ma quanto è fantastico Firebug. Così capito, andiamo a vedere lo 'hover':#pe_consulenza_mail a:hover {background-position:0 -106px;
}
Che fa? Sposta l'immagine in giù di 106 px - così vedi la seconda immagine nello sprite. Et voila, mes amis! Spostando il cursore sopra - l'immagine cambia.
L'unico pecca (per me) è di aver messo il testo nel immagine. Va bene in questo caso (sito mono lingua) ma potevano usare lo span per un testo multi-lingua.
L'arte
Tutto è un rettangolo in HTML. Ma almeno su quel sito sono rettangoli 'smussati'. E fa un certo differenza.
Sto cercando una scrivania da computer (una volta erano scrittoie, ma chi usa più la biro?). Qui sono due:
http://www.computerdesk.com/PhotoGallery.asp?ProductCode=BusHM66316
http://www.alki.fr/fr/contemporain/mobiliers/15-Landa/217-Bureau+Landa
Entrambi sono 'rettangolare' ma per me la seconda tavola ha un certo 'je ne sais quoi' n'est pas? Stessa tecnica, risultati molto diversi...
Ma 'de gustibus non disputandum est' tanto quanto per i siti, magari sono in tanti a preferire la prima tavola...
Più imparo, più dubito.
Ho visto le due scrivanie, la seconda è per chi apprezza la purezza dello stile e il sapiente gioco dei colori.
Tu mi offri gli strumenti e rilanci con esempi di maggior pregio, ma per me umile serve dell' ikea sul cui tavolo alberga un imac come unico elemento d'arredo è difficile capire la tua spiegazione.
Domani mattina a mente fresca risolverò l'arcano che tu mi hai sapientemente illustrato.
Grazie
Tz
PS gli altri esempi usano jcarousel sarei lieto di capire come funziona come pure l'effetto posto in basso, grazie ora un passo alla volta.
a domani
Grazie funziona! finalmente sono riuscito chissà se sia opportuno segnalarlo per chiunque ne avesse necessità...
Ora devo provare a capire come funziona un altro sistema su un altro sito...ahimé sigh sigh ma è divertente e piacevole...
http://www.spin.it/?ID=32&TYPE=2
il banner con i pulsanti che si spostano e fanno veder il nome della sezione.
Grazie
Tz
sei proprio incontentabile.
Il concetto è questo, devi solo metterli in linea.
http://www.gmpe.it/tnt/prova1.html
ciao
www.gmpe.it
Se il primo ad essere incontentabile sono io, allora, forse riuscirò a fare qualcosa di decente :-) ah ah.
Grazie mille veramente grazie.
Domani con calma vedo il tuo suggerimento e provvederò a realizzarlo.