MyBB Community Forums
Add colours to background post of user groups - 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: Add colours to background post of user groups (/thread-162677.html)

Pages: 1 2 3 4 5


RE: Add colours to background post of user groups - user25 - 2015-01-14

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?


RE: Add colours to background post of user groups - SvePu - 2015-01-14

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 */
}



RE: Add colours to background post of user groups - user25 - 2015-01-14

(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.


RE: Add colours to background post of user groups - Icon - 2015-01-14

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.


RE: Add colours to background post of user groups - user25 - 2015-01-14

There is a place for an image in the group settings. Were you needing additional images?


RE: Add colours to background post of user groups - Icon - 2015-01-16

(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.


RE: Add colours to background post of user groups - SvePu - 2015-01-16

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:

   


RE: Add colours to background post of user groups - Icon - 2015-01-17

(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


RE: Add colours to background post of user groups - SvePu - 2015-01-17

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:
       


RE: Add colours to background post of user groups - Icon - 2015-01-17

(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