4989 -
TUTORIAL Profile Custom Background Image
Pages (2): 1 2
#11
(01-30-2022, 03:07 PM)naivety Wrote: The code in step 4 doesn't exist in that template for me, what do I do then?

well the code exist but its may be different on your templates.
Check again the code and find simillar variables
Discord:Lobos#8684
Reply
#12
This is what the template was like for me by default... where do I insert all the code...? field ID for the profilecover custom field is 4.

Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1820"></script>


    
</head>
<body>
{$header}
    
<if $userfields['fid4'] then>
<style>.profile-cover {background-image: url({$userfields['fid4']});border-top-right-radius: 15px;border-top-left-radius: 15px;}</style>
    <else>
<style>.profile-cover {background-image: url(/images/elegant-dark/profilecover.png) !important;border-top-right-radius: 15px;border-top-left-radius: 15px;}</style>
</if>
    <div class="profile-cover-statss2-ml">{$sendpm} {$ffplugin_btn}{$buddy_options}{$ignore_options}{$report_options}</div>
<!--PROFILE COVER-->
<div class="container bootstrap snippet">
    <div class="col-md-10">
        <div class="profile-display">
            <div class="profile-cover"></div>

            <div class="profile-cover-statss2">{$sendpm} {$ffplugin_btn}{$buddy_options}{$ignore_options}{$report_options}</div>
            <div class="profile-cover-statss3 mobile-hide"><span class="largetext"><strong>{$formattedname}</strong></span><br><span style="color:#fff">{$usertitle}</span><br>{$online_status}</div>
            
            
            <div class="mobilsdsplonlinesdf">
<a href="{$mybb->settings['bburl']}/usercp.php?action=avatar">{$avatar}</a><br>
<strong>{$formattedname}</strong><br>
<span style="color:#fff">{$usertitle}</span><br>
{$online_status}
            </div>
            
            
<div class="tblt-hide profile-cover-statss1">
    <div class="profile-cover-stats">

<div class="users-profile-table-stats">
<div class="stats-num-cover" ><a href="search.php?action=finduserthreads&amp;uid={$uid}">{$memprofile['threadnum']}</a></div>
<span class="desc"><i class="fas fa-book"></i> Threads</span>
</div>

<div class="users-profile-table-stats">
<div class="stats-num-cover" ><a href="search.php?action=finduser&amp;uid={$uid}">{$memprofile['postnum']}</a></div>
<span class="desc"><i class="fas fa-comments"></i> Posts</span>
</div>

<div class="users-profile-table-stats">
    <div class="stats-num-cover" >{$referrals}</div>
<span class="desc"><i class="fas fa-users"></i> Referrals</span>
</div>



        
                    
</div></div>
                    
<div class="author-info mobile-hide">
<span class="friendlistsinprofilenum"><if $memprofile['buddylist'] > 0 then><?=count(explode(',', $memprofile['buddylist']))?><else>0</if> <i class="fas fa-users"></i> Friends</span>
    <div class="author-info-img" >

         <ion-item no-lines>
    <ion-avatar>
                    <a href="{$mybb->settings['bburl']}/usercp.php?action=avatar">{$avatar}</a>
  </ion-avatar>
  </ion-item>
    
<style>ion-avatar img  {
    width:100% !important;
    height : 100% !important;
    max-width: 150px !important;  //any size
    max-height: 150px !important; //any size
    margin: auto;
    }</style>
    
    
    </div>        

            </div>
        </div>
    </div>
</div>
<!--PROFILE COVER-->
    
<div class="dsp-tblonlyosd">
<div style="flex: 1;" ><a href="search.php?action=finduserthreads&amp;uid={$uid}">{$memprofile['threadnum']}</a><br>Threads</div>
<div style="flex: 1;" ><a href="search.php?action=finduser&amp;uid={$uid}">{$memprofile['postnum']}</a><br>Posts</div>
<div style="flex: 1;" >{$referrals}<br>Referrals</div>
    </div>
    
            <!--PROFILE CONTENT-->
    <div style="margin-top: 10px;" class="d-flex-mrp-prof">
        
