CSS question

  • Resolved cj74

    (@cj74)


    1 year, 8 months ago

    Gentlemen

    I have the bbp widgets “recent replies” and “recent topics” displayed on the right sidebar of the theme. Naturally , they are listing/displaying the recent replies as well as the topics. Both, AND, the font color for the topics (Titles) in the actual forum, are the same color. So all three have the same color.

    I don’t know how i had achieved it as the website is several years old. It was most likely achieved by either some code snippet added somewhere. Probably the theme, or at the server or wordpress/bbpress level, can’t remember. which one. Perhaps you can give some suggestions on where and what to look for in terms of usual codes and their normal placement areas?

    Fast forward, i now want to change the font color of the three things listed above. I know stylepack can do it. Can you please guide me to how? Also, if i was to achive the same results without stylepack (godforbid if you guys decide to shelf it ?? ), how do i achieve the same changes by codes?

    Thank you!

    I

    • This topic was modified 1 year, 8 months ago by cj74.
Viewing 8 replies - 16 through 23 (of 23 total)

  • taking a look now…

    Update:

    Took a look real quick.

    “ul.bbp-replies-widget li a.bbp-reply-topic-title:link” does work to target unvisited links.

    “ul.bbp-replies-widget li a.bbp-reply-topic-title:hover” does not work.

    “ul.bbp-replies-widget li a.bbp-reply-topic-title:active” does not work.

    “ul.bbp-replies-widget li a.bbp-reply-topic-title:visited” does not work.

    Not even any basic standard “a:hover”, “a:visited”, or “a:active” target elements are working. That’s very telling that something isn’t right.

    It’s as if you have something preventing/overwriting specific pseudo elements. Will look into it a little more tomorrow, but it’s time for me to get some sleep tonight.

    • This reply was modified 1 year, 8 months ago by codejp3. Reason: added update
    Thread Starter cj74

    (@cj74)

    Good Morning

    Tried again to see if it may have changed. Problem still there. I’ve left it as is so you can see what’s going on. Also, i tried changing widget titles many times by that code but nothing is happening. By widget titles we mean the words “Recent replies” and “recent topics”, correct?

    @cj74 – looked at the site.

    1.) the :hover : active :visited appear to be working properly.

    However, like I said above, the “visited” may confuse people and not look right with your site, so I would probably remove that, or make it a different color to distinguish it apart from hover/active links. Here’s a revised version of that:

    /* Topics & Replies Widget Links */
ul.bbp-replies-widget li a.bbp-reply-topic-title, ul.bbp-topics-widget li a.bbp-forum-title {
    color: #3a3a3a;
}

/* Topics & Replies Widget Links Hover/Active */
ul.bbp-replies-widget li a.bbp-reply-topic-title:hover, ul.bbp-replies-widget li a.bbp-reply-topic-title:active,
ul.bbp-topics-widget li a.bbp-forum-title:hover, ul.bbp-topics-widget li a.bbp-forum-title:active {
    color: #010203;
}

/* Topics & Replies Widget Links Visited */
ul.bbp-replies-widget li a.bbp-reply-topic-title:visited,
ul.bbp-topics-widget li a.bbp-forum-title:visited {
    color: red;
}

    2.) The title will work, but requires adding “!important;” on the end of the value like this:

    /* ALL Widget Titles */
aside.widget h2.widget-title {
    color: red !important;
}

/* ONLY Replies Widget Title */
aside.widget_display_replies h2.widget-title {
    color: red !important;
}

/* ONLY Topics Widget Title */
aside.widget_display_topics h2.widget-title {
    color: red !important;
}

/* BOTH Topics & Replies Widget Titles */
aside.widget_display_replies h2.widget-title, aside.widget_display_topics h2.widget-title {
    color: red !important;
}

    I won’t be around much for the rest of the day. Dog-watching for someone and have a doggy emergency to tend to. ??

    Thread Starter cj74

    (@cj74)

    @codejp3

    Once i removed the “visited” and added the “important” to the code everything seems to be working perfectly. I have done some changes and will go with them for now. Thanks

    Good deal ??

    Thread Starter cj74

    (@cj74)

    At your convenience please let me know if the homepage looks alright or if you would suggest something different.

    What’s wrong with the “red” “green” “blue” “purple” colors I used in my code snippets? You didn’t use them! ??

    Seriously though, I thought it looked fine before but I think it looks slightly better now, just because there’s subtle contrast between the elements that it didn’t have with your default styling. Even though that particular red for widget titles doesn’t seem to be used anywhere else on your site that I could see….it works pretty well.

    As for suggestions, you could add subtle transitions to make the hover/active links change colors with a subtle effect. Just a thought.

    There’s really no limit on what you can style with CSS other than what CSS can/can’t do. It’s a balance between how picky you are and if it’s worth the time to make the changes you want. If your goal is more about the learning experience than the end result, then really dig into CSS documentation and play around with it.

    Thread Starter cj74

    (@cj74)

    “What’s wrong with the “red” “green” “blue” “purple” colors I used in my code snippets? You didn’t use them!“

    Ha! I am gonna plead the 5th on that one ??

    You’re right about the subtlety and that shade of red. I did try a few shades including one that is already there, but it came out different in this case. Some of them were too bold and some you could barely see. This one was just about right.

    Thanks a lot @codejp3

Viewing 8 replies - 16 through 23 (of 23 total)
  • The topic ‘CSS question’ is closed to new replies.

Tags