Poster head background-color corresponding to group color

[Sheepi]

Hello. I have some basic coding knowledge, but I'm afraid it's not good enough for this kind of stuff.

How do you 'link' the poster head's background-color/image to a certain group depending on this group's color? For example, if I have a group with a green color, I would like the background of the poster head for all the users of this group to appear in this color on the post page.

Original:

i.imgur.com/vVwQVKx.jpg

This is what I'm aiming for (screenshot editted in Photoshop):

i.imgur.com/XICMXGs.jpg

I'm aware that I can change the color of the background-image myself, but I just can't figure it out with linking it to classes in templates or css to a corresponding group! ugh!

I would also like the mini-profile's style color to be the same as the user's group:

i.imgur.com/zY80SsJ.jpg

Lastly, I'm trying to make the user's mini avatar in the hover mini-profile also appear in the circle above the post.

i.imgur.com/wxd6hy0.jpg

(I wasn't sure if I'm supposed to make a separate topic for this issue, please excuse me if this is the case)

I've been playing around with codes, trying to figuring it out myself for quite a while now, but - nothing seems to do the job :c

thanks in advance!

[Sheepi]

Was anyone able to look at this please?

[Sheepi]

Bump

[JD]

Hey Sheepi!

The way I have done this in the past is to use the mini profile code rather than the posting template. So, I would include that top bit of the post in the mini profile template and then just have the box where the text actually goes in the posting template. If those bars are then in the mini profile template you can use an IF function to specify member group. I'm not 100% sure you can do so in the posting template as it's not in the element tree. But you might be able to.

In the mini profile you can use -

$[user.group.color]

As the grab. So you would have <div style="background-color:$[user.group.color];"></div> and that will give you the colour you want

With the avatar issue - again if you make that bar part of the mini profile template rather than the posting template you'll be able to use the same coding you did for the avatar at the side for putting the avatar in that top circle

Hope that helps! Ask any questions you need - I'll check back on this thread to make sure you're all good

[Sheepi]

JD

First of all, thank you so much for your time and helpfulness! I focused on getting the colors in the mini-profile corresponding to group color done first.

