Post-head colour based on group colour of user Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    Post-head colour based on group colour of user

    kirkwall
    kirkwall
    New Member


    Posts : 5
    Reputation : 1
    Language : English, Polish

    In progress Post-head colour based on group colour of user

    Post 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

    I have forum on #ModernBB version.


    Last edited by kirkwall on June 22nd 2022, 8:51 pm; edited 1 time in total (Reason for editing : Add the screenshot.)
    كونان2000
    كونان2000
    Forumember


    Male Posts : 217
    Reputation : 100
    Language : Arabic

    In progress Re: Post-head colour based on group colour of user

    Post 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
    kirkwall
    kirkwall
    New Member


    Posts : 5
    Reputation : 1
    Language : English, Polish

    In progress Re: Post-head colour based on group colour of user

    Post 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
    Post-head colour based on group colour of user Ocia_a25
    Hello!
    Yes, indeed. I want something like that.
    كونان2000
    كونان2000
    Forumember


    Male Posts : 217
    Reputation : 100
    Language : Arabic

    In progress Re: Post-head colour based on group colour of user

    Post 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);

    TonnyKamper and kirkwall like this post

    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51548
    Reputation : 3519
    Language : English
    Location : United States

    In progress Re: Post-head colour based on group colour of user

    Post 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.



    Post-head colour based on group colour of user Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.

    kirkwall likes this post

    kirkwall
    kirkwall
    New Member


    Posts : 5
    Reputation : 1
    Language : English, Polish

    In progress Re: Post-head colour based on group colour of user

    Post 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
    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!


    Last edited by kirkwall on June 23rd 2022, 12:43 pm; edited 2 times in total (Reason for editing : another question - about strong text in posts)
    كونان2000
    كونان2000
    Forumember


    Male Posts : 217
    Reputation : 100
    Language : Arabic

    In progress Re: Post-head colour based on group colour of user

    Post 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

    TonnyKamper and kirkwall like this post

    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15265
    Reputation : 1701
    Language : English,Greek
    Location : Greece

    In progress Re: Post-head colour based on group colour of user

    Post by skouliki July 5th 2022, 12:47 pm

    rudesingh56 wrote:I remove from JS - if it's even possible - to affect only background with group colour and the rest leave in other colours?

    Please don't hijack another member’s topic's.
    Please open your own thread if you having a problem with your forum.
    Please read our forum rules:ESF General Rules