Hello
Welcome to Slightly Insane! You are currently not logged in, so some parts of the forum are partially hidden. Join us to get access to the community and all of our members-only content, including ProBoards themes, codes, graphic design resources, and more!
Facebook Profiles
Apr 1, 2017 18:42:37 GMT -5
First you'll want to set up the Custom Field. Go to Admin > Members > Custom Profile Fields and create the following field:Next go to Admin > Structure > Layout Templates > Forum Wrapper and paste the following directly below the $[head] variable:
Then go to Admin > Structure > Layout Templates > User Profile and replace the first tabs' content with the following:
Click on the Summary tab and replace the contents with the following:
The Activity tab:
The Friends tab:
The Notifications tab:
Lastly, go to Admin > Themes > Advanced Styles & CSS > Style Sheet and paste the following at the very bottom of the sheet:
- Do not remove the credit within the comments at the beginning and end of the code!
- If you need changes made, like re-sizing or aligning, ask me, do not fiddle with it!
- Do not re-post my codes anywhere! They will be posted only by me!
- *Note! Appearance will vary depending on forum width. Looks best with a forum background color of #e9ebee.
First you'll want to set up the Custom Field. Go to Admin > Members > Custom Profile Fields and create the following field:
Field Name: Cover Photo
Type: Text Field
Options: URL (plain text)
Location: Member Profiles Only
Who Can Edit: Member and Staff With Power
Type: Text Field
Options: URL (plain text)
Location: Member Profiles Only
Who Can Edit: Member and Staff With Power
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/2db5e705cd.js"></script>
<script>
$(document).ready(function(){
var links = document.getElementsByTagName("a");
for(var a = 0, l = links.length; a < l; a ++){
var link = links.item(a).firstChild;
if(link && link.nodeValue){
switch(link.nodeValue.replace(/\W/g, "")){
case "Summary":
links.item(a).innerHTML = "Timeline";
break;
}
}
}
});
$(document).ready(function() {
$('div.ui-tabMenu ul.ui-helper-clearfix li a[href$="/following"]').parent().hide();
$('div.ui-tabMenu ul.ui-helper-clearfix li a[href$="/groups"]').parent().hide();
});
$(document).ready(function(){
$('.button .status > img').replaceWith('Options');
$('.button .icon').replaceWith('<i class="fa fa-ellipsis-h" aria-hidden="true"></i>');
});
</script>
Then go to Admin > Structure > Layout Templates > User Profile and replace the first tabs' content with the following:
<div class="container show-user">
<div class="show-user-cover" style="{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Cover Photo"}background-image:url($[user.mini_custom_field.value]){/if}{/foreach}">
<div class="avie">
$[user.avatar]
{if $[edit_profile_button]}<a href="/user/$[user.id]/avatar" class="avie-edit"><i class="fa fa-camera" aria-hidden="true"></i> Update Avatar</a>{/if}
</div>
<div class="name_and_group">
<span class="big_username">$[user.name] <span class="small">($[user.username]) {if $[user.is_online]}<i class="fa fa-check-circle" aria-hidden="true" title="Online"></i>{/if}</span></span><br />
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]
{else}
$[user.rank.name]<br />$[user.rank.stars]
{/if}
</div>
<div class="controls">
$[options]
$[send_message_button]
$[edit_profile_button]
$[follow_button]
$[invite_button]
</div>
</div>
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
{foreach $[menu]}<li{if $[menu.active]} class="ui-active"{/if}><a href="$[menu.href]">$[menu.text]</a></li>{/foreach}
</ul>
</div>
<div class="content cap-bottom">
$[content]
</div>
</div>
Click on the Summary tab and replace the contents with the following:
$[form.header]
<table>
<tr>
<td id="left-column">
<div id="basics" class="content-box">
<h4><i class="fa fa-globe" aria-hidden="true"></i> Intro</h4>
{if $[user.custom_title]}
<p class="custom-title">
$[user.custom_title]
</p>
{/if}
{if $[user.email]}
<div class="basic">
<i class="fa fa-envelope-o" aria-hidden="true" title="Email"></i>
$[user.email]
</div>
{/if}
{if $[user.website]}
<div class="basic">
<i class="fa fa-desktop" aria-hidden="true" title="Web Site"></i>
$[user.website]
</div>
{/if}
<div class="basic">
<i class="fa fa-birthday-cake" aria-hidden="true" title="Birthday"></i>
{if $[user.birthday]}$[user.birthday]{/if} {if $[user.age]}<span class="small">($[user.age] yrs old)</span>{/if}
</div>
{if $[user.gender]}
<div class="basic">
<i class="fa fa-transgender" aria-hidden="true" title="Gender"></i>
$[user.gender.text]
</div>
{/if}
{if $[user.location]}
<div class="basic">
<i class="fa fa-map-marker" aria-hidden="true" title="Location"></i>
$[user.location]
</div>
{/if}
<div class="basic">
<i class="fa fa-pencil" aria-hidden="true" title="Posts"></i>
$[user.posts]
</div>
<div class="basic">
<i class="fa fa-thumbs-up" aria-hidden="true" title="Likes"></i>
$[user.likes]
</div>
<div class="basic">
<i class="fa fa-clock-o" aria-hidden="true" title="Date Registered"></i>
$[user.registered_on]
</div>
</div>
{if $[user.badges]}
<div id="awards" class="content-box">
<h4><i class="fa fa-trophy" aria-hidden="true"></i> Badges</h4>
<div class="badges-awards">
{foreach $[user.badges]}$[user.badges]{/foreach}
<div class="awards $[user.id]"></div>
</div>
</div>
{/if}
{if $[following]}
<div id="following" class="content-box">
<h4><i class="fa fa-address-book" aria-hidden="true"></i> $[view_following_link]</h4>
<div class="follow">
{foreach $[following]}
<div class="mini-user">
<div class="mini-avatar">
$[following.avatar_medium]
<span class="name">
$[following]
{if $[following.is_online]}
<br /><span class="small">currently online <i class="fa fa-circle" aria-hidden="true" title="Online"></i></span>
{/if}
</span>
</div>
</div>
{/foreach}
</div>
</div>
{/if}
{if $[follower]}
<div id="followers" class="content-box">
<h4><i class="fa fa-address-book-o" aria-hidden="true"></i> $[view_followers_link]</h4>
<div class="follow">
{foreach $[follower]}
<div class="mini-user">
<div class="mini-avatar">
$[follower.avatar_medium]
<span class="name">
$[follower]
{if $[follower.is_online]}
<br /><span class="small">currently online <i class="fa fa-circle" aria-hidden="true" title="Online"></i></span>
{/if}
</span>
</div>
</div>
{/foreach}
</div>
</div>
{/if}
</td>
<td id="center-column">
{if $[can.update_status]}
<div class="status-title">What's on your mind?</div>
<div class="status-box">
$[user.avatar_small]
$[form.update.input]
</div>
<div class="status-submit">$[form.submit.button]</div>
{/if}
{if $[user.warning.bar]}
<div class="status-title warning">Warning Level <div>$[user.warning.bar]</div></div>
{/if}
{if $[user.personal_text.message]}
<div class="content-box status">
<div class="status-header">
$[user.avatar_small]
<div class="status-name">
$[user]<br />
<span>last said:</span>
</div>
</div>
$[user.personal_text.message]
</div>
{/if}
{if $[user.social_network]}
<div class="status-title">Social Networks</div>
<div class="content-box networks">
{foreach $[user.social_network]}
$[user.social_network]<br />
{/foreach}
</div>
{/if}
{if $[user.instant_messenger]}
<div class="status-title">Instant Messengers</div>
<div class="content-box messengers">
{foreach $[user.instant_messenger]}
$[user.instant_messenger]<br />
{/foreach}
</div>
{/if}
<div class="status-title">Activity</div>
<div class="content-box recent">
$[recent_posts_link]<br />
$[recent_threads_created_link]
</div>
{if $[user.signature]}
<div class="status-title">Signature</div>
<div class="content-box signature">
$[user.signature]
</div>
{/if}
</td>
</tr>
</table>
$[form.footer]
The Activity tab:
<div class="friends-title"><i class="fa fa-bolt" aria-hidden="true"></i> Activity</div>
<div class="content-box" style="border-top:0">
<table class="activity list">
<tbody class="$[activity_list_class]">
$[activity_list]
</tbody>
</table>
$[more_button]
</div>
The Friends tab:
<div class="friends-title"><i class="fa fa-users" aria-hidden="true"></i> Friends</div>
<div class="friends-list">
<div class="friends">
{foreach $[online_friend]}
$[online_friend.microprofile]
{/foreach}
{foreach $[offline_friend]}
$[offline_friend.microprofile]
{/foreach}
</div>
<div class="members-link-container">
$[view_friends_link]
</div>
</div>
{if $[suggested_user]}
<div class="friends-title other-members">Other members you might know...</div>
<div class="friends-list">
{foreach $[suggested_user]}
<div class="mini-user $[suggested_user.class]">
<div class="mini-user-inside pad-bottom-thin">
<div class="mini-avatar">
$[suggested_user.avatar_medium]
</div>
<span class="name">
$[suggested_user]
</span>
</div>
$[suggested_user.follow_button]
</div>
{/foreach}
</div>
{/if}
The Notifications tab:
<div class="friends-title"><i class="fa fa-globe" aria-hidden="true"></i> Notifications</div>
<div class="content-box" style="border-top:0">
<table class="notifications list">
<tbody class="$[notification_list_class]">
$[notification_list]
</tbody>
</table>
$[more_button]
</div>
Lastly, go to Admin > Themes > Advanced Styles & CSS > Style Sheet and paste the following at the very bottom of the sheet:
/* Facebook Profiles */
/* by Trinity Blair */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i');
/*.show-user { background-color: #e9ebee; padding: 50px; box-sizing: border-box; border-radius: 3px; border: 1px solid #d3d6db; }*/
.show-user td.avatar, .show-user th.avatar { display: none; }
.show-user .list .main { padding: 10px; }
.show-user, .show-user a, .show-user a:hover { font-family: Roboto; }
.show-user .content { background: transparent; padding: 0; border: 0; }
.show-user .content-box { border-radius: 3px; border-color: #e5e5e5; margin-bottom: 20px; }
.status-title { border-radius: 3px 3px 0 0; background-color: #f6f7f9; color: #4b4f56; border-bottom: 0 !important; font-size: 12px; font-weight: bold; border: 1px solid #e5e5e5; padding: 10px; }
.show-user .status-box { display: flex; background-color: white; border: 1px solid #e5e5e5; border-radius: 0; padding: 10px; margin: 0; }
.show-user .status-box .avatar-wrapper { margin-right: 10px; border: 1px solid rgba(0, 0, 0, .1) !important; height: 40px; width: 40px; }
.show-user .status-box .avatar-wrapper img { height: 40px; width: 40px; }
.show-user .status-box input { width: 100%; height: 34px; border: 0; }
.show-user .status-submit { width: initial; background-color: white; padding: 7px; border: 1px solid #e5e5e5; border-top: 0; border-radius: 0 0 3px 3px; margin-bottom: 20px; }
.show-user .status-submit input[type="submit"] { padding: 0 16px; background-image: none; height: initial; line-height: 22px; background-color: #4267b2; color: white; border: 0; font-size: 12px; border-radius: 3px; font-family: Roboto; }
.show-user .status { padding: 10px; }
.show-user .status .avatar-wrapper { margin-right: 5px; border: 1px solid rgba(0, 0, 0, .1) !important; height: 40px; width: 40px; }
.show-user .status .avatar-wrapper img { height: 40px; width: 40px; }
.show-user .status-header { display: flex; align-items: center; margin-bottom: 11px; }
.show-user .status-name a { color: #365899 !important; font-weight: bold; font-size: 14px; }
.show-user .status-name span { color: #90949c; }
.show-user #left-column { width: 323px; vertical-align: top; padding-right: 20px; }
.show-user #left-column .content-box { padding: 12px; box-sizing: border-box; }
.show-user #left-column .content-box h4 { display: flex; align-items: center; font-size: 16px; font-weight: normal; color: #4b4f56; margin-bottom: 12px; }
.show-user #left-column .content-box h4 a { color: #4b4f56; }
.show-user #left-column .content-box h4 i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: #4267b2; color: white; font-size: 13px; margin-right: 5px; }
.show-user #left-column #awards h4 i { background-color: #a5d950; }
.show-user #left-column #following h4 i, .show-user #left-column #followers h4 i { background-color: #f50e6b; }
.show-user .follow { margin: -5px; }
.show-user .mini-user { padding: 4px 0 0 0; width: 100px; max-width: 100px; height: 100px; max-height: 100px; }
.show-user .status-title.warning { display: flex; align-items: center; margin-bottom: 20px; border-radius: 3px; border: 1px solid #e5e5e5 !important; }
.show-user .status-title.warning > div { margin-left: 10px; flex: 1 1; }
.show-user .friends-title { background-color: #f6f7f9; border: 1px solid #d3d6db; border-bottom: 0; border-radius: 3px 3px 0 0; color: #4b4f56; font-size: 20px; padding: 10px; }
.show-user .friends-title.other-members { margin-top: 20px; }
.show-user .friends-title i { width: 24px; text-align: center; color: #adb3bc; margin-right: 5px; }
.show-user .friends-list { background-color: white; border: 1px solid #d3d6db; padding: 10px; border-radius: 0 0 3px 3px; }
.show-user .friends { display: flex; flex-wrap: wrap; margin: -5px; }
.show-user .friends .micro-profile { display: flex; align-items: center; flex: 0 1 32.1% !important; box-sizing: border-box; margin: 5px; padding: 0; border-radius: 0; height: 100px; }
.show-user .friends .micro-profile .avatar { position: initial; top: 0; width: 100px; }
.show-user .friends .micro-profile .info { position: initial; top: 0; width: initial; padding: 10px; }
.show-user .friends .micro-profile .nowrap { white-space: normal; }
.show-user .friends .micro-profile .avatar_size_small, .show-user .friends .micro-profile .avatar_size_small img { max-width: 100px; width: 100px; height: 100px; max-height: 100px; }
.show-user .members-link-container { margin: 0; }
.show-user .mini-avatar { position: relative; }
.show-user .mini-avatar .avatar_size_medium, .show-user .mini-avatar .avatar_size_medium img { width: 100px; max-width: 100px; height: 100px; max-height: 100px; }
.show-user .mini-avatar span.name { background: linear-gradient(transparent, rgba(0, 0, 0, .7)); position: absolute; bottom: 0; width: 100px; padding: 5px; box-sizing: border-box; text-align: left; left: 0; }
.show-user .badges-awards { display: flex; align-items: center; flex-wrap: wrap; }
.show-user .content-box.signature, .show-user .content-box.recent, .show-user .content-box.networks, .show-user .content-box.messengers { padding: 10px; border-radius: 0 0 3px 3px; }
.show-user .content-box.signature img { max-width: 100%; }
.show-user .mini-avatar span.name a { color: white !important; }
.show-user .mini-avatar span.name i { color: #4080ff; }
.show-user .mini-avatar span.small { color: white; }
.show-user a.button, .show-user .button, .show-user a.button:hover, .show-user .button:hover { background-color: #f6f7f9; background-image: none; padding: 2px 10px; border-radius: 0; border-color: rgba(0, 0, 0, .4); font-weight: bold; color: #4b4f56; }
.show-user div#options-container { padding: 0 10px 0 0; }
.show-user .button .status { padding: 2px 7px; font-family: Roboto; font-size: 12px; font-weight: bold; }
.show-user .button i { color: #d2d4d8; padding: 7px 0 0 10px; }
.show-user .custom-title { padding: 12px 16px; text-align: center; border-bottom: 1px solid #e9ebee; margin-bottom: 12px; font-size: 12px; }
.show-user .basic { padding: 4px; font-size: 12px; }
.show-user .basic i { width: 12px; text-align: center; margin-right: 10px; height: 12px; color: #a6aab3; }
.show-user .show-user-cover { background-color: white; border-radius: 3px 3px 0 0; display: flex; justify-content: space-between; align-items: flex-end; height: 315px; padding: 15px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .25); border-bottom-color: rgba(0, 0, 0, .4); box-shadow: inset 0 -200px 200px -200px #000000; -moz-box-shadow: inset 0 -200px 200px -200px #000000; -webkit-box-shadow: inset 0 -200px 200px -200px #000000; background-size: cover; background-position: center center; }
.show-user .name_and_group { flex: 1 1; padding: 0 0 0 20px; box-sizing: border-box; text-shadow: 0 0 3px rgba(0,0,0,.8); color: white; text-rendering: optimizelegibility; }
.show-user .fa.fa-check-circle { color: rgb(66, 183, 42); }
.show-user .show-user-cover .avatar_size_default { width: 168px; height: 168px; background: rgba(0, 0, 0, .3); border-radius: 3px; box-shadow: 0 1px 1px rgba(0, 0, 0, .07); padding: 1px; }
.show-user .show-user-cover .avatar_size_default img { max-height: 160px; height: 160px; max-width: 160px; width: 160px; background-color: white; border: 4px solid white; border-radius: 2px; }
.show-user .ui-tabMenu { background-color: white; border: 1px solid; border-top: 0; border-color: #d3d6db; border-radius: 0 0 3px 3px; padding: 0 0 0 201px; box-sizing: border-box; margin-bottom: 20px; }
.show-user .ui-tabMenu ul { background-color: transparent; border-left: 1px solid #e9eaed; border-bottom: 0; padding: 0; }
.show-user .ui-tabMenu ul li { background: transparent; border: 0; border-radius: 0; top: 0; margin: 0; height: inherit; }
.show-user .ui-tabMenu ul li.ui-active a { border-bottom: 0; color: #4b4f56; }
.show-user .ui-tabMenu ul li a { display: flex; align-items: center; border-right: 1px solid #e9eaed; font-weight: bold; height: 43px; padding: 0 17px; font-family: Roboto; }
.show-user .ui-tabMenu ul li a:hover { background-color: #f6f7f9; }
.show-user .avie { position: relative; bottom: -45px; overflow: hidden; }
.show-user .avie:hover .avie-edit { bottom: 5px; opacity: .7; transition: .13s ease-in; }
.show-user .avie-edit { position: absolute; display: flex; align-items: center; justify-content: center; bottom: -50px; left: 5px; width: 160px; padding: 20px; box-sizing: border-box; background-color: black; opacity: 0; color: white; transition: .13s ease-in; }
.show-user .avie-edit i { margin-right: 5px; opacity: .5; }
.show-user .delete { border-right: 0; }