I tried some things with adding <div style="background-color:$[user.group.color];"> in both the css and templates (I didn't quite know in which specific class it had to go, so I added it in the class of which I thought is linked to the background-color of the mini-profile: .contentexterior), but unfortunately it turns up as a transparent color:
i.imgur.com/AThPf6Y.png

I tested it out by throwing my two test accounts in a group and made that group's color blue. As seen on the example, the rest of the mini-profile remains in the same color, too.

I'm sorry ! I forgot to mention that the mini-profile is a preset from the skin Dear No One:
dearnoonelivepreview.freeforums.net/

If it helps, here is the template for the mini-profile as it is now:

SPOILER: Click to show

<div class="$[miniprofile_class]" id="miniexterior">
{foreach $[user.mini_custom_field]}
{if $[user.mini_custom_field.name] == "MP3-Link"}
<div><object width="258" height="20" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" type="application/x-shockwave-flash">
<param value="#939F9F" name="bgcolor">
<param value="mp3=$[user.mini_custom_field.value]&bgcolor=000000&loadingcolor=e1e1e1&buttoncolor=e1e1e1&slidercolor=e1e1e1;" name="FlashVars">
   </object></div>{/if}{/foreach}  
<div class="contentexterior" style="background-color:$[user.group.color]">
<div class="miniprofilebgimg" style="background-image: url('https://i.imgur.com/bx3P6bb.png');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "250x350 Hover Image"}background-image: url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;">    
<div class="miniprofileplaceholder">

   
   <div align="center">
   <div class="tabs">
   <ul class="tab-links">
   <li class="active"><a href="#tab1">
<!-- These are the names of your Miniprofile Tabs -->            
      <span class="tabbedtitles">Profile</span></a></li>
      <li><a href="#tab2"> <span class="tabbedtitles">Stats</span></a></li>
      <li><a href="#tab3"> <span class="tabbedtitles">Other</span></a></li>
       
   </ul>

       
   <div class="tab-content">
   <div id="tab1" class="tab active" >
           
           <table><tbody><tr><td style="width:35px;vertical-align:top;height:120px;">
          {if $[user]} <div class="tab001">  <a href="$[user.pm_href]" title="Send a PM"><i class="fa fa-envelope" aria-hidden="true"></i>
</a></div> {/if}
             
           {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Application"}
<div class="tab001">
<a href="$[user.mini_custom_field.value]" title="Application"><i class="fa fa-address-card" aria-hidden="true"></i></a></div>{/if}{/foreach}
         
         
        {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Tracker"}
<div class="tab001">
<a href="$[user.mini_custom_field.value]" title="Tracker"><i class="fa fa-diamond" aria-hidden="true"></i></a></div>{/if}{/foreach}

               
{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Plotter"}
<div class="tab001">
<a href="$[user.mini_custom_field.value]" title="Plotter"><i class="fa fa-commenting" aria-hidden="true"></i></a></div>{/if}{/foreach}
               </td>  <td style="width:150px;vertical-align:top;">
               <div style="margin-left:20px;">$[user.avatar_medium]</div></td></tr></tbody></table>
           
           <div class="charain"><span class="profiletitle" style="white-space:nowrap;text-overflow:ellipsis;">Level</span>
         <div style="padding:8px;outline:0px solid #e1e1e1;margin-top:5px;border-radius:100%;weight:90px;height:90px;margin-left:-10px;"><div class="poco">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Niveau"}
$[user.mini_custom_field.value] {/if}{/foreach}</div>  
               
               </div></div></div>
       
     

       <div id="tab2" class="tab">
           <table><tbody><tr>
     
<td colspan="2">
<div class="mpcontainer1">
<div class="mpinfo"> {if $[user.group]}$[user.group.name] {else} Group Name {/if} </div></div> </td> </tr><tr>
               
<td>
<div class="mpcontainer" style="margin-left:5px;">
<div class="mpinfo">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Age"}
                     $[user.mini_custom_field.value]{/if}{/foreach}  Y/O
 </div></div></td>
               
<td>
<div class="mpcontainer">
<div class="mpinfo">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Gender"}
   $[user.mini_custom_field.value]{/if}{/foreach} </div></div></td><tr>
               
               
<td colspan="2">
<div class="mpcontainer1">
<div class="mpinfo">    

{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Occupation"}
                     $[user.mini_custom_field.value]{/if}{/foreach}    
   </div></div>
               </td></tr><tr>
               
               
                               
<td>
<div class="mpcontainer" style="margin-left:5px;">
<div class="mpinfo">{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Rank"}
                     $[user.mini_custom_field.value]{/if}{/foreach}
 </div></div></td>
               
<td>
<div class="mpcontainer">
<div class="mpinfo"><span style="display:none;">$[user]</span>
<span class="money_symbol"></span><span class="money_amount"></span> <img src="http://www.freeiconspng.com/uploads/coin-icon-11.png" style="width:30px;border:none;outline:none;position:absolute;">  
                 
   
   </div></div></td>
               
           
               </tr></tbody></table>

<div class="mpcontainer1">
<div class="mpinfo"> Rped by:   {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Alias"}$[user.mini_custom_field.value]{/if}{/foreach} </div></div>
           
<div class="mppersonaltext">              
<div class="mpinfo" style="height:35px;padding-left:10px;padding-right:10px;padding-top:3px;">
<p> {if $[user.personal_text]} $[user.personal_text] {/if} </p></div> </div></div>

       
       
       
       
       
       
       
       <div id="tab3" class="tab">
           

           
  <img {foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "150x150 gif"} src="$[user.mini_custom_field.value]"{/if}{/foreach} src="https://i.imgur.com/jtGo5q9.gif" style="height:150px;width:150px;margin-bottom:10px;margin-top:10px;">      

               
<table><tbody><tr>          
<td>
<div class="mpcontainer" style="margin-left:5px;">
<div class="mpinfo">$[user.posts] Posts
</div></div></td>            
<td>
<div class="mpcontainer" style="margin-left:5px;">
<div class="mpinfo">$[user.likes] Likes
</div></div></td>                      
</tr></tbody></table></div> <!-- END OF TABBED CONTENT -->
   </div></div></div>  
   
 
<script>
    jQuery(document).ready(function() {
   jQuery('.tabs .tab-links a').on('click', function(e)  {
       var currentAttrValue = jQuery(this).attr('href');

       // Show/Hide Tabs
       jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

       // Change/remove current tab to active
       jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

       e.preventDefault();
   });
    });</script>
   
   
   
<!-- Don't touch these div tags -->
   </div> </div>
   
   
   
<div class="username1">
    <div class="usercontainer">$[user]</div></div>
   


     
   
   
   
   
   </div> </div><div class="awards $[user.id] $[user.name]"></div>


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

And the css:

SPOILER: Click to show

/* MINI PROFILE REMODEL */
#miniexterior {overflow:hidden;margin-left:-10px;width:266px !important;height:416px!important;border:transparent !important;margin-bottom:20px !important;}
.contentexterior {width:250px;height:393px;border:4px solid @maincolor;margin-top:-4px;}
.miniprofilebgimg{width:250px; height:350px;position:relative;}
.username1 a {font-size:14pt;color:#fff !important;font-family:@primaryfont;text-transform:uppercase;font-weight:800;}
.username1 {padding:4px;height:35px;text-align:center;line-height:35pt;background-color:@maincolor;font-size:14pt;color:#fff !important;font-family:@primaryfont;text-transform:uppercase;font-weight:800;}
.miniprofileplaceholder {padding:10px;height:330px;width:230px;background-color:rgba(103, 98, 92, 0.48);opacity:0;position:relative;-webkit-transition: 2.5s; /* Safari 3.1 to 6.0 */transition: 2.5s;}
.miniprofilebgimg:hover .miniprofileplaceholder {opacity:1;}
.miniprofileplaceholder img {border:4px solid @maincolor;outline:1px solid @secondaryshade;}
.tabs {height:295px;display:inline-block;width:206.5px;overflow:hidden;border:8px solid @maincolor; outline:1px solid @secondaryshade;margin-top:10px; }
.tab-links:after {display:block;clear:both;content:'';}
.tab-links li { float:left;list-style:none;}
.tab-links a {padding:8px;display:inline-block;background:#cccccc;font-size:9px;font-weight:800;color:#4c4c4c;transition:all linear 0.15s;text-transform:uppercase;font-family: @primaryfont;color:@secondaryshade !important;}
.tab-links a:hover {background:#a7cce5;color:#fff;text-decoration:none;}
li.active a, li.active a:hover {background-color:#ebebeb;color:#fff !important;}      
.tab-links {background-color:@secondaryshade;}
.tab-content { height:295px;padding:15px;border-radius:0px;box-shadow:-1px 1px 1px rgba(0,0,0,0.15);background-color:#ebebeb;}
.tab {display:none; }
.tab.active {display:block;}
.tabbedtitles {padding:2px 8px 2px 8px;border:1px solid @secondaryshade;background-color:@maincolor;}
.tab01 {outline:1px solid #fff;}
.tab001 {margin-bottom:10px !important;border-radius:15% !important;text-align:center;width:25px;height:20px;background-color:@maincolor;border:1px solid @secondaryshade;font-size:9pt;line-height:15pt;}
.tab001 a {color:white !important;padding:4px;text-align:center;}
.charain {padding:8px;outline:0px solid white;border-radius:100%;width:90px;height:90px;background-color:@maincolor;}
.profiletitle {font-family:@primaryfont;color:@secondaryshade;font-weight:900;text-transform:uppercase;}
.poco {width:90px;height:90px;margin-top:5px;text-align:center;font-size:30px;font-family:Trajan Pro;font-weight:700;color:#ffffff;text-shadow:1px 1px 1px #000000;padding-right:3px;}        
.mpinfo .personal-text {color:white;}
.mpcontainer {margin-bottom:10px;text-align:center;padding:4px;height:20px;font-size:7pt;text-transform:uppercase;width:70px;border-radius:2%;background-color:$[user.group.color];font-family: @primaryfont;color:@secondaryshade;font-weight:800;}
.mpcontainer1 {margin-left:-10px;padding:4px;height:20px;font-size:7pt;text-transform:uppercase;width:185px;border-radius:2%;background-color:@maincolor;font-family:@primaryfont;color:@secondaryshade;font-weight:800;text-align:center;margin-bottom:10px;}
.mpinfo {padding:2px;outline:1px solid @secondaryshade; line-height:12pt;height:15px;}
.mppersonaltext {text-align:center;width:185px;height:40px;padding:4px;background-color:@maincolor;outline:1px solid @secondaryshade;margin-left:-8px;line-height:35pt;font-family:@primaryfont !important;color:@secondaryshade !important;font-weight:800;}
/* END OF MINI PROFILE REMODEL */

The majority colors in the code for the mini-profile in the css, however, are referred to things such as @maincolor, @secondaryshade, etc. Which makes it all the more confusing. Adding 'background-color:$[user.group.color]' doesn't seem to work if placed in the css. Or I'm doing something entirely wrong!

[JD]

have you tried <div style="background-color:#$[user.group.color];"> with the hash? >.<"