Kleur Read More hover aanpassen

  • Opgelost romique

    (@romique)


    8 jaren geleden

    Goedenavond,

    Ik gebruik het thema Fluida. Daarin zit standaard een “Read More” hover. De kleur daarvan kan ik aanpassen omdat het een standaard ‘primary accent’ betreft. Echter als ik die aanpas dan wijzigen meteen ook de kleur van mijn author name en het aantal van de geplaatste reacties mee.
    Daarnaast is de tekstkleur in de hover wit en de hover verschuift als ik er met mijn muis overheen ga. Ik vind dat echt heel lelijk en zou dat graag aanpassen.

    Wat ik graag wil is dat de hover kleurloos wordt en de tekst de kleur krijgt die ik als basis voor mijn primary en secondary accent gebruik.(#af8e6d). De author name en het aantal van de geplaatste reactie moeten gewoon de reeds ingestelde kleur van het primary accent behouden (#af88e6d).

    Ik kan niet vinden hoe en waar ik dit aan moet passen. Kan iemand me daarbij helpen?

    Dank alvast!

    • Dit onderwerp is gewijzigd 8 jaren geleden door romique.
12 reacties aan het bekijken - 1 tot 12 (van in totaal 12)
  • AccountClosed

    (@wistudatbe)

    8 jaren geleden

    Beste,
    Heb je een link met voorbeeld, dan kunnen we dit voor je uitzoeken/oplossen.
    Normaal gezien kan je dit oplossen via CSS door deze een extra Class of ID toe te voegen en deze een hoover kleur te geven.
    Grtjs, Danny

    Thread starter romique

    (@romique)

    8 jaren geleden

    Hallo Danny,

    Ik heb de site even ‘live’ gezet. Deze stond nl nog in de ‘coming soon’ modus. De url is http://www.kookmoment.nl
    Het gaat om de homepage en dan de lichtbruine hover met de tekst ‘lees verder’ die bij elk recept staat.

    Ik heb al een child theme aangemaakt om e.e.a aan te kunnen passen.

    grtjs.,
    Monique

    • Deze reactie is gewijzigd 8 jaren geleden door romique.
    • Deze reactie is gewijzigd 8 jaren geleden door romique.
    AccountClosed

    (@wistudatbe)

    8 jaren geleden

    Hoi Monique,

    Dit is wat ik zie als antwoord:
    This site can’t be reached
    http://www.kookmoment.nl server DNS address could not be found.

    Dus om een of andere reden kan ik die niet bezoeken 🙁

    Grtjs, Danny

    Thread starter romique

    (@romique)

    8 jaren geleden

    Ha Danny,

    Excuus, ik zie nu dat ik het adres niet volledig heb vermeld. Het moet zijn http://www.kookmomenten.nl

    grtjs.,
    Monique

    AccountClosed

    (@wistudatbe)

    8 jaren geleden

    Dag Monique,

    Ik weet uiteraard niet of je al een Custom CSS plugin hebt, die ervoor zorgt dat je sommige CSS waardes kunt overschrijven met jouw eigen CSS waardes.

    Indien niet is deze hier een vrij eenvoudige om te gebruiken: Simple Custom CSS.

    Als je wel al een hebt gaan we de huidige kleuren:

    
.continue-reading-link { color: #ffffff; background-color: #af8e6d;} 
.continue-reading-link:before { background-color: #af8e6d;} 
.continue-reading-link:hover { color: #ffffff;}

    Aanpassen naar wens.
    De indicatie !important zorgt ervoor dat je kleuren worden geforceerd.

    Voorbeeld kleuren: zwart (#000)- / wit (#fff) en bij hover: rood (#f00) / wit (#fff) .

    
.continue-reading-link { color: #fff !important; background-color: #000 !important;} 
.continue-reading-link:before { background-color: #000 !important;} 
.continue-reading-link:hover { color: #fff !important; background-color: #f00 !important;}

    Zoals je kunt zien heeft de hover functie een extra kleur meegekregen (achtergrond), om te vermijden dat deze weer wit wordt zoals op je website.

    Indien je vragen en of hulp nodig het, hoor ik dit graag van je.

    Grtjs, Danny

    • Deze reactie is gewijzigd 8 jaren geleden door AccountClosed. Reden: extra info hover kleur
    AccountClosed

    (@wistudatbe)

    8 jaren geleden

    Even off topic …

    Heb ondertussen je website eens bekeken Mo 🙂 en is er eentje die we zeker gaan volgen, mooie opzet en heerlijke gerechten!
    Tip: zorg ervoor dat je categorieën en Tags goed blijft indelen zodat bezoekers meteen vinden wat ze zochten!

    Grtjs, Danny
    (Heb 4jr in regio Puglia gewoond, vandaar de interesse)

    Thread starter romique

    (@romique)

    8 jaren geleden

    Ha Danny,

    Ik ga dit weekend e.e.a uitproberen en laat je even weten of het gelukt is. Custom CSS plugin heb ik dus het moet lukken zo. Dank voor je hulp zover!

    En ook dank voor je complimenten. Ik heb er hard aan gewerkt en ben er best trots op. Categorieën en tags en seo is een leerproces maar ook dat gaat goed komen.

    Grtjs.,
    Monique

    Thread starter romique

    (@romique)

    8 jaren geleden

    Ha Danny,

    Ik heb de CSS waardes, zoals jij hierboven hebt vermeld, aangepast in Custom CSS. Maar helaas het werkt niet.

    Custom CSS succesvol aangepast:

    /* .continue-reading-link { color: #fff !important; background-color: #000 !important;}
    .continue-reading-link:before { background-color: #000 !important;}
    .continue-reading-link:hover { color: #fff !important; background-color: #f00 !important;} */

    Maar de hover is nog steeds zoals het was. Wat doe ik verkeerd?

    Grtjs.,
    Monique

    AccountClosed

    (@wistudatbe)

    8 jaren geleden

    Hoi Monique,
    Heb je in Custom CSS ook de /* en */ toegevoegd?
    Zo ja haal deze eens weg 🙂
    Dus alle code zonder starten met /* en stoppen met */
    Grtjs, Danny

    Thread starter romique

    (@romique)

    8 jaren geleden

    Ha Danny,

    Ja, nu werkt het! Top! Nu is het precies zoals ik het wilde. Dank voor je hulp en veel plezier met het volgen van mijn blog 😉

    Grtjs.,
    Monique

    AccountClosed

    (@wistudatbe)

    8 jaren geleden

    Hoi Monique,

    Als je iets niet wilt wissen in CSS en tijdelijk uitzetten kan je deze tussen /* en */ zetten.
    Zo wis je de code niet en zet je em even uit.
    Succes met je Blog!!!

    Grtjs, Danny

    PS: als het even kan zet het topic als opgelost 😉

    Thread starter romique

    (@romique)

    8 jaren geleden

    Dank voor je laatste tip. Ik ze het topic op ‘opgelost’. thnx

12 reacties aan het bekijken - 1 tot 12 (van in totaal 12)
  • Het onderwerp ‘Kleur Read More hover aanpassen’ is gesloten voor nieuwe reacties.