codejp3

@hellsbrigade –

Italian:

Voglio solo essere chiaro che Style Pack offre attualmente il reindirizzamento dopo l’accesso, ma al momento è piuttosto limitato e consente solo di specificare un singolo URL specifico a cui reindirizzare.

Quello che voglio cambiare è consentire opzioni selezionabili per il reindirizzamento a “ultima pagina visualizzata”, “home page del sito”, “home page del forum”, “profilo WordPress”, “profilo bbPress”, “profilo BuddyPress” o “URL specifico”.

Fino a quando non verranno aggiunti questi miglioramenti, puoi comunque reindirizzare al profilo BuddyPress digitando l’URL in “2.Login/logout” > “Logged in redirect” nella scheda delle impostazioni “Login” ( wp-admin/options-general.php? page=bbp-style-pack&tab=login ).

Lavorerò anche per ottenere presto anche una traduzione automatica in italiano che potrebbe aiutarti a navigare un po ‘più facilmente nelle impostazioni.

English:

I just want to be clear that Style Pack currently offers redirection after logging in, but it’s fairly limited right now and only allows you to specify a single specific URL to redirect to.

What I want to change is to allow selectable options for redirecting to “last viewed page”, “site homepage”, “forum homepage”, “WordPress profile”, “bbPress profile”, “BuddyPress profile”, or “specific URL”.

Until these enhancements are added, you can still redirect to the BuddyPress profile by typing that URL within “2.Login/logout” > “Logged in redirect” on the “Login” settings tab ( wp-admin/options-general.php?page=bbp-style-pack&tab=login ).

I will also work on getting an Italian machine translation done soon too which may help you navigate the settings a little easier.

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.

@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. 🙁

@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 3 years, 2 months ago by codejp3.

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.