modifica template ja elastica.

[alessandro.pierantoni]

Buonasera,

sto aggiustando il template di ja elastica e volevo aggiungere al modulo ja social l'icona di Linkedin, dopo un breve controllo dell'html personalizzato (tramite l'editor JCE)  di cui riporto il codice,

Codice: [Seleziona]

<ul class="ja-social">
<li class="social-twitter"><a title="Twitter" href="http://twitter.com/apierantoni" target="_blank">Twitter</a></li>
<li class="social-facebook"><a title="Facebook" href="http://www.facebook.com/valore.consulenze" target="_blank">Facebook</a></li>
<li class="social-gplus"><a title="Google+" href="https://plus.google.com/107866307674709985321/posts" target="_blank">Google+</a></li>
<li class="social-rss"><a title="RSS" href="#" target="_blank">RSS</a></li>
</ul>
ho notato che richiama un tag credo creato da loro, quindi sono andato a ricercare nel file template.css la riga interessata (riporto il codice)

Codice: [Seleziona]

/* Social */
#ja-social {
  height: 35px;
}


#ja-social ul {
  display: block;
  padding: 5px 1em 0;
}


#ja-social ul li {
  border-right: 1px solid #444;
  float: left;
  height: 30px;
  margin: 0;
  padding: 0;
  text-indent: -1000em;
  width: 30px;
}


#ja-social ul li a {
  background: url(../images/social-bg.png) no-repeat center top #444;
  display: block;
  height: 30px;
  width: 30px;
}


#ja-social ul li.social-rss a {
  background-position: center top;
}


#ja-social ul li.social-facebook a {
  background-position: center -30px;
}


#ja-social ul li.social-twitter a {
  background-position: center -60px;
}


#ja-social ul li.social-gplus a {
  background-position: center bottom;
}


#ja-social ul li a:hover {
  background-color: #EC534D;
}

quindi ho preso il file social-bg.png (dimensione 30px x 130px 4 moduli x 4 icone) l'ho trasformato in 30px x 150px nel modulo di 30x30 appena creato in più ho aggiunto l'icona di Linkedin, poi sono andato nel template.css e aggiunto la seguente riga:

Codice: [Seleziona]

#ja-social ul li.social-rss a {  background-position: center top; } #ja-social ul li.social-facebook a { background-position: center -30px; } #ja-social ul li.social-twitter a { background-position: center -60px; } #ja-social ul li.social-gplus a { background-position: center -90px; } #ja-social ul li.social-linkedin a { background-position: center -120px;
}[size=78%] [/size]
e ho ricompilato il modulo con il seguente codice html:

Codice: [Seleziona]

<ul class="ja-social">
<li class="social-facebook"><a title="Facebook" href="http://www.facebook.com/valore.consulenze" target="_blank">Facebook</a></li>
<li class="social-twitter"><a title="Twitter" href="http://twitter.com/apierantoni" target="_blank">Twitter</a></li>
<li class="social-linkedin"><a title="Linkedin" href="http://it.linkedin.com/in/alessandropierantoni" target="_blank">Linkedin</a></li>
<li class="social-gplus"><a title="Google+" href="https://plus.google.com/107866307674709985321/posts" target="_blank">Google+</a></li>
<li class="social-rss"><a title="RSS" href="#" target="_blank">RSS</a></li>
</ul>


ma purtroppo al posto di uscire l'icona di Linkedin mi è uscita l'icona del rss, nel css modificato se al posto di -120px  inserisco botton (come era all'inizio) il risultato è lo stesso.

Qualcuno ha idea perché? Immagino che nel codice css ci sarà una limitazione nel 4 posti del file png.

[roccia_pd]

Ciao,

Questo è il codice del template.css

Codice: [Seleziona]


#ja-social { height: 35px; } #ja-social ul { display: block; padding: 5px 1em 0; } #ja-social ul li { border-right: 1px solid #FFF; float: left; height: 30px; margin: 0; padding: 0; text-indent: -1000em; width: 30px; } #ja-social ul li a { background: url(../images/social-bg.png) no-repeat center top #999; display: block; height: 30px; width: 30px; } #ja-social ul li.social-rss a { background-position: center top; }
#ja-social ul li.social-facebook a {
  background-position: center -30px;
}

#ja-social ul li.social-twitter a {
  background-position: center -60px;
}

#ja-social ul li.social-gplus a {
  background-position: center -90px;
}

#ja-social ul li.social-likedin a {
  background-position: center -150px;
}

#ja-social ul li.social-mail a {
  background-position: center -120px;
}

#ja-social ul li a:hover {
  background-color: #274CAD;
}


Questo è il codice del modulo social

Codice: [Seleziona]

<ul class="ja-social"><li class="social-facebook">Facebook</li><li class="social-twitter"><a href="http://twitter.com/#!/InfoCsg" title="Twitter">Twitter[/url]</li><li class="social-gplus">Google+</li><li class="social-likedin">Linkedin</li><li class="social-rss"><a href="index.php?format=feed&amp;amp;type=rss">RSS[/url]</li><li class="social-mail">Mail</li></ul><!-- NON CANC
-->
Ho anche aggiunto il bottone mail

Creati il png con le varie icone: FB, TW, G+, LN, RSS, MAIL
Ora dovrebbe funzionarti.