CSS question

@cj74 – thank you for your continued usage and support of this plugin. It’s not going away anytime soon! Robin W has done an amazing job working on it for almost a decade, and I’m pretty dedicated to keeping it updated as well.

To answer your question, widgets typically follow the theme settings for widgets. It should “automatically” style any widgets that use the CSS class “widget” according to whatever the theme has defined. Both of those bbPress widgets use the “widget” CSS class.

To target them specifically and change only their styling values (not all widgets), you can use the following CSS snippets:

Change Widget Title Color:

/* Topics & Replies Widget Title */
section.widget_display_replies h2.widget-title, section.widget_display_topics h2.widget-title {
    color: red; /* can also be hexadecimal color like #fafafa or rgb / rgba color */
}

Change Widget Links Color:

/* Topics & Replies Widget Links */
ul.bbp-replies-widget li a.bbp-reply-topic-title, ul.bbp-topics-widget li a.bbp-forum-title {
    color: red; /* can also be hexadecimal color like #fafafa or rgb / rgba color */
}

You can target them individually if you want different styling for each:

/* Replies Widget Title */
section.widget_display_replies h2.widget-title {
    color: red;
}

 /* Replies Widget Links */
ul.bbp-replies-widget li a.bbp-reply-topic-title {
    color: blue;
} 

/* Topics Widget Title */
section.widget_display_topics h2.widget-title {
    color: green;
}

 /* Topics Widget Links */
ul.bbp-topics-widget li a.bbp-forum-title {
    color: purple;
} 

You can also target the list item row for each link if you wanted different spacing/margins/padding/alignments and so on:

 /* Topics & Replies Widget List Items */
ul.bbp-topics-widget li, ul.bbp-replies-widget li {
    margin: 4px;
    padding: 10px;
} 

That should be enough to give you a solid understanding of what to target, and what to look for. Feel free to check back in here if you have any issues or additional questions.

codejp3

I do have questions but would like you first see the website homepage to get a more clear idea on what’s going on.

I remember you posting your email somewhere…can i please get that email to send you a link to the homepage?

[email protected]

Ignore the auto response. It’s an auto spam filter public email. I’ll get it as long you don’t include spammy words in your email.

Thank you kindly. I will be asking some questions but you can answer them here (quote me if you like), so that others can also benefit from it. Thank you.

@codejp3

Already sent.

In the screenshot of the general forum you see the topics – I understand the font color for that can be easily changed by thestylepack, correct?

I will be asking some questions but you can answer them here (quote me if you like), so that others can also benefit from it.

Here we go!

The questions that arose from your post which included the code snippets is where do i place those snippets?

The CSS code snippets can go in ANY enqueued CSS file. That can be a theme file, custom styling file, or by-far the easiest way – the “Custom CSS” tab within Style Pack ( wp-admin/options-general.php?page=bbp-style-pack&tab=css ).

If you include the code snippets within a theme file or custom styling file, it MUST be enqueued for the CSS code to be applied to the front-end of the website. If you choose to include them within a theme, you MUST setup a child theme to hold all of your customizations, or they will be lost if the theme is ever updated by the theme author.

If you include the code snippets in the “Custom CSS” tab within Style Pack, it will automatically be included and enqueued within the generated styling file. Simply paste your CSS snippets in there and click “save”. Done.

For these reasons, it is recommended to just use the built-in Style Pack “Custom CSS” tab.

Are there any other places at the server level like say “theme.php” or something similar that may even work better and be more permanent in sense of future changes?

As I said above, if you’re going to post them within the theme style.css file(s), you MUST setup a child theme to hold your custom styling or they will be lost whenever the theme is upgraded.

Beyond that, no, it does not matter HOW you include your custom CSS code snippets.

CSS works according to the HTML DOM hierarchy. The more specific the targeted CSS element is, the higher the priority it is given/rendered. It doesn’t matter which file the CSS code is included in, or the order it’s included. CSS works according to the targeted CSS selector. The more specific the targeted CSS selector is, the higher the priority those styling values are given/applied.

For example, targeting:

a {
    color: red;
}

That is very generic and will give ALL <a> HTML tags the color red…. UNLESS a more specific element is targeted like:

a.bbp-reply-topic-title {
    color: blue;
}

When the page is rendered with those 2 code snippets, ALL <a> HTML tags would be red EXCEPT for <a> tags that have the class “bbp-reply-topic-title”, because those were specifically targeted (higher priority) and given the color value blue.

It doesn’t matter which file(s) these CSS code snippets are included in. The specificity of the targeted selector is what determines the styles that get applied.

To further complicate it, you have a caching plugin that takes all CSS code, caches it, and injects it into the web page as “inline” code at the very beginning of the HTML output. All of the CSS code shows as “inline” as the source….which is fine because like I said, it doesn’t matter which file the code lives inside, the targeted CSS element is what determines how the page is rendered, and which styling elements are given higher priority.

