COVER image above profile (based on the profile picture)
Mod Version: 1.00, by vladig
| vB Version: 4.x.x | Rating:  (1 vote - 5.00 average) |
Installs: 16 |
| Released: 26 Oct 2012 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
Re-usable Code
|
||
Hey.
This is my second mod and this mod allows to set a COVER image above the, Just like Facebook. This mod is based on a system of "profile picture" that came with the system. Because it is based on the system profile picture, if other users have used image profile, the COVER image will stretch so don't forget to tell your visitors about thet changes.
How to do it?
Open the file "MEMBERINFO", delete it all and write instead:
Save the file.
Search the file memberinfo_block_profilepicture, delete everything and write:
This is my second mod and this mod allows to set a COVER image above the, Just like Facebook. This mod is based on a system of "profile picture" that came with the system. Because it is based on the system profile picture, if other users have used image profile, the COVER image will stretch so don't forget to tell your visitors about thet changes.
How to do it?
Open the file "MEMBERINFO", delete it all and write instead:
Code:
{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
{vb:raw headinclude}
<title>{vb:rawphrase view_profile}: {vb:raw prepared.username} - {vb:raw vboptions.bbtitle}</title>
<vb:if condition="$userinfo['userid'] == $bbuserinfo['userid']">
<script type="text/javascript">
vbphrase['edit_value_js'] = "{vb:rawphrase edit_value_js}";
vbphrase['server_failed_respond_try_again'] = "{vb:rawphrase server_failed_respond_try_again}";
</script>
<script type="text/javascript" src="clientscript/vbulletin_profilefield_edit.js?v={vb:raw vboptions.simpleversion}"></script>
</vb:if>
<script type="text/javascript" src="clientscript/vbulletin_quick_edit_generic.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript" src="clientscript/vbulletin_quick_edit_visitormessage.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript" src="clientscript/vbulletin_activitystream.js?v={vb:raw vboptions.simpleversion}"></script>
<script type="text/javascript">
<!--
var isIE7 = navigator.userAgent.toLowerCase().indexOf('msie 7') != -1;
var isIE = navigator.userAgent.toLowerCase().indexOf('msie') != -1;
var isIE6 = navigator.userAgent.toLowerCase().indexOf('msie 6') != -1;
var THISUSERID = {vb:raw userinfo.userid};
vB_XHTML_Ready.subscribe(init_PostBits_Lite);
function init_PostBits_Lite()
{
var postbits = YAHOO.util.Dom.getElementsByClassName("postbit_lite", "li", "postlist");
for (var i = 0; i < postbits.length; i++)
{
new PostBit_Lite(postbits[i]);
}
}
function PostBit_Lite(postbit)
{
this.postbit = YAHOO.util.Dom.get(postbit);
this.postid = postbit.id.substr("piccom_".length);
this.inlinemod = new InlineModControl(this.postbit, this.postid, "imodsel");
}
function getParentElement(starterElement, classPattern, testTagName) {
var currElement = starterElement;
var foundElement = null;
while(!foundElement && (currElement = currElement.parentNode)) {
if ((classPattern && (currElement.className.indexOf(classPattern) != -1)) || (testTagName && (testTagName.toLowerCase() == currElement.tagName.toLowerCase())))
{
foundElement = currElement;
}
}
//go up the parentNode tree until found element with matching className
return foundElement;
}
//getParentElement
function tabViewPicker(anchorObject) {
var clickedTabId = null;
var tabtree = getParentElement(anchorObject,"tabslight");
var anchorInventory = tabtree.getElementsByTagName("a");
var tabIds = [];
for (var i=0; (currAnchor = anchorInventory[i]); i++) {
var anchorId = currAnchor.href.substring(currAnchor.href.indexOf("#") + 1, currAnchor.href.length);
var parentDd = getParentElement(currAnchor,null,"dd");
if (currAnchor == anchorObject) {
clickedTabId = anchorId;
parentDd.className = "userprof_module";
}
else
{
parentDd.className = "userprof_moduleinactive";
}
tabIds.push(anchorId);
}
//loop thru anchors to gather all tab IDs and set appropriate selected status
for (var j=0; (currTabId = tabIds[j]); j++) {
var elem = document.getElementById("view-" + currTabId);
if (!elem) {continue;}
if (currTabId == clickedTabId) {
//elem.className="selected_view_section";
YAHOO.util.Dom.replaceClass(elem, "view_section", "selected_view_section");
}
else
{
//elem.className="view_section";
YAHOO.util.Dom.replaceClass(elem, "selected_view_section", "view_section");
}
}
//set appropriate status on all tabs.
return false;
}
//-->
</script>
<vb:if condition="$show['post_visitor_message']">
<script type="text/javascript">
<!--
function goto_post_pm()
{
tabViewPicker(document.getElementById('visitor_messaging-tab'));
fetch_object('view-visitor_messaging').scrollIntoView();
var textarea = fetch_object('visitor_message_form_textarea');
if (textarea)
{
textarea.focus();
textarea.select();
}
return false;
}
//-->
</script>
</vb:if>
<vb:if condition="$show_customize_profile">
<script type="text/javascript">
<!--
{vb:raw themes_js}
// for yui style picker:
loadVbCss(yuipath + '/slider/assets/skins/sam/slider.css');
loadVbCss(yuipath + '/colorpicker/assets/skins/sam/colorpicker.css');
loadVbCss(yuipath + '/container/assets/skins/sam/container.css');
if (remoteyui && yuicombopath)
{
document.write('<script type="text/javascript" src="' + yuicombopath + '?{vb:raw yui_version}/build/utilities/utilities.js&{vb:raw yui_version}/build/dragdrop/dragdrop-min.js&{vb:raw yui_version}/build/element/element-min.js&{vb:raw yui_version}/build/slider/slider-min.js&{vb:raw yui_version}/build/colorpicker/colorpicker-min.js&{vb:raw yui_version}/build/container/container-min.js&{vb:raw yui_version}/build/animation/animation-min.js&{vb:raw yui_version}/build/json/json-min.js"></script>');
}
else
{
document.write('<script type="text/javascript" src="' + yuipath + '/utilities/utilities.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/dragdrop/dragdrop-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/element/element-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/slider/slider-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/colorpicker/colorpicker-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/container/container-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/animation/animation-min.js"></script>');
document.write('<script type="text/javascript" src="' + yuipath + '/json/json-min.js"></script>');
}
document.write('<script type="text/javascript" src="clientscript/vbulletin_userprofile.js?v={vb:raw vboptions.simpleversion}"></script>');
//-->
</script>
</vb:if>
<vb:if condition="$vboptions['storecssasfile']">
{vb:cssfile memberinfo-rollup.css}
<vb:else />
{vb:cssfile activitystream.css,sidebar.css,forumbits.css,postbit.css,postbit-lite.css,showthread.css,member.css,user{vb:raw userinfo.userid}}
</vb:if>
<style type="text/css">{vb:raw template_hook.memberinfo_css}</style>
<!--[if lt IE 8]>{vb:cssfile sidebar-ie.css,member-ie.css,postbit-lite-ie.css}<![endif]-->
<vb:comment>
If the member has a custom theme, and we are actually displaying it
then load additional.css before the theme, otherwise load it afterwards.
</vb:comment>
<vb:if condition="$show['userhastheme'] AND $show['showusercss']">
{vb:raw headinclude_bottom}
<link rel="stylesheet" type="text/css" href="css.php?userid={vb:raw show_userid}&cssuid={vb:raw show.cssuid}&d={vb:raw timenow}&td={vb:stylevar textdirection}&styleid={vb:raw session.styleid}&sheet=userprofile.css" />
<vb:else />
<link rel="stylesheet" type="text/css" href="css.php?userid={vb:raw show_userid}&cssuid={vb:raw show.cssuid}&d={vb:raw timenow}&td={vb:stylevar textdirection}&styleid={vb:raw session.styleid}&sheet=userprofile.css" />
{vb:raw headinclude_bottom}
</vb:if>
</head>
<body>
{vb:raw header}
{vb:raw navbar}
<vb:if condition="$prepared['profilepicurl']">
{vb:raw blocks.profile_picture}
</vb:if>
<style>.profileimg {
width: 1278px;
min-height: 250px;
max-height: 350px;
margin-top: -32px;
margin-bottom: -41px;
border-bottom: 5px solid hsla(204, 39%, 42%, 0.63);
border-top: 5px solid;
margin-right: -20px;
border-radius: 5px 5px 0 0;
}
</style>
{vb:raw memberinfo_customize}
<div class="member_content userprof fullwidth" style="display:block;float:{vb:stylevar left}" id="member_content">
<div class="profile_widgets member_summary userprof_moduleinactive userprof_moduleinactive_border<vb:if condition="$stylevar['textdirection'] == 'ltr'"> sidebarleft</vb:if>" id="sidebar_container">
<div class="block mainblock moduleinactive_bg">
<h1 class="blocksubhead prof_blocksubhead">
<vb:if condition="$show['edit_profile']">
<a href="moderator.php?{vb:raw session.sessionurl}do=useroptions&u={vb:raw userinfo.userid}" class="textcontrol imagecontrol"><img src="{vb:stylevar imgdir_button}/edit_40b.png" alt="{vb:rawphrase edit_user_profile}" /></a>
</vb:if>
<span id="userinfo">
<span class="member_username">{vb:raw prepared.musername}</span>
<span class="member_status">{vb:raw prepared.onlinestatus}</span>
<vb:if condition="$prepared['usertitle']">
<br />
<span class="usertitle">{vb:raw prepared.usertitle}</span>
</vb:if>
<vb:if condition="$prepared['rank']">
<br />
<span class="rank">{vb:raw prepared.rank}</span>
</vb:if>
<vb:if condition="$show['reputation']">
<br />
<span class="member_reputation" title="{vb:raw prepared.username} {vb:raw prepared.level}">
<vb:each from="reputationdisplay" value="row">
<img class="{vb:raw row.class}" src="{vb:stylevar imgdir_reputation}/reputation_{vb:raw row.posneg}{vb:raw row.imgext}" alt="" />{vb:raw row.rowend}
</vb:each>
</span>
<br />
</vb:if>
</span>
</h1>
<div id="userinfoblock" class="floatcontainer">
<ul id="usermenu" class="usermenu">
<vb:if condition="$prepared['canbefriend']">
<li><a href="profile.php?{vb:raw session.sessionurl}do=addlist&userlist=friend&u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/add.png" alt="{vb:rawphrase add_as_friend}" class="inlineimg" /> {vb:rawphrase add_as_friend}</a></li>
</vb:if>
<vb:if condition="$show['contactlinks'] AND $show['pmlink']">
<li><a href="private.php?{vb:raw session.sessionurl}do=newpm&u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/message.png" alt="{vb:rawphrase send_private_message}" class="inlineimg" /> {vb:rawphrase send_private_message}</a></li>
</vb:if>
<vb:if condition="$show['email']">
<li>
<a href="sendmessage.php?{vb:raw session.sessionurl}do=mailmember&u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/email.png" alt="{vb:rawphrase email}" class="inlineimg" /> {vb:rawphrase send_email}</a>
</li>
</vb:if>
<vb:if condition="$prepared['homepage']">
<li>
<a href="{vb:raw prepared.homepage}"><img src="{vb:stylevar imgdir_siteicons}/homepage.png" alt="{vb:rawphrase home_page}" class="inlineimg" /> {vb:rawphrase home_page}</a>
</li>
</vb:if>
<vb:if condition="$show['addignorelist']">
<li>
<a href="profile.php?{vb:raw session.sessionurl}do=addlist&userlist=ignore&u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/ignore.png" alt="{vb:rawphrase add_to_ignore_list}" class="inlineimg" /> {vb:rawphrase add_to_ignore_list}</a>
</li>
</vb:if>
<vb:if condition="$show['removeignorelist']">
<li>
<a href="profile.php?{vb:raw session.sessionurl}do=removelist&userlist=ignore&u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/ignore.png" alt="{vb:rawphrase remove_from_ignore_list}" class="inlineimg" /> {vb:rawphrase remove_from_ignore_list}</a>
</li>
</vb:if>
<vb:if condition="$show['usernotes']">
<li>
<a href="usernote.php?{vb:raw session.sessionurl}u={vb:raw prepared.userid}"><img src="{vb:stylevar imgdir_siteicons}/note.png" alt="{vb:rawphrase user_notes}" class="inlineimg" /> {vb:rawphrase user_notes} ({vb:raw prepared.usernotecount})</a>
</li>
</vb:if>
<li><a href="search.php?{vb:raw session.sessionurl}do=finduser&userid={vb:raw userinfo.userid}&contenttype=vBForum_Post&showposts=1"><img src="{vb:stylevar imgdir_siteicons}/forum.png" alt="{vb:rawphrase find_all_posts}" class="inlineimg" /> {vb:rawphrase find_all_posts}</a></li>
<li><a href="search.php?{vb:raw session.sessionurl}do=finduser&userid={vb:raw userinfo.userid}&starteronly=1&contenttype=vBForum_Thread"><img src="{vb:stylevar imgdir_siteicons}/forum.png" alt="{vb:rawphrase find_all_started_threads}" class="inlineimg" /> {vb:rawphrase find_all_started_threads}</a></li>
<vb:if condition="$show['viewarticles']">
<li><a href="{vb:raw$ author_list_url}" rel='nofollow'><img src="{vb:stylevar imgdir_siteicons}/article.png" class="inlineimg" alt="" /> {vb:rawphrase view_articles}</a></li>
</vb:if>
<vb:if condition="$show['viewblog']">
<li><a href="{vb:raw $vboptions.vbblog_url}{vb:if "$vboptions['vbblog_url']", '/', ''}blog.php?{vb:raw session.sessionurl}u={vb:raw userinfo.userid}" rel='nofollow'><img src="{vb:stylevar imgdir_siteicons}/blog.png" class="inlineimg" alt="" /> {vb:rawphrase view_blog_entries}</a></li>
</vb:if>
<vb:if condition="$show['view_conversation']">
<li>
<a href="converse.php?{vb:raw session.sessionurl}u={vb:raw userinfo.userid}&u2={vb:raw bbuserinfo.userid}"><img src="{vb:stylevar imgdir_siteicons}/forum.png" alt="{vb:rawphrase view_conversations}" class="inlineimg" /> {vb:rawphrase view_conversations}</a>
</li>
</vb:if>
</ul>
</div>
</div>
<vb:comment>sidebar</vb:comment>
{vb:raw template_hook.profile_sidebar_first}
{vb:raw blocks.stats_mini}
{vb:raw template_hook.profile_sidebar_stats}
{vb:raw blocks.friends_mini}
{vb:raw template_hook.profile_sidebar_friends}
{vb:raw blocks.albums}
{vb:raw template_hook.profile_sidebar_albums}
{vb:raw blocks.groups}
{vb:raw template_hook.profile_sidebar_groups}
{vb:raw blocks.visitors}
{vb:raw template_hook.profile_sidebar_last}
<vb:comment>sidebar</vb:comment>
</div>
<div class="member_tabs<vb:if condition="$stylevar['textdirection'] == 'ltr'"> contentright</vb:if>" id="userprof_content_container">
<div class="tabbackground" id="profile_tabs">
<div class="floatleft" id="tab_container">
<dl class="tabslight">
<dt>Tab Content</dt>
{vb:raw template_hook.profile_tabs_first}
<vb:if condition="$blocks[activitystream]"><dd<vb:if condition="$selected_tab == 'activitystream' OR $selected_tab == ''"> class="userprof_module" <vb:else /> class="userprof_moduleinactive" </vb:if>><a id="activitystream-tab" href="{vb:link member, {vb:raw userinfo}, "tab=activitystream"}#activitystream" onclick="return tabViewPicker(this);">{vb:raw activity_phrase}</a></dd></vb:if>
<vb:if condition="$blocks[visitor_messaging]"><dd <vb:if condition="$selected_tab == 'visitor_messaging'"> class="userprof_module"<vb:else /> class="userprof_moduleinactive" </vb:if>><a id="visitor_messaging-tab" href="{vb:link member, {vb:raw userinfo}, "tab=visitor_messaging"}#visitor_messaging" onclick="return tabViewPicker(this);">{vb:rawphrase visitor_messages_tab}</a></dd></vb:if>
<dd<vb:if condition="$selected_tab == 'aboutme'"> class="userprof_module"<vb:else /> class="userprof_moduleinactive" </vb:if>><a id="aboutme-tab" href="{vb:link member, {vb:raw userinfo}, "tab=aboutme"}#aboutme" onclick="return tabViewPicker(this);">{vb:rawphrase about_me}</a></dd>
<vb:if condition="$blocks[friends]"><dd<vb:if condition="$selected_tab == 'friends'"> class="userprof_module" <vb:else /> class="userprof_moduleinactive"</vb:if>><a id="friends-tab" href="{vb:link member, {vb:raw userinfo}, "tab=friends"}#friends-content" onclick="return tabViewPicker(this);">{vb:rawphrase friends}</a></dd></vb:if>
<vb:if condition="$blocks[infractions]"><dd<vb:if condition="$selected_tab == 'infractions'"> class="userprof_module" <vb:else /> class="userprof_moduleinactive" </vb:if>><a id="infractions-tab" href="{vb:link member, {vb:raw userinfo}, "tab=infractions"}#infractions-content" onclick="return tabViewPicker(this);">{vb:rawphrase infractions}</a></dd></vb:if>
<vb:if condition="$blocks[reputation]"><dd<vb:if condition="$selected_tab == 'reputation'"> class="userprof_module" <vb:else /> class="userprof_moduleinactive" </vb:if>><a id="reputation-tab" href="{vb:link member, {vb:raw userinfo}, "tab=reputation"}#reputation-content" onclick="return tabViewPicker(this);">{vb:rawphrase reputation}</a></dd></vb:if>
{vb:raw template_hook.profile_tabs_last}
</dl>
</div>
<vb:if condition="$show_customize_profile">
<button class="floatright userprof_button hidden" id="profile_customization_button"><img src="{vb:stylevar imgdir_misc}/userprofile/paintbucket_icon.png" alt=""/> {vb:rawphrase customize_my_profile}</button>
<vb:else />
<vb:if condition="$show['userhastheme']">
<form action="{vb:link member, {vb:raw userinfo}}" method="get" id="profile_swap_form" class="floatright">
<input type="hidden" name="do" value="swapcss" />
<input type="hidden" name="u" value="{vb:raw prepared.userid}" />
<input type="hidden" name="token" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="submit" tabindex="1" name="swapcss" value="{vb:raw usercss_switch_phrase}" class="userprof_button" id="profile_swap_button" />
</form>
</vb:if>
</vb:if>
<div class="memberprofiletabunder"></div>
</div>
<div class="profile_content userprof">
<div id="view-activitystream" class="<vb:if condition="$selected_tab == 'activitystream' OR $selected_tab == ''">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.activitystream}
</div>
<div id="view-visitor_messaging" class="<vb:if condition="$selected_tab == 'visitor_messaging'">selected_view_section<vb:else />view_section</vb:if><vb:if condition="$userinfo['userid'] != $bbuserinfo['userid']"> vm_other_prof</vb:if>">
{vb:raw blocks.visitor_messaging}
</div>
<div id="view-aboutme" class="<vb:if condition="$selected_tab == 'aboutme'">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.aboutme}
{vb:raw blocks.contactinfo}
{vb:raw blocks.stats}
</div>
<div id="view-friends-content" class="<vb:if condition="$selected_tab == 'friends'">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.friends}
</div>
<div id="view-infractions-content" class="<vb:if condition="$selected_tab == 'infractions'">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.infractions}
</div>
<div id="view-reputation-content" class="<vb:if condition="$selected_tab == 'reputation'">selected_view_section<vb:else />view_section</vb:if>">
{vb:raw blocks.reputation}
</div>
{vb:raw template_hook.profile_tabs}
</div>
</div>
</div>
{vb:raw footer}
</body>
</html>
Search the file memberinfo_block_profilepicture, delete everything and write:
Code:
<vb:if condition="$prepared['profilepicurl']">
<img src="{vb:raw prepared.profilepicurl}" class="profileimg" />
</vb:if>
Download
No files for download.
Screenshots
