CSS for Post Count Group Name

Started by GL700Wing, February 25, 2017, 08:42:57 AM

Previous topic - Next topic

GL700Wing

I have almost zero CSS coding experience and I've spent hours today unsuccessfully trying to implement a CSS code change so that the postgroup name is shown as per the attached image (in this example the postgroup name is "In the driver's seat").

I've searched this forum and read lots of stuff about CSS coding elsewhere on the internet but I haven't found a solution.

I've been able to get the desired effect by placing the style attributes in ./Themes/default/Display.template.php but I'd prefer to make this change via ./Themes/default/css/index.css file.

Find
// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
echo '
<li class="postgroup">', $message['member']['post_group'], '</li>';


Replace with:
// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
echo '
<li class="pgname"
style="font-size: 11px; font-weight: bold; border-radius: 8px; padding: 3px 0 3px 8px;
margin-bottom: 3px; background-color: #FD9604; color: #ffffff;">',
$message['member']['post_group'], '</li>';



Hoping someone can help - thanks in anticipation.
Life doesn't have to be perfect to be wonderful ...

Kindred

in index.css, you would have to ADD a CSS setting for .postgroup


.postgroup {
font-size: 11px;
font-weight: bold;
border-radius: 8px;
padding: 3px 0 3px 8px;
margin-bottom: 3px;
background-color: #FD9604;
color: #ffffff;
}
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

GL700Wing

Quote from: Kindred on February 25, 2017, 08:46:44 AM
in index.css, you would have to ADD a CSS setting for .postgroup

Thanks - that solution didn't work exactly as I needed because the badges for the additional membergroups I display use the same CSS class (and it put borders around them) but it put me on the right track - I was able to get the result I wanted by using an ID in addition to the class.

In ./Themes/default/Display.template.php

            if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
                echo '
                                <li id="group_name" class="postgroup">', $message['member']['post_group'], '</li>';


In ./Themes/default/css/index.css

#group_name.postgroup
{
    font-size: 11px;
    font-weight: bold;
    border-radius: 8px;
    padding: 3px 0 3px 8px;
    margin-bottom: 3px;
    background-color: #FD9604;
    color: #FFFFFF;
}



Thanks again.
Life doesn't have to be perfect to be wonderful ...

Arantor

Having multiple elements with the same ID is not legal in HTML and behaviour is unpredictable with browsers. But there's nothing stopping you adding an additional class name:


            if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
                echo '
                                <li class="groupname postgroup">', $message['member']['post_group'], '</li>';


and then target that with .groupname.postgroup as a CSS selector.

GL700Wing

Quote from: Arantor on February 25, 2017, 05:29:35 PM
Having multiple elements with the same ID is not legal in HTML and behaviour is unpredictable with browsers. But there's nothing stopping you adding an additional class name:


            if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
                echo '
                                <li class="groupname postgroup">', $message['member']['post_group'], '</li>';


and then target that with .groupname.postgroup as a CSS selector.

Excellent info - I've updated my template and CSS files accordingly - thanks!
Life doesn't have to be perfect to be wonderful ...

Steve

Sounds like you're question has been answered so marking solved. If you have any other questions, or if this problem is not actually resolved, by all means, mark this unsolved and let us know. :)
DO NOT pm me for support!

Advertisement: