Back to top

Autore Topic: CSS per newbie  (Letto 1532 volte)

Offline pisolino1976

  • Esploratore
  • **
  • Post: 173
    • Mostra profilo
CSS per newbie
« il: 03 Ott 2009, 11:18:23 »
Premetto che non ci capisco nulla di CSS e roba simile.

Ho installato l'estensione "Bookmark System Management" che mi inserisce le icone per il social bookmarking. http://www.banitech.com/extensions/components/13-component/28-bookmark-system-manager Trattasi peraltro di un MOD dell'estensione LINKR.

Come vedete nella pagina linkata, le icone non hanno alcun effetto in caso ci si sposta sopra il mouse (eccetto un toltip... credo che si chiami così).

Io vorrei che quando il mouse va sopra un'icona, questa si evidenzia con un bordo o con altro effetto come si può vedere in qui, alla fine paginahttp://j.l33p.com/linkr/28-bookmark-links o qui alla fine pagina http://joomladigger.com/joomla-extensions/plugins/the-ultimate-social-bookmarking-plugin.html

L'estensione che ho installato ha un file chiamato "classic.css" che consente di fare modifiche all'aspetto grafico.

Ho peraltro trovato il seguente listato che viene utilizzato nell'estensione LINKR:

div.linkr-bm {
 margin:20px 30px 5px 30px;
}
div.linkr-bm div.linkr-bm-pre,
div.linkr-bm div.linkr-bm-post {
 float:right;
 font-size:14px;
 letter-spacing:2px;
}
div.linkr-bm div.linkr-bm-sep {float:right;}
div.linkr-bm div.linkr-bm-b {
 float:right;
 padding:4px;
 border:1px solid transparent;
}
div.linkr-bm div.linkr-bm-b img {
 margin:0;
}
div.linkr-bm div.linkr-bm-b:hover {
 border-color:#aaa;
 background-color:#ddd;
}
div.linkr-bm-after {clear:both;}


Faccio notare quindi che il file classic.css sembra utilizza la medesima sintassi del componente LINKR iniziando per:
div.bsmmanager-bm {
}


La mia domanda quindi è: posso creare gli effetti di evidenziazione dell'icona modificando solo il file "classic.css"? ...ossia senza modificare PHP e roba simili?
« Ultima modifica: 03 Ott 2009, 11:19:55 da pisolino1976 »

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:CSS per newbie
« Risposta #1 il: 03 Ott 2009, 14:26:52 »
Questa regola:
Codice: [Seleziona]
div.linkr-bm div.linkr-bm-b:hover {
 border-color:#aaa;
 background-color:#ddd;
}
da in realtà delle disposizioni:
colora il bordo e crea uno sfondo grigio al passaggio del mouse. Il problema è che lo sfondo non si vede perchè si tratta di immagini, che in qualche altro posto gli è stato detto di non mostrare il bordo   ;D
Proviamo allora mettercelo il bordino.
Cambiala così:
Codice: [Seleziona]
div.linkr-bm div.linkr-bm-b:hover {
 border:1px solid #FF0000;
 background-color:#ddd;
}
Dovrebbe comparire un bordino rosso al passaggio del mouse  ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline pisolino1976

  • Esploratore
  • **
  • Post: 173
    • Mostra profilo
Re:CSS per newbie
« Risposta #2 il: 03 Ott 2009, 18:58:53 »
Ti ringrazio infinitamente per il suggerimento, ma putroppo non va.

Ho scoperto che diversamente dall'estensione LINKR che ha le icone che hanno proprietà grafiche individuali, in Bookmark System Management le icone stanno dentro un area rettangolare: se inserisco i tuoi suggerimenti, si evidenzia il l'area rettangolare e non la singola icona.

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12790
  • Sesso: Maschio
    • Mostra profilo
Re:CSS per newbie
« Risposta #3 il: 03 Ott 2009, 21:15:43 »
Allora prova così:
Codice: [Seleziona]
div.linkr-bm img a:hover {
 border:1px solid #FF0000;
 background-color:#ddd;
}
Senza un link è difficile imbroccarla alla prima prova!  ;)
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

 



Web Design Bolzano Kreatif