<div class="flxoneprf profilesidebarleft">
<div class="userinfoprofilebox">

    {$bannedbit}
    
    <!--REP-->
    <div class="communityireputationprofile">
        <strong>COMMUNITY REPUTATION</strong>
        <strong>{$reputation}</strong>
    </div>
    <!--REP-->
    
    <!--TIME-ONLINE -->
        <div class="timeonlineprofilespend">
        <strong>{$lang->timeonline}</strong>
        <span style="color:fff!important;">{$timeonline}</span>
    </div>
    <!--TIME-ONLINE -->

    <!--USER INFO -->
    <div class="thead-profile">{$lang->users_forum_info}</div>
    <div class="profilelinesinfobox"><i class="contdlts-fdse far fa-calendar"></i> {$lang->joined}<span class="floatrightprf">{$memregdate}</span></div>
    <div class="profilelinesinfobox"><i class="contdlts-fdse fas fa-birthday-cake"></i> {$lang->date_of_birth}<span class="floatrightprf">{$membday}</span></div>
    <div class="profilelinesinfobox"><i class="contdlts-fdse far fa-calendar"></i> {$lang->lastvisit}<span class="floatrightprf">{$memlastvisitdate}</span></div>
    <div class="profilelinesinfobox"><i class="contdlts-fdse fas fa-user-circle"></i> UID:<span class="floatrightprf">{$memprofile['uid']}</span></div>
    {$warning_level}{$newpoints_profile}








    <!--USER INFO -->
{$contact_details}
    
    
</div>
</div>

    
    
        <!-- PROFILE WITH TABS -->
<div class="flxsfourprof tabsiderbaronprofile">
<div class="thead-profiletabs  profile_tabstlyt">
  <a class="profiletablinkslatestactiv active" style="cursor: pointer;width: 34%;" onclick="openCity(event, 'Home')"> &nbsp;<i class="fas fa-info-circle"></i> Additional Info</a>
  <a class="profiletablinkslatestactiv" style="cursor: pointer;width: 33%;" onclick="openCity(event, 'Shop')"> &nbsp;<i class="fas fa-signature"></i> Signature</a>
  <a class="profiletablinkslatestactiv" style="cursor: pointer;width: 33%;" onclick="openCity(event, 'Activity')"> &nbsp;<i class="fas fa-users"></i> Groups</a> 

</div>

<div id="Home" class="profiletabcontentlatestctv" style=display:block>{$profilefields}{$awaybit}{$modoptions}{$adminoptions}</div>
<div id="Shop" class="profiletabcontentlatestctv">{$signature}</div>
<div id="Activity" class="profiletabcontentlatestctv">{$groupimage}</div>

</div>


