Supporto » Fixing WordPress » Come cambiare colore ai link in un Widget?

Come cambiare colore ai link in un Widget?

  • Risolto marosomarco

    (@marosomarco)


    7 anni, 6 mesi fa

    Ciao a tutti,
    ho il seguente sito http://www.compostdairifiuti.it ed in alto a destra ho una serie di eventi che vengono visualizzati tramite un widget posto nell’header.

    Non riesco a capire come fare in modo tale che i link siano di un colore visibile solo in quel widget (magari di colore giallo).

    Sono certo che abbia a che vedere col CSS.

    Uso il tema HUEMAN con un them CHILD ma non so che cosa scrivere nel CHILD per far cambiare colore a quei maledetti link.

    Ringrazio anticipatamente chiunque sia in grado di darmi una mano.

Stai visualizzando 9 risposte - dal 1 al 9 (di 9 totali)
  • Moderatore Rosetta Facciolini

    (@ramthas)

    Web Manager

    7 anni, 6 mesi fa

    Ciao

    inserisci nel file style.css del tuo tema child
    subito sotto @import url(‘../hueman/style.css’);

    questo

    .widget_nav_menu ul li a, .widget_pages ul li a, .widget_recent_entries .post-date, .widget_rss ul li a {
    color: #00b9eb;
}

    e alla voce color inserisci il colore che preferisci

    Fa sapere. Ciao

    Chi ha creato la discussione marosomarco

    (@marosomarco)

    7 anni, 6 mesi fa

    Ciao Rosetta, ti ringrazio molto del consiglio ma il codice che mi hai postato cambia il colore solo al menù di navigazione presente nella barra laterale destra e non nel widget che si trova in alto a destra relativo agli EVENTI.

    Hai qualche consiglio?

    Moderatore Rosetta Facciolini

    (@ramthas)

    Web Manager

    7 anni, 6 mesi fa

    prova questo

    #em_widget-5 {
    color: #c1f10a; /* colore del testo */
    background-color: #a37fff; /* sfondo colorato */
    font-weight: bold;
    padding: 5px;
   
}
    Chi ha creato la discussione marosomarco

    (@marosomarco)

    7 anni, 6 mesi fa

    Ciao Rosetta, grazie, ho provato quel che mi hai postato ma non mi cambia il colore del link della notizia (se vuoi adesso lo dovresti vedere nel sito)

    Ho scoperto che se scrivo il codice sottostante allora funziona, ma lo cambia anche nelle barre laterali.

    .widget a {
    color: #ffd24d;
}

    Mi sai dire come fare per applicarlo unicamente al widget che si chiama, credo, <div id=”em_widget-5″ class=”widget widget_em_widget”>

    E come faccio a scegliere anche il colore che deve visualizzare quando faccio hover col mouse sul link, solo in quel widget, non in tutto il sito?

    Grazie.

    • Questa risposta è stata modificata 7 anni, 6 mesi fa da marosomarco.
    Chi ha creato la discussione marosomarco

    (@marosomarco)

    7 anni, 6 mesi fa

    Scusa Rosetta, visto che non sono esperto e onde evitare di farti perdere tempo ti posto il mio CSS in modo tale che tu possa capire se per caso c’è qualcosa che non è giusto (è un po’ un copia incolla qua e là, quindi potrebbero esserci stupidate che non devono esserci).

    Ti ringrazio in anticipo.

    /*
Theme Name: Hueman Child
Version: 1.0
Description: A child theme of Hueman
Template: hueman
Author: Amministratore
*/

@import url(“../hueman/style.css”);

/*.widget_nav_menu ul li a, .widget_pages ul li a, .widget_recent_entries .post-date, .widget_rss ul li a {
    color: #ff6600;
}*/

/*.widget a {
    color: #ffd24d;
}*/

/** flags horizontal */
#flaggenmast {heigth: 12px; width: 56px; margin: 0; padding: 0; float: right; clear: right;}
ul.qtrans_language_chooser { list-style: none; margin: 0; padding: 0; }
ul.qtrans_language_chooser li { display: inline-block; float: left; position: relative; margin: 0; padding: 0; }
a.qtrans_flag { margin-left: 10px; margin-top: 0px }
/*———————————–*/

 /* unvisited link */
a:link {
    color: #336600;
    font-weight: bold;
}

/* mouse over link */
a:hover {
    color: #ff6600;
}

.site-description {
color:#FFF;
font-weight:bold;
font-size:20px;
}

#em_widget-5 .widget-title {
color:#FF9A00;
font-weight:bold;
}

#em_widget-5  { 
color: #FFF; 
font-weight: bold;
a:link {color:#FFF!important;} /* unvisited link */
} 

/* For Widget Link Hover Color */
.widget-area .widget a:hover {
    color: #FFF;
}

