Post-head colour based on group colour of user

by kirkwall June 22nd 2022, 8:50 pm

Hello again!

I would like to know if there's a CSS code and JS script to what I'm looking for.
I'm still customizing appearance of my forum and I want to have a background-color from group colour in the post-details info.
For example:
Group 1 have a teal colour, so the post details info have a background in teal colour. Group 2 have a yellow colour, so the post details info have a background in yellow colour. And so on, so on.

I know already that there is possibility to change strong colour from the colour of the group.

Here's the screenshot of specific area in topic to show you what I want to change.
Post-head colour based on group colour of user VkOiTuu

Post-head colour based on group colour of user VkOiTuu

I have forum on #ModernBB version.

by كونان2000 June 22nd 2022, 10:08 pm

Hi @kirkwall
Do you mean a background color like the group color?

As in the picture

Post-head colour based on group colour of user Ocia_a25

by kirkwall June 22nd 2022, 10:23 pm

كونان2000 wrote: Hi @kirkwall
Do you mean a background color like the group color?

As in the picture

Hello!
Yes, indeed. I want something like that.

by كونان2000 June 23rd 2022, 5:27 am

@kirkwall

Title * : as you like
Placement : In the topics

code

Code:: (function($) { 'use strict'; $(function() { $('.post').each(function() { var $post = $(this); var color = $post.find('.postprofile-name span').css('color'); if (!color.length) return; $post .find('.post-head') .css('background-color', color) .end() .find('.post-head .topic-date, .post h2.topic-title a, .post-head .profile-icons a, .post-head .profile-icons span ') .css({ 'color': '#fff', 'border-color': color }); }); }); })(jQuery);

by **SLGray** June 23rd 2022, 6:15 am

كونان2000 wrote: @kirkwall

Title * : as you like
Placement : In the topics

code
Code:
(function($) { 'use strict'; $(function() { $('.post').each(function() { var $post = $(this); var color = $post.find('.postprofile-name span').css('color'); if (!color.length) return; $post .find('.post-head') .css('background-color', color) .end() .find('.post-head .topic-date, .post h2.topic-title a, .post-head .profile-icons a, .post-head .profile-icons span ') .css({ 'color': '#fff', 'border-color': color }); }); }); })(jQuery);

Topic starter: it is a JavaScript.

by kirkwall June 23rd 2022, 12:39 pm

كونان2000 wrote: @kirkwall

Title * : as you like
Placement : In the topics

code
Code:
(function($) { 'use strict'; $(function() { $('.post').each(function() { var $post = $(this); var color = $post.find('.postprofile-name span').css('color'); if (!color.length) return; $post .find('.post-head') .css('background-color', color) .end() .find('.post-head .topic-date, .post h2.topic-title a, .post-head .profile-icons a, .post-head .profile-icons span ') .css({ 'color': '#fff', 'border-color': color }); }); }); })(jQuery);

Thank you, @كونان2000 and @SLGray
That's exactly what I wanted to change. However, I see in the JS that post details, topic title are changed to colour white. What can I remove from JS - if it's even possible - to affect only background with group colour and the rest leave in other colours?
Also can I add to this specific JS script to change strong also to group colour automatically or should I add another JS script?

Moreover, which goes slightly off topic. Please, remind me if I should create new topic for question below.
Post-head colour based on group colour of user UostmK0

Post-head colour based on group colour of user UostmK0

I would like to know which code is responsible for changing colours above. On hover they change to blue, red or black. Buttons with reply to topic have blue background and on hover - they're red. I think that reply buttons have a code .button so I can change it, but it doesn't affect all of them.

Have a nice day!

by كونان2000 June 23rd 2022, 5:55 pm

@kirkwall

topic title are changed to colour white. What can I remove from JS - if it's even possible - to affect only background

Try replacing the script you installed in the tutorial with this one :

Code:: (function($) { 'use strict'; $(function() { $('.post').each(function() { var $post = $(this); var color = $post.find('.postprofile-name span').css('color'); if (!color.length) return; $post .find('.post-head') .css('background-color', color) .end() }); }); })(jQuery);

-----------------------

I would like to know which code is responsible for changing colours above. On hover they change to blue, red or black. Buttons with reply to topic have blue background and on hover - they're red. I think that reply buttons have a code .button so I can change it, but it doesn't affect all of them.

Yes, you can by code CSS

I suggest you open a new topic so that we can help you easily
Shake