<script>
function openCity(evt, cityName) {
  var i, profiletabcontentlatestctv, profiletablinkslatestactiv;
  tabcontent = document.getElementsByClassName("profiletabcontentlatestctv");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("profiletablinkslatestactiv");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
    <!-- PROFILE WITH TABS -->
    </div>
                <!--PROFILE CONTENT-->

{$footer}
</body>
</html>

Kind regards, viking.
Reply
#13
(02-10-2022, 05:04 PM)vikingww2 Wrote: This is what the template was like for me by default... where do I insert all the code...? field ID for the profilecover custom field is 4.

Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1820"></script>


    
</head>
<body>
{$header}
    
<if $userfields['fid4'] then>
<style>.profile-cover {background-image: url({$userfields['fid4']});border-top-right-radius: 15px;border-top-left-radius: 15px;}</style>
    <else>
<style>.profile-cover {background-image: url(/images/elegant-dark/profilecover.png) !important;border-top-right-radius: 15px;border-top-left-radius: 15px;}</style>
</if>
    <div class="profile-cover-statss2-ml">{$sendpm} {$ffplugin_btn}{$buddy_options}{$ignore_options}{$report_options}</div>
<!--PROFILE COVER-->
<div class="container bootstrap snippet">
    <div class="col-md-10">
        <div class="profile-display">
            <div class="profile-cover"></div>

            <div class="profile-cover-statss2">{$sendpm} {$ffplugin_btn}{$buddy_options}{$ignore_options}{$report_options}</div>
            <div class="profile-cover-statss3 mobile-hide"><span class="largetext"><strong>{$formattedname}</strong></span><br><span style="color:#fff">{$usertitle}</span><br>{$online_status}</div>
            
            
            <div class="mobilsdsplonlinesdf">
<a href="{$mybb->settings['bburl']}/usercp.php?action=avatar">{$avatar}</a><br>
<strong>{$formattedname}</strong><br>
<span style="color:#fff">{$usertitle}</span><br>
{$online_status}
            </div>
            
            
<div class="tblt-hide profile-cover-statss1">
    <div class="profile-cover-stats">

<div class="users-profile-table-stats">
<div class="stats-num-cover" ><a href="search.php?action=finduserthreads&amp;uid={$uid}">{$memprofile['threadnum']}</a></div>
<span class="desc"><i class="fas fa-book"></i> Threads</span>
</div>

<div class="users-profile-table-stats">
<div class="stats-num-cover" ><a href="search.php?action=finduser&amp;uid={$uid}">{$memprofile['postnum']}</a></div>
<span class="desc"><i class="fas fa-comments"></i> Posts</span>
</div>

<div class="users-profile-table-stats">
    <div class="stats-num-cover" >{$referrals}</div>
<span class="desc"><i class="fas fa-users"></i> Referrals</span>
</div>



        
                    
</div></div>
                    
<div class="author-info mobile-hide">
<span class="friendlistsinprofilenum"><if $memprofile['buddylist'] > 0 then><?=count(explode(',', $memprofile['buddylist']))?><else>0</if> <i class="fas fa-users"></i> Friends</span>
    <div class="author-info-img" >

         <ion-item no-lines>
    <ion-avatar>
                    <a href="{$mybb->settings['bburl']}/usercp.php?action=avatar">{$avatar}</a>
  </ion-avatar>
  </ion-item>
    
<style>ion-avatar img  {
    width:100% !important;
    height : 100% !important;
    max-width: 150px !important;  //any size
    max-height: 150px !important; //any size
    margin: auto;
    }</style>
    
    
    </div>        

            </div>
        </div>
    </div>
</div>
<!--PROFILE COVER-->
    
<div class="dsp-tblonlyosd">
<div style="flex: 1;" ><a href="search.php?action=finduserthreads&amp;uid={$uid}">{$memprofile['threadnum']}</a><br>Threads</div>
<div style="flex: 1;" ><a href="search.php?action=finduser&amp;uid={$uid}">{$memprofile['postnum']}</a><br>Posts</div>
<div style="flex: 1;" >{$referrals}<br>Referrals</div>
    </div>
    
            <!--PROFILE CONTENT-->
    <div style="margin-top: 10px;" class="d-flex-mrp-prof">
        
<div class="flxoneprf profilesidebarleft">
<div class="userinfoprofilebox">

    {$bannedbit}
    
    <!--REP-->
    <div class="communityireputationprofile">
        <strong>COMMUNITY REPUTATION</strong>
        <strong>{$reputation}</strong>
    </div>
    <!--REP-->
    
    <!--TIME-ONLINE -->
        <div class="timeonlineprofilespend">
        <strong>{$lang->timeonline}</strong>
        <span style="color:fff!important;">{$timeonline}</span>
    </div>
    <!--TIME-ONLINE -->

    <!--USER INFO -->
    <div class="thead-profile">{$lang->users_forum_info}</div>
    <div class="profilelinesinfobox"><i class="contdlts-fdse far fa-calendar"></i> {$lang->joined}<span class="floatrightprf">{$memregdate}</span></div>
    <div class="profilelinesinfobox"><i class="contdlts-fdse fas fa-birthday-cake"></i> {$lang->date_of_birth}<span class="floatrightprf">{$membday}</span></div>
    <div class="profilelinesinfobox"><i class="contdlts-fdse far fa-calendar"></i> {$lang->lastvisit}<span class="floatrightprf">{$memlastvisitdate}</span></div>
    <div class="profilelinesinfobox"><i class="contdlts-fdse fas fa-user-circle"></i> UID:<span class="floatrightprf">{$memprofile['uid']}</span></div>
    {$warning_level}{$newpoints_profile}








    <!--USER INFO -->
{$contact_details}
    
    
</div>
</div>

    
    
        <!-- PROFILE WITH TABS -->
<div class="flxsfourprof tabsiderbaronprofile">
<div class="thead-profiletabs  profile_tabstlyt">
  <a class="profiletablinkslatestactiv active" style="cursor: pointer;width: 34%;" onclick="openCity(event, 'Home')"> &nbsp;<i class="fas fa-info-circle"></i> Additional Info</a>
  <a class="profiletablinkslatestactiv" style="cursor: pointer;width: 33%;" onclick="openCity(event, 'Shop')"> &nbsp;<i class="fas fa-signature"></i> Signature</a>
  <a class="profiletablinkslatestactiv" style="cursor: pointer;width: 33%;" onclick="openCity(event, 'Activity')"> &nbsp;<i class="fas fa-users"></i> Groups</a> 

</div>

<div id="Home" class="profiletabcontentlatestctv" style=display:block>{$profilefields}{$awaybit}{$modoptions}{$adminoptions}</div>
<div id="Shop" class="profiletabcontentlatestctv">{$signature}</div>
<div id="Activity" class="profiletabcontentlatestctv">{$groupimage}</div>

</div>


<script>
function openCity(evt, cityName) {
  var i, profiletabcontentlatestctv, profiletablinkslatestactiv;
  tabcontent = document.getElementsByClassName("profiletabcontentlatestctv");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("profiletablinkslatestactiv");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
    <!-- PROFILE WITH TABS -->
    </div>
                <!--PROFILE CONTENT-->

{$footer}
</body>
</html>

Kind regards, viking.



You dont need this tutorial for Elegant-Dark theme. There is a cover by default.

You just need to place this in your memeber profile templates.
Code:
<if $userfields['fid4'] then>
<style>
.profile-cover:before {background-image: url({$userfields['fid4']})!important;}
</style>
<else>
</if>
Discord:Lobos#8684
Reply
Pages (2): 1 2