Widget Style

  • Resolved briancraw

    (@briancraw)


    3 years, 5 months ago

    Hi Greg,

    I am hoping you can lend some guidance on the widget styling on my site. I need to provide access if you need to see as the page has a user login which is needed to see.

    I wish to change the text link color to white and background color behind the text link when hovering over the link to something darker. My theme overwrites the additional css for the classifieds and previously you assisted and placing body. in the css was needed to allow the additional css to work.

    You can see an image HEREfor the widget.

    Thanks, Brian

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Greg Winiarski

    (@gwin)

    Hi,
    i understand the widget on your screenshot is the Categories widget? If so then you can customize the link color by adding the code below in wp-admin / Appearance / Customize / Additional CSS panel

    
.adverts-widget-categories a {
    color: white !important;
}
.adverts-widget-categories a:hover {
    color: white !important;
    background-color: silver !important
}

    of course you can adjust the links as you see fit.

    Thread Starter briancraw

    (@briancraw)

    Thank you Greg, This widget is called “Wpadverts Ads”
    The code corrected the text color but the 2nd part of the code changes only the actual text background color. I need the color of the cell for the text to change color on hover. So I need the text to remains white and the cell needs to change on hover.

    I attached an image and painted the right half for what I need to adjust to.
    https://victoriouschristians.com/img/class-widget.png

    Also made the widget available to see on the url victoriouschrstians.com.

    Thanks much, Brian

    Plugin Author Greg Winiarski

    (@gwin)

    Hi,
    can you share a link to the page where you have this widget? It would be easier to tell what the code should be when looking at the site live.

    Thread Starter briancraw

    (@briancraw)

    Sorry had a typo AND my server went down last night.
    Thanks Greg!
    victoriouschristians.com

    Plugin Author Greg Winiarski

    (@gwin)

    Hi,
    in the code i sent earlier the line background-color: silver !important was responsible for changing the background color, if you would like to only make the background a bit darker on hover then you can try replacing it with something like background: rgba(0,0,0,0.1);

    This is a code for almost opaque black, to further adjust it to your needs you can try tweaking the 0.1 up or down (it accepts values from 0 to 1).

    Thread Starter briancraw

    (@briancraw)

    Hi, I greatly appreciate your help. That code is only changing the highlight of the actual text. The cell for each entry is the problem. I want to change the color of the cell background and not just the text. I have removed the code you provided for now.

    https://victoriouschristians.com/img/wpadverts-cell-color.jpg

    Plugin Author Greg Winiarski

    (@gwin)

    Hi,
    i am not sure if we are on the same page here, so on your screenshot, the white color inside the orange rectangle should change to some other color on hover?

    If so then the below code will do it

    
.adverts-widget-recent:hover {
    background: rgba(0,0,0,0.1) !important;
}

    This should change the background on hover in the “Demo Test” and “Arrow Test Ads” rows.

    Thread Starter briancraw

    (@briancraw)

    Great! Thank you Greg

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Widget Style’ is closed to new replies.