Use Css For Groupimages?

[iturdu]

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

[Icon]

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

[SvePu]

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:
   

[Ashley1]

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