Customize font and hover behavior for sidebar post navigation

Support
#1

I’m using Pro theme.
I cannot find how to target sidebar content for customizing font and borders around links to posts and the hover color. I looked at a similar question and copied the css, but it had no effect and perhaps does not apply to the Pro theme.
URL is twinbranchbiblechurch.org.
Thanks.
Daniel

#2

Let me add a little more information: I am referring to the sidebar widget area in my question.
Thanks.

#3

Hi there,

Please use the CSS selectors in the code below and refer to the comments above each CSS block.

/* Widget title */
.h-widget {

}

/* Widget border */
.widget ul, .widget ol {

}

/* Widget list items */
.widget ul li, .widget ol li {

}

/* Widget list items - hover */
.widget ul li:hover, .widget ol li:hover {

}

/* Widget list item text link */
.widget ul li a, .widget ol li a {

}

/* Widget list item text link hover */
.widget ul li a:hover, .widget ol li a:hover {

}

Hope this helps.

#4

Yes. It works. Thanks.

#5

You’re welcome, Daniel.

#6

Wait! Another question I can’t figure out. I can affect some of the borders with the CSS you provided. But some of them seem impervious to these CSS styles. For example, I can’t change the borders that are in between the blog post titles in the side bar widget. Nor can I eliminate the borders altogether. Also, I added a menu from the widget options, but my CSS does not target this area of the widget at all. Can you help further?

#7

Hi Daniel,

We can always use browser developer tools to access specific element. See this: https://screencast-o-matic.com/watch/cb6uib2c1U

.widget ul li, .widget ol li {
    font-family: poppins;
    color: #efeff5;
    text-decoration: none;
    box-shadow: none;  /*From your existing CSS, we have added this line*/
}

To remove borders: https://screencast-o-matic.com/watch/cb6uir2c1x
Replace this existing CSS:

.widget ul, .widget ol {
    border-radius: .2em;
}

With this:

.widget ul, .widget ol {
    border-radius: .2em;
    border: none;
    box-shadow: none;
}

Hope this helps.

#8

YES. Thank you!

#9

You’re welcome.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.