MyBB Community Forums

Full Version: Add colours to background post of user groups
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5
I don't want to have multiple colors for usergroups so that my forum would look like a rainbow. I would like to have two usergroups,, admin and staff as additional usergroups to show. How do I do that while keeping the multiple different "main" usergroups? What is the best way to achieve this?
Eg:
SupMod group ID = 3
Admin group ID = 4
Mod group ID = 6


Make the template changes as written above and add to showthread.css:
.post_3,
.post_4,
.post_6{
   background: red; /* your desired post background color for UID 3,4,6 */
}
(2015-01-14, 04:42 PM)SvePu Wrote: [ -> ]Eg:
SupMod group ID = 3
Admin group ID = 4
Mod group ID = 6


Make the template changes as written above and add to showthread.css:

.post_3,
.post_4,
.post_6{
   background: red; /* your desired post background color for UID 3,4,6 */
}

I guess that could work, thanks! Tutorial made sense to me. I edited it to have the border color around the author information change. It was just subtle enough for my needs.
I was wondering how I could do something like this but with profiles, but like I want to add an image instead of a color.
There is a place for an image in the group settings. Were you needing additional images?
(2015-01-14, 06:55 PM)user25 Wrote: [ -> ]There is a place for an image in the group settings. Were you needing additional images?

I mean not userbars, I mean like on the profiles.
It's nearly the same way like in post content.

Edit the theme postbit template:

Search:
<div class="post_author>

Replace all with:
<div class="post_author profile_gid{$usergroup['gid']}">


and/or edit the theme postbit_classic template:

Search:
<div class="post_author scaleimages">

Replace all with:
<div class="post_author profile_gid{$usergroup['gid']} scaleimages">


Finally add the matching css rules into theme showthread.css.

CSS example for user group 2 and 4:
.post .profile_gid2 {
background-image: url(images/gid2.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;   
-moz-background-size: cover;   
-o-background-size: cover;   
background-size: cover;
}
.post .profile_gid4 {
background-image: url(images/gid4.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;   
-moz-background-size: cover;   
-o-background-size: cover;   
background-size: cover;
}

Result in classic layout:

[attachment=33527]
(2015-01-16, 11:29 PM)SvePu Wrote: [ -> ]It's nearly the same way like in post content.

Edit the theme postbit template:

Search:
<div class="post_author>

Replace all with:
<div class="post_author profile_gid{$usergroup['gid']}">


and/or edit the theme postbit_classic template:

Search:
<div class="post_author scaleimages">

Replace all with:
<div class="post_author profile_gid{$usergroup['gid']} scaleimages">


Finally add the matching css rules into theme showthread.css.

CSS example for user group 2 and 4:
.post .profile_gid2 {
background-image: url(images/gid2.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
background-size: cover;
}
.post .profile_gid4 {
background-image: url(images/gid4.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
background-size: cover;
}

Result in classic layout:

Actually I am just saying I want an image on the profile.
I don't want it to do anything with post bits.
I just want an image to be on the profile.
But I am not exactly sure the proper code to do this with. But I will try messing with the code you have before in the profile template
I thought you mean the user profile in postbit because we are talking about posts in this topic.
But what you want is almost the same stuff.

Open the theme template "member_profile" to edit.

Search for:
{$header}
<fieldset>

Replace this part with:
{$header}
<fieldset class="memprofile_gid{$memprofile['usergroup']}">

Save changes and open theme "css3.css" in advanced mode to edit

Add your desired css rules to that file and saved your changes.

CSS example
fieldset[class^=memprofile_gid] {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: cover;   
    -moz-background-size: cover;   
    -o-background-size: cover;   
    background-size: cover;
}

fieldset.memprofile_gid4 {
	background-image: url(images/profile_gid4.jpg);
}

fieldset.memprofile_gid2 {
    background-image: url(images/profile_gid2.jpg);
}

Results:
[attachment=33530] [attachment=33531]
(2015-01-17, 11:29 AM)SvePu Wrote: [ -> ]I thought you mean the user profile in postbit because we are talking about posts in this topic.
But what you want is almost the same stuff.

Open the theme template "member_profile" to edit.

Search for:
{$header}
<fieldset>

Replace this part with:
{$header}
<fieldset class="memprofile_gid{$memprofile['usergroup']}">

Save changes and open theme "css3.css" in advanced mode to edit

Add your desired css rules to that file and saved your changes.

CSS example
fieldset[class^=memprofile_gid] {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-background-size: cover;   
    -moz-background-size: cover;   
    -o-background-size: cover;   
    background-size: cover;
}

fieldset.memprofile_gid4 {
	background-image: url(images/profile_gid4.jpg);
}

fieldset.memprofile_gid2 {
    background-image: url(images/profile_gid2.jpg);
}

Results:

That is still not really what I want, but I will use this code to do it as I know how to change it
Pages: 1 2 3 4 5