• User

    Sostituire in un tema icona social

    Salve a tutti.
    Dovrei sostituire un icona social presente in un tema. Praticamente quella di YouTube in quanto me la visualizza con gli stessi colori di quella Facebook a fianco.

    Come potrei fare ?

    Grazie
    Saluti


  • Moderatore

    Ciao
    il tema che uso io mi permette di cambiare forma e colore di ogni singolo social link. Prova a guardare meglio nelle impostazioni del tema.


  • User

    @Sermatica said:

    Ciao
    il tema che uso io mi permette di cambiare forma e colore di ogni singolo social link. Prova a guardare meglio nelle impostazioni del tema.

    Purtroppo nelle impostazioni del tema mi fa inserire solo gli url dei social. Nessuna personalizazione. Uso RealHomes Theme ..


  • Moderatore

    Ciao mi spiace, potresti fare un tentativo di contattare gli sviluppatori o usare un plugin per i social link.


  • User Attivo

    se posti il link magari si capisce meglio il problema,

    una cosa che puoi fare è usare l'ispeziona di chrome o firefox e capire da dove pesca l'icona e se eventualmente si può agire con gli stili (ma non credo) oppure cercare nel codice e sostituire l'icona con una locale che più ti piace, io per fare modifiche nel codice mi scarico la cartella del tema e con dreamwever faccio un cerca in tutta la cartella e poi con tanta pazienza faccio le modifiche che mi servono è un lavoraccio ma finora ho risolto varie situazioni, unica avvertenza i cambiamenti andrebbero fatti in un tema child per evitare di perderli al primo aggiornamento del tema oppure ricordarsi di verificare che il cambiamento non sia andato perso...


  • User

    www . immobiliroyal . it

    Praticamente le icone social non hanno i colori originali dei social..


  • User Attivo

    con gli stili l'unica cosa che si riesce a fare è quella di cambiare il colore al simbolo di youtube ma rimane sullo stesso sfondo...

    in css aggiuntivi prova a mettere (il content c'è già ho aggiunto color)

    .fa-youtube-square:before {

    • content: "\f166";
      
    • color: #ccf10d;
      

    }
    ovviamente metti il colore che vuoi...analogamente gli altri con ispeziona trova la classe relativa...


  • User

    Ma lo sfondo resta sempre blu?
    Non è possibile avere le icone standard..?


  • Moderatore

    Ciao,
    prova a sostituire il colore del background delle singole icone, ad esempio per l'icona FB il codice potrebbe essere:

    .social_networks li.facebook a {background-color:red;}
    oppure
    .social_networks li.facebook a {background-color:red !important;}
    Ciao
    :ciauz:


  • User

    Non cambia nulla.. Ma non è possibile magari cambiare le icone caricando quelle da me desiderate direttamente via FTP ?


  • Moderatore

    Si, certo che le puoi cambiare, ma devi necessariamente avere una conoscenza minima di come è costruito il tema e devi apportare sicuramente delle modifiche al codice.

    Ti consiglio di sperimentare un po' con i css e verificare perché il background non cambia colore, così prendi un po' la mano.


  • User

    Ciao,
    anche se, ovviamente puoi cambiare le icone (come ti diceva Legolas, con un po' di conoscenza del tema) al momento sono quelle di FontAwesome, un icon font molto popolare.
    Il colore delle icone è determinato dal file main.css.

    Le icone hanno tutte il blu #395b89, che è il colore di sfondo per tutti i link che si trovano in un punto elenco dell'elenco con classe .social_networks.
    è determinato da queste righe nel file main.css (riga 2101):

    .social_networks li a {
    color: white!important;
    background-color:;** /* Questo è il background blu uguale per tutte le icone /*
    font-size: 15px;
    display: block;
    text-align: center;
    line-height: 44px;
    width: 80px;
    height: 65px;
    margin: 0px;
    padding: 0;
    outline: none;
    border-left: 1px solid #343a3b;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    }

    Poi ci sono delle altre classi più specifiche che gestiscono il colore delle icone quando sono in :hover, cioè quando ci passi sopra con il mouse.

    Youtube: main.css, riga 2170

    .youtube a:hover {
    background-color: #d02525;
    }

    **Instagram, riga 2186

    **
    .instagram a:hover {
    background-color: #457299;
    }

    **Facebook, riga 2164

    **
    .facebook a:hover {
    background-color:;
    }

    La modifica è facilissima.
    Se vuoi che le icone abbiano tutte lo stesso colore a meno che non siano in stato di hover ti basterà sceglierne uno e sostituire col colore che ti piace di più.

    Se invece vuoi che ogni icona abbia un colore diverso, devi attribuire il colore alle icone usando una classe più specifica.

    Puoi provare una cosa come questa (ti faccio l'esempio con youtube ma vale per tutte):

    .youtube a {
    background-color: #ff0000; /* rosso più chiaro */
    }

    .youtube a:hover {
    background-color:; /* rosso più scuro*/
    }

    Fammi sapere come è andata!

    PS: Forse questa nota è superflua, però per eccesso di zelo lo scrivo comunque.
    Ricordati che quando fai modifiche direttamente su un tema potresti perderle al primo aggiornamento (infatti di solito si fanno nei child themes), perciò tieni nota di quello che modifichi, in modo da non sprecare il lavoro.