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.
The forum of the forums
4 posters

    Post-head colour based on group colour of user

    kirkwall
    kirkwall
    kirkwall
    New Member


    Posts : 5
    Reputation : 1
    Language : English, Polish
    • Post n°1

    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.)
    • Back to top
    كونان2000
    كونان2000
    كونان2000
    Forumember


    Male Posts : 284
    Reputation : 120
    Language : Arabic
    • Post n°2

    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
    • Back to top
    kirkwall
    kirkwall
    kirkwall
    New Member


    Posts : 5
    Reputation : 1
    Language : English, Polish
    • Post n°3

    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.
    • Back to top
    كونان2000
    كونان2000
    كونان2000
    Forumember


    Male Posts : 284
    Reputation : 120
    Language : Arabic
    • Post n°4

    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

    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51554
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°5

    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

    • Back to top
    kirkwall
    kirkwall
    kirkwall
    New Member


    Posts : 5
    Reputation : 1
    Language : English, Polish
    • Post n°6

    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)
    • Back to top
    كونان2000
    كونان2000
    كونان2000
    Forumember


    Male Posts : 284
    Reputation : 120
    Language : Arabic
    • Post n°7

    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

    • Back to top
    skouliki
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15391
    Reputation : 1709
    Language : English,Greek
    Location : Greece
    • Post n°8

    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

    • Back to top

      Current date/time is November 11th 2024, 8:37 pm