MyBB Community Forums
Use Css For Groupimages? - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: 1.8 Support (https://community.mybb.com/forum-175.html)
+--- Forum: General Support (https://community.mybb.com/forum-176.html)
+--- Thread: Use Css For Groupimages? (/thread-165413.html)



Use Css For Groupimages? - iturdu - 2015-01-10

Hi !
Can we use css group images ?
Is There Any Tutorial For That ?


RE: Use Css For Groupimages? - Icon - 2015-01-10

Well you can use HTML in it so probably it would work the same way.
Haven't tried it yet.


RE: Use Css For Groupimages? - SvePu - 2015-01-10

You could change the content of theme template "postbit_groupimage" to:
<div class="image_usergroup_{$usergroup['gid']}" title="{$usergroup['title']}">{$usergroup['image']}</div>

Then you can input your desired code into group settings...
   

and style your css group image as you like by adding of css code into showthread.css:
/* general styling of all group images */

div[class^=image_usergroup_] {
    width: 140px;
    height: 25px;
    margin: 2px 0 0 0;
    padding: 0;
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
}

/* individual styling of group images for user group 4 */
div.image_usergroup_4 {
    background: red;
    border: 1px solid black;
}

Result:
   


RE: Use Css For Groupimages? - Ashley1 - 2016-07-04

(2015-01-10, 04:33 PM)SvePu Wrote: You could change the content of theme template "postbit_groupimage" to:
<div class="image_usergroup_{$usergroup['gid']}" title="{$usergroup['title']}">{$usergroup['image']}</div>

Then you can input your desired code into group settings...


and style your css group image as you like by adding of css code into showthread.css:
/* general styling of all group images */

div[class^=image_usergroup_] {
    width: 140px;
    height: 25px;
    margin: 2px 0 0 0;
    padding: 0;
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
}

/* individual styling of group images for user group 4 */
div.image_usergroup_4 {
    background: red;
    border: 1px solid black;
}

Result:

How can this be extended to the group images that appear on memberlist and member_profile pages?

For memberlist groupimages - do the same for memberlist_user_groupimage template, and add the above css to global.css