/* For Slider Controller Color */
#controllers a:hover, 
#controllers a.active {
    background-color: #e17c05;
}

/* For Content Link Bold */

#content a { 
    font-weight: bold;
color: #FFF;
}

/* For Content Link hover remove underline */

#content a:hover { 
    text-decoration: none;
color: #FFF;
}

/* Global */
.mystyle {}

/* Tablet – 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
.mystyle {}
}

/* Mobile – 480px & 320px */
@media only screen and (max-width: 719px) {
.mystyle {}
}

/* Mobile – 320px */
@media only screen and (max-width: 479px) {
.mystyle {}
}

.nav { font-weight: bold; }
#nav-topbar .nav li a { color:#fffff7; }
#nav-topbar .nav li > a:hover,
#nav-topbar .nav li:hover > a,
#nav-topbar .nav li.current_page_item > a,
#nav-topbar .nav li.current-menu-item > a,
#nav-topbar .nav li.current-menu-ancestor > a,
#nav-topbar .nav li.current-post-parent > a { color:#f77e14; }

#nav-header .nav li a { color:#fffff7; }
#nav-header .nav li > a:hover,
#nav-header .nav li:hover > a,
#nav-header .nav li.current_page_item > a,
#nav-header .nav li.current-menu-item > a,
#nav-header .nav li.current-menu-ancestor > a,
#nav-header .nav li.current-post-parent > a { color:#f77e14; }

#footer .nav li a { color:#000000; }
#footer .nav li > a:hover,
#footer .nav li:hover > a,
#footer .nav li.current_page_item > a,
#footer.nav li.current-menu-item > a,
#footer .nav li.current-menu-ancestor > a,
#footer .nav li.current-post-parent > a { color:#f77e14; }

.textwidget ul li a {
color: #000;
}

.entry, .entry.excerpt p {color:#000}
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #000
}

p.post-byline {
color: #000;
}

.page-title a { color: #000; }

.wpcf7-list-item {
display: block;
}

.entry h1 span,
.entry h2 span,
.entry h3 span,
.entry h4 span,
.entry h5 span,
.entry h6 span {
  color: #000;
}

div.event div.entry p {
color: #EFF3F9 !important;
}
    Chi ha creato la discussione marosomarco

    (@marosomarco)

    7 anni, 6 mesi fa

    Ho risolto!

    Ecco come :

    /*
Theme Name: Hueman Child
Version: 1.0
Description: A child theme of Hueman
Template: hueman
Author: Amministratore
*/

@import url(“../hueman/style.css”);

/** flags horizontal */
#flaggenmast {heigth: 12px; width: 56px; margin: 0; padding: 0; float: right; clear: right;}
ul.qtrans_language_chooser { list-style: none; margin: 0; padding: 0; }
ul.qtrans_language_chooser li { display: inline-block; float: left; position: relative; margin: 0; padding: 0; }
a.qtrans_flag { margin-left: 10px; margin-top: 0px }
/*———————————–*/

.site-description {
color:#FFF;
font-weight:bold;
font-size:20px;
}

#em_widget-5 .widget-title {
color:#FF9A00;
font-weight:bold;
}

#em_widget-5  { 
color: #FFF; 
font-weight: bold;
}

#em_widget-5 ul li a:hover{
color: #FFF;
text-decoration: none;
}

#em_widget-5 ul li a{
color: #ffd24d;
text-decoration: none;
}

    In sostanza la parte che mi permette di cambiare il colore dei link in quello specifico Widget è la seguente :

    #em_widget-5 ul li a:hover{
color: #FFF;
text-decoration: none;
}

#em_widget-5 ul li a{
color: #ffd24d;
text-decoration: none;
}

    Grazie del supporto.

    PS: se hai consigli sul mio CSS (errori vari) fammi sapere perfavore.

    Moderatore Rosetta Facciolini

    (@ramthas)

    Web Manager

    7 anni, 6 mesi fa

    prova questo

    #em_widget-5 ul li a {
    color: #ffd24d;
    text-decoration: none;
}

#em_widget-5 ul li a:hover {
    color: #ff9a00; /* colore al passaggio del mouse */
}

    Se non funziona (e per validare il css del child) è meglio rivolgersi all’assistenza del tema
    https://wordpress.org/support/theme/hueman

    Ciao 🙂

    Moderatore Rosetta Facciolini

    (@ramthas)

    Web Manager

    7 anni, 6 mesi fa

    Ok, non avevo visto la tua risposta.
    Bene, si è risolto 🙂
    Ciao buon lavoro

    Chi ha creato la discussione marosomarco

    (@marosomarco)

    7 anni, 6 mesi fa

    Grazie mille Rosetta.

Stai visualizzando 9 risposte - dal 1 al 9 (di 9 totali)
  • Il topic ‘Come cambiare colore ai link in un Widget?’ è chiuso a nuove risposte.

Visualizza