Changing Services box background and hover color.

Home Forums SKT Black/White Theme Support Changing Services box background and hover color.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #91087
    herman
    Member
    • Topics: 2
    • Replies: 7
    • Total: 9
    Member since: November 30, 2017

    Hi.

    In SKT-Black, how do I change the individual services boxes background color and how do I change the hover color.?

    Cheers
    Herman

    #91107
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    Hi,

    Kindly show us your website URL so that we can assist further.

    Regards,
    Chris

    #91133
    herman
    Member
    • Topics: 2
    • Replies: 7
    • Total: 9
    Member since: November 30, 2017

    Hi Chris.

    Website URL is:
    http://www.virtualflight.co.nz

    Cheers
    Herman

    #91204
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    Hi,

    Which color scheme do you want to use background and hover.

    Regards,
    Chris

    #91239
    herman
    Member
    • Topics: 2
    • Replies: 7
    • Total: 9
    Member since: November 30, 2017

    Hi Chris.

    When a voucher is active I would like the box background to be green, text to be black, both for normal and hover over.
    When hovering only the link box to be changed to black with white lettering, to stay in tune with the SKT Black Pro Theme.

    Cheers
    Herman

    #91261
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    #services-box { background-color: #83b646 !important;}
    #services-box h2, #services-box p { color:#000 !important;}
    #services-box:hover { background-color: #000 !important;}
    #services-box:hover h2, #services-box:hover p { color:#fff !important;}

    Regards,
    Chris

    #91274
    herman
    Member
    • Topics: 2
    • Replies: 7
    • Total: 9
    Member since: November 30, 2017

    Hi Chris.
    That is half of what I wanted.
    When I hover over the service box, the background has to stay green, just the clickable link has to change into black with white lettering.

    Cheers
    Herman

    #91277
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    Hi,

    This is working fine.

    See screenshot: https://imgur.com/a/Ow30r

    Regards,
    Chris

    #91283
    herman
    Member
    • Topics: 2
    • Replies: 7
    • Total: 9
    Member since: November 30, 2017

    Hi Chris.

    The services box background color is green. That’s good.
    When I hover over the service box the whole box is turning Black and the clickable link turns white with black color text. that’s not good.
    I want the services box to stay green at all times, only the clickable link box need to change into black with white lettering when I hover the mouse over the services box.

    Cheers
    Herman

    #91295
    herman
    Member
    • Topics: 2
    • Replies: 7
    • Total: 9
    Member since: November 30, 2017

    Hi Chris

    I have it worked out now, somewhat.
    You put me on the right path.

    Thanks
    Herman

    #91300
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

    Add this code there:

    Remove

    #services-box { background-color: #83b646 !important;}
    #services-box h2, #services-box p { color:#000 !important;}
    #services-box:hover { background-color: #000 !important;}
    #services-box:hover h2, #services-box:hover p { color:#fff !important;}

    Add this new code there

    #services-box { background-color: #83b646 !important;}
    #services-box h2, #services-box p { color:#000 !important;}
    #services-box:hover { background-color: #83b646 !important;}
    #services-box:hover h2, #services-box:hover p { color:#000 !important;}
    #services-box:hover .read-more {background-color: #000 !important; color: #fff !important;  border: #000;}

    Regards,
    Chris

    #91343
    herman
    Member
    • Topics: 2
    • Replies: 7
    • Total: 9
    Member since: November 30, 2017

    Perfect

    Thanks.

    Heran

    #91344
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23415
    • Total: 23415
    Member since: August 16, 2013

    Hi Herman,

    If you found our service good kindly review us here: https://www.sktthemes.org/forums/topic/reviews-and-testimonials/page/14/

    Regards,
    Chris

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.