Solved: 6 Years, 5 Months, 2 Weeks ago Use Css For Groupimages?
#1
Solved: 6 Years, 5 Months, 2 Weeks ago
Hi !
Can we use css group images ?
Is There Any Tutorial For That ?
Reply
#2
Solved: 6 Years, 5 Months, 2 Weeks ago
Well you can use HTML in it so probably it would work the same way.
Haven't tried it yet.
Reply
#3
Solved: 6 Years, 5 Months, 2 Weeks ago
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:
   
Reply
#4
Solved: 6 Years, 5 Months, 2 Weeks ago
(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
What goes around comes around
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)