The easiest way to see what CSS code is being rendered and the file(s) that contain the CSS code is by using the built-in developer tools available in most browsers today. Right-click on any part of the page you want to inspect, and then click “dev tools”, “developer tools”, “web developer”, “inspect”, or whatever it may be called for the browser you’re using.

Going on that note, for YOUR SITE, the CSS code snippets would be slightly different based on the specific theme you’re using. Instead of “section”, you’d use “aside” like so:

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


/* Topics Widget Title */
aside.widget_display_topics h2.widget-title {
    color: green;
}

In the screenshot of the general forum you see the topics – I understand the font color for that can be easily changed by thestylepack, correct?

Style Pack does not offer any direct changing of any styles for the bbPress widgets (what you originally asked about). That requires CSS code like the snippets I posted above.

But, it does offer styling for the Style Pack “Latest Activity Widget” (which you appear to be using on your site) ( wp-admin/options-general.php?page=bbp-style-pack&tab=la_widget ). That will allow you to change colors and other styling aspects without even having to use any custom CSS code snippets.

Thank you for the detailed answer ??

I am going to experiment with information and will be posting tomorrow.

@cj74 – I just sent you an email with screenshots to try to help clear up how CSS is applied.

I’ll mark this as resolved once you’ve figure out how to accomplish the color changes you want to apply. Feel free to ask any questions you need to.

Thanks @codejp3 for all the help.

I went with the plugin CSS feature, which was the easiest way to get it done.

@cj74 – got it!

Checked out your website to see the changes myself. Here’s my feedback. You can apply it, or ignore it. Your site, so do what you think is best.

1.) Widget Titles
I did not see any changes made to the widget titles. Ideally, they should match the title of all other widgets (which they currently do). If you did want to make any changes to those in the future these are the CSS elements to target:

/* ALL Widget Titles */
aside.widget h2.widget-title {
    /* styling code goes here */
}

/* ONLY Replies Widget Title */
aside.widget_display_replies h2.widget-title {
    /* styling code goes here */
}

/* ONLY Topics Widget Title */
aside.widget_display_topics h2.widget-title {
    /* styling code goes here */
}

/* BOTH Topics & Replies Widget Titles */
aside.widget_display_replies h2.widget-title, aside.widget_display_topics h2.widget-title {
    /* styling code goes here */
}

2.) Topic/Reply Authors
You asked about it in the email, and I don’t see any changes made, so if you wanted to make any changes to those, here are the CSS elements to target:

/* BOTH Topic/Reply Author Avatar */
aside.widget span.bbp-author-avatar {
    /* styling code goes here */
}

/* BOTH Topic/Reply Author Link */
aside.widget a.bbp-author-link {
    /* styling code goes here */
}

3.) Topic/Reply Links
I do see changes here. Specifically #2A3439; for reply titles, and #010203; for topic titles.
Here, I have a suggestion.

First – Links typically change color when hovered over, or visited, or active. That’s simply a matter of adding pseudo elements on to the targeted element ( :active, :visited, :hover ) and defining the values you want for those pseudo elements.

Second – Make the title colors match between both widgets. Then use the hover/active/visited pseudo elements to achieve the contrast.

For your site/theme, the standard font color for paragraphs is #3a3a3a; I would use this as the default color, and then use either #2A3439; for a subtle contrast, or #010203; for a more drastic contrast with the pseudo elements. Turning this into usable CSS code would look something like this:

/* 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/Visited */
ul.bbp-replies-widget li a.bbp-reply-topic-title:hover, ul.bbp-replies-widget li a.bbp-reply-topic-title:active,
ul.bbp-replies-widget li a.bbp-reply-topic-title:visited,
ul.bbp-topics-widget li a.bbp-forum-title:hover, ul.bbp-topics-widget li a.bbp-forum-title:active,
ul.bbp-topics-widget li a.bbp-forum-title:visited {
    color: #010203;
}

Or whatever you see fit. Maybe remove the “visited” target elements since that may confuse some people, or not look right with your theme. You have complete versatility to change these styling elements however you see fit.

I’m going to mark as resolved since it looks like you’ve got the hang of it, but feel free to ask any other questions you may have.

• This reply was modified 2 years ago by codejp3.

That’s perfect (@codejp3 ! ??

Thanks for the help.

BTW the initial change was to remove the color of both the replies and the topics. Before it was the same color as the author’s name. Now it is not.

Now both have different shades. It was a preliminary change but i will be refining it in the coming days.

Excuse the multiple messages. I din’t clearly read your last message and somehow missed the 3). Will follow the suggestions.

A strange problem. After using (copy and paste) the code the end user is seeing #010203 as standard instead of #3a3a3a for both links. Furthermore not all topics and replies are in #010203, some are in #2A3439. Particular in topics they are mixed (last 6 are in 010203,) and only one (first one) in replies is maxed. The hover doesn’t work in the ones which are in #010203

Edit: I am seeing the changes like you have described but the end user, in this case the forum moderator is seeing what i have described above. I am reverting for now until i hear from you.

• This reply was modified 2 years ago by cj74.
• This reply was modified 2 years ago by cj74.