Tekil Mesaj gösterimi - vBulletin member profile v1 - farklı tasarım

Konu vBulletin member profile v1 - farklı tasarım

12-12-2009, 22:48:40

Sitemizde uyguladığımız tasarımı dağıtmaya karar verdik, aşağıda gerekli uygulamaları yaptığınız taktirde sizinde böyle profil alanınız olacaktır.

Tanıtım; (DEMO)
Sitenizdeki üye profilleri bulunan bölüme farklı tasarım uygulaması...

Yapılan değişiklikler;

Profil resmi 130x120 pixel ile sabit ölcütlendirilmiştir, ayrıca profil resmi bulunmayan kullanıcılara otomatik resim atanmıştır.
Profil resmi, üye nick, rank, durum, yaş ve rep bilgileri header bölümü oluşturularak header'e eklenmiştir.
Sidebar sola alınmıştır.
Sidebar'da bulunan; Arkadaşlar, Albümler ve Sosyal gruplar resimleri 70x70 pixel ile sabit ölcütlenmiştir, ayrıca bu resimlere efekt verilmiştir.
Profili ziyaret edenler kısmı "tab menüler"in altına alınmıştır.

Kurulumdan önce lütfen yedek alın...

Kurulum ve uygulama ;

* indirdiğiniz dosya içindeki resimleri FTP'ye atın..

* MEMBERINFO şablonunu komple alttaki kodla değiştirin;

$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
$headinclude

$usercss
$memberinfo_css
<style type="text/css" id="vbulletin_tabctrl_css">
@import url("clientscript/vbulletin_tabctrl.css?v=$vboptions[simpleversion]");
<if condition="$show['rtl']">@import url("clientscript/vbulletin_tabctrl_rtl.css?v=$vboptions[simpleversion]");</if>
</style>

<script type="text/javascript" src="clientscript/vbulletin_tabctrl.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript" src="clientscript/vbulletin_quick_edit_generic.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript" src="clientscript/vbulletin_quick_edit_visitormessage.js?v=$vboptions[simpleversion]"></script>

<title>$vboptions[bbtitle] - $vbphrase[view_profile]: $userinfo[username]</title>

<if condition="$userinfo['userid'] == $bbuserinfo['userid']">
<script type="text/javascript" src="clientscript/vbulletin_profilefield_edit.js?v=$vboptions[simpleversion]"></script>
</if>
<script type="text/javascript">
<!--
vbphrase['server_failed_respond_try_again'] = "$vbphrase[server_failed_respond_try_again]";
vbphrase['edit_value'] = "$vbphrase[edit_value_js]";

<if condition="$show['post_visitor_message']">
function goto_post_pm()
{
    vB_TabCtrls['profile_tabs'].switch_tab('visitor_messaging');
    fetch_object('visitor_messaging').scrollIntoView();

    var textarea = fetch_object('visitor_message_form_textarea');
    if (textarea)
    {
        textarea.focus();
        textarea.select();
    }
    return false;
}
</if>
-->
</script>


<script type="text/javascript">

window.google_analytics_uacct = "UA-7084705-1";


</script>
</head>
<body>

$header
$navbar


<!-- begin user css -->
<div id="usercss" class="floatcontainer">
<div id="$id" class="tborder content_block">
<div class="alt1 member_profile_niko_header">
<div class="member_profile_header_left_niko">
<table align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="member_profile_picture_niko">
<span>
<if condition="$prepared['profilepicurl']">
    <img src="$prepared[profilepicurl]" alt="<phrase 1="$prepared[username]">$vbphrase[xs_picture]</phrase>" width="130" height="120" />
<else />
    <img src="/images/avatars/nopicture.gif" width="130" height="120">
</if>
</span>
</div>
</td>
<td>
<table id="member_profile_info_niko" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><h1 class="myh1"><a href="$prepared[profileurl]">$prepared[musername]</a></h1></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">$prepared[rank]</td>
<td>&nbsp;</td>
<td align="center">$prepared[onlinestatus]</td>
<td>&nbsp;</td>
<if condition="$prepared['age']"><td style="color:#ffffff; font-size:18px; font-weight:bold;" align="center">$vbphrase[age] $prepared[age]</td></if>
</tr></table>
</td>
</tr>
</table>
</td></tr>
</table>
</div>
<div class="member_profile_header_right_niko">
<table class="member_profile_status_niko" align="right" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<if condition="$prepared['reputationdisplay']">
      <div id="reputation">$prepared[reputationdisplay]</div>
  </if>
</td>
</tr>
</table>
</div>
</div>
</div>
    <div id="content">
    <div id="profile_tab">
    <div id="profile_tabs">
        $template_hook[profile_left_first]
        $blocks[visitor_messaging]
        $blocks[aboutme]
        $blocks[stats]
        $blocks[friends]
        $blocks[infractions]
        $blocks[contactinfo]
        $template_hook[profile_left_last]
    </div>
    $blocks[visitors]

    <script type="text/javascript">
    <!--
    vBulletin.register_control("vB_TabCtrl", "profile_tabs", "$selected_tab", "&raquo;", "profile.php?u=2&do=loadtab&tabid={1:tabid}");
    //-->
    </script>
</div>
</div>

<div id="profil_sidebar">
    <!-- sidebar -->
    $template_hook[profile_right_first]
    $blocks[stats_mini]
    $template_hook[profile_right_mini]
    $blocks[friends_mini]
    $blocks[albums]
    $template_hook[profile_right_album]
    $blocks[groups]
    $template_hook[profile_right_last]
    <!-- / sidebar -->
</div>
<!-- end usercss -->
</div>
$footer

<div style="z-index:3" class="smallfont" align="center"><!-- google_ad_section_start(weight=ignore) --><!-- google_ad_section_end --></div><br /><div style="z-index:3" class="smallfont" align="center"><!-- google_ad_section_start(weight=ignore) -->Search Engine Friendly URLs by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.3.2<!-- google_ad_section_end --></div>

<script type="text/javascript"><!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//-->
</script>
<script type="text/javascript"><!--
try {
var pageTracker = _gat._getTracker("UA-7084705-1");
pageTracker._trackPageview();
} catch(err) {}
//-->
</script>
</body>
</html>

* memberinfo_albumbit şablonunu komple alttaki kodla değiştirin;

<li class="member_profile_niko">
<table align="center">
<tr><td>
    <if condition="$album['coverthumburl']">
        <a rel="nofollow" href="album.php?$session[sessionurl]albumid=$album[albumid]"><img src="$album[coverthumburl]" alt="$album[title_html]" style="height:70px; width:70px;" border="0" /></a>
</td></tr>
<tr><td>
    <div class="smallfont"><a rel="nofollow" href="album.php?$session[sessionurl]albumid=$album[albumid]">$album[title_html]</a></div>
    </if>
</td></tr>
</table>

<if condition="$show['moderated']">
 <img class="inlineimg" src="$stylevar[imgdir_misc]/moderated_small.gif" alt="<phrase 1="$album[moderatedcount]">$vbphrase[x_moderated_pictures]</phrase>" /></if>
</li>

* memberinfo_block_albums şablonunu komple alttaki kodla değiştirin;

<if condition="$block_data['albumbits']">
<div class="alt1 smallfont block_row">
    <ul class="list_no_decoration" id="friends_list">$block_data[albumbits]</ul>
</div>
    <div class="alt2 smallfont block_row block_footer" align="$stylevar[right]"><a rel="nofollow" href="album.php?$session[sessionurl]u=$userinfo[userid]">$vbphrase[show_all_albums]</a></div>
<else />
    <div class="alt1 smallfont block_row">$vbphrase[you_have_not_created_any_albums]</div>
    <div class="alt2 smallfont block_row block_footer" align="$stylevar[right]"><a rel="nofollow" href="album.php?$session[sessionurl]do=addalbum">$vbphrase[add_album]</a></div>
</if>

* memberinfo_block_groups şablonunu komple alttaki kodla değiştirin;

<if condition="$block_data['membergroupcount']">
    <div class="alt1 smallfont block_row">
    <span class="group_count">($block_data[membergroupcount])</span> $vbphrase[public_usergroups]:
    <ul class="list_no_decoration" id="friends_list">$block_data[membergroupbits]</ul>
    </div>
</if>
<if condition="$block_data['socialgroupcount']">
    <div class="alt1 smallfont block_row">
        <span class="group_count">($block_data[socialgroupcount])</span> $vbphrase[user_created_social_groups]:
        <ul class="list_no_decoration" id="friends_list">$block_data[socialgroupbits]</ul>
    </div>
</if>
<if condition="!$block_data['membergroupcount'] AND !$block_data['socialgroupcount']">
    <div class="alt1 smallfont block_row">$vbphrase[you_not_member_any_groups]</div>
</if>
<if condition="$block_data['show_join_link']">
    <div class="alt2 smallfont block_row block_footer"><a href="group.php$session[sessionurl_q]">$vbphrase[join_social_groups]</a></div>
</if>

* memberinfo_block_profilepicture şablonunu komple alttaki kodla değiştirin;

<img src="$prepared[profilepicurl]" $prepared[profilepicsize] alt="<phrase 1="$prepared[username]">$vbphrase[xs_picture]</phrase>" style="width:120px; height:120px;" />

* memberinfo_socialgroupbit şablonunu komple alttaki kodla değiştirin;

<li class="member_profile_niko">
<table align="center">
<tr><td>
    <a rel="nofollow" href="group.php?$session[sessionurl]groupid=$socialgroup[groupid]"><img src="$socialgroup[iconurl]" alt="$socialgroup[shortdescription]" style="height:70px; width:70px;" border="0" /></a>
</td></tr>
<tr><td>
        <div class="smallfont"><a rel="nofollow" href="group.php?$session[sessionurl]groupid=$socialgroup[groupid]">$socialgroup[name]</a></div>
</td></tr>
</table>
</li>

* memberinfo_tiny şablonunu komple alttaki kodla değiştirin;

<li class="memberinfo_tiny member_profile_niko">
<table align="center">
<tr><td>
<if condition="$user['avatarurl']">
    <a rel="nofollow" href="member.php?$session[sessionurl]u=$user[userid]"><img src="$user[avatarurl]" alt="$user[username]" border="0" style="width:70px; height:70px;" /></a>
</if>
</td></tr>
<tr><td>
    <div class="smallfont" title="$user[username]"><a rel="nofollow" href="member.php?$session[sessionurl]u=$user[userid]">$user[musername]</a></div>
</td></tr>
</table>
</li>

* memberinfo_css şablonunu komple alttaki kodla değiştirin;

<style type="text/css" id="memberinfo_css">
<!--
#profile_niko {
    width:100%;
}
#profile_tab {
    width:100%;
    float:$stylevar[right];
    margin-$stylevar[left]:-256px;
}
#profil_sidebar {
    width:250px;
    float:$stylevar[left];
}
#content {
    margin-$stylevar[left]:256px;
}
#profile_footer_niko {
    width:100%;
}
.list_no_decoration {
    list-style-type:none;
    margin:0px;
    padding:0px;
}

div.fixed_width_avatar {
    text-align:center;
    width:60px;
}

/***** Memberinfo Small ******/
li.memberinfo_small {
    margin-top:6px;
}
li.memberinfo_small div.fixed_width_avatar {
    margin-$stylevar[right]:6px;
}
li.memberinfo_small div.info_bar, #friends li.memberinfo_small div.info_bar {
    border-width:1px 0px 0px 0px;
    margin-bottom:6px;
}
li.memberinfo_small div.info_bar ul {
    padding:6px;
}
li.memberinfo_small ul.friend_im_list li {
    display:inline;
    margin-$stylevar[right]:3px;
}
li.memberinfo_small ul.friend_im_list img {
    vertical-align:middle;
}

/***** Memberinfo Tiny *****/
li.memberinfo_tiny {
    height:105px;
    width:75px;
    overflow:hidden;
    float:$stylevar[left];
    text-align:center;
    margin:1px;
}

/***** Tabs and Blocks *****/
.content_block {
    margin-bottom:6px;
    padding:$stylevar[cellspacing]px;
}
.content_block .block_row {
    padding:$stylevar[cellpadding]px;
    margin:$stylevar[cellspacing]px 0px 0px 0px;
}
.content_block .block_title {
    padding:$stylevar[cellpadding]px;
    margin:0px 0px 0px 0px;
}
/*.content_block h4.thead, .content_block .block_title {
    padding:4px;
    margin:$stylevar[cellspacing]px 0px 0px 0px;
}*/
.content_block .block_footer {
    text-align:$stylevar[right];
    padding:4px;
    margin:$stylevar[cellspacing]px 0px 0px 0px;
}
a.collapse_gadget {
    float:$stylevar[right];
}

/***** Popup Menus Built With List Markup ******/
ul.vbmenu_popup li {
    padding:4px;
    margin:0px 1px 1px 1px;
    white-space:nowrap;
}
ul.vbmenu_popup li.first {
    margin:1px;
}
ul.vbmenu_popup li.notext {
    font-size:1px;
}

/***** Override Menu CSS for 'Send Message' Menu ******/
#minicontact_menu li.vbmenu_option, #minicontact_menu li.vbmenu_hilite {
    padding:0px;
    padding-$stylevar[right]:4px;
}
#minicontact_menu li.vbmenu_option img, #minicontact_menu li.vbmenu_hilite img {
    padding:4px;
}

/***** Profile Field List Title / Value Pairs *****/
dl.profilefield_list dd {
    margin-bottom:3px;
    margin-$stylevar[left]:16px;
}

/***** Sidebar profile field blocks *****/
#sidebar_container dl.profilefield_list {
    font-size:11px;
}

/***** Top Panel *****/
#main_userinfo {
    margin-bottom:20px;
}
#main_userinfo #profilepic_cell {
     border-bottom-width:0px;
     padding:4px;
}
#main_userinfo .profilepic_adjacent {
    padding-$stylevar[left]:6px;
}
#main_userinfo h1 {
    font-size:18pt;
    font-weight:normal;
    margin:0px;
}
#main_userinfo h2 {
    font-size:10pt;
    font-weight:normal;
    margin:0px;
}
#reputation_rank {
    float:$stylevar[right];
}
#reputation {
    margin-bottom:6px;
}
#rank {
    margin-bottom:0px;
}
#send_message_cell {
    padding-bottom:6px;
    text-align:$stylevar[right];
}
#link_bar ul {
    padding:4px;
}
#link_bar li.thead {
    float:$stylevar[left];
    margin-$stylevar[right]:10px;
    white-space:nowrap;
    font-weight:normal;
    background:transparent;
}
#link_bar a {
    text-decoration:none;
}
#link_bar a:hover {
    text-decoration:underline;
}
#activity_info {
    border-top-width:0px;
}
#activity_info div.alt2 {
    padding:4px;
}
#link_bar #usercss_switch_link {
    float:$stylevar[right];
    margin-$stylevar[left]:3px;
    margin-$stylevar[right]:0px;
}

/***** Visitor Messaging Tab *****/

#qc_error_div {
    text-align:$stylevar[left];
    margin-bottom:6px;
}
#qc_error_header {
    font-weight:bold;
}
#qc_error_okay {
    text-align:$stylevar[right];
}

#message_form {
    display:block;
    margin:0px;
}
#message_form textarea {
    width:98%;
    height:50px;
}
#message_form div.messagetext {
    text-align:$stylevar[left];
}
#message_form div.allowed_bbcode {
    float:$stylevar[left];
}
#message_form div.submit_button {
    text-align:$stylevar[right];
}

#visitor_messaging #inlinemodsel {
    float:$stylevar[right];
}

#visitor_messaging #view_my_conversation_link {
    float:$stylevar[right];
    text-decoration:none;
}

#visitor_message_inlinemod_form {
    margin:0px;
    display:block;
}

#message_list {
    border:none;
}
#message_list li {
    margin-bottom:6px;
}
#message_list div.fixed_width_avatar {
    margin-$stylevar[right]:6px;
    float:$stylevar[left];
}
#message_list div.visitor_message_avatar_margin {
    margin-$stylevar[left]:66px;
}
#message_list div.info_bar {
    border-width:1px 0px 0px 0px;
    margin-bottom:6px;
}
#message_list div.info_bar div.alt2 {
    padding:6px;
}
#message_list div.info_bar a.username {
    /*font-weight:bold;*/
}
#message_list .visitor_message_date {
    float:$stylevar[right];
}
#message_list .group_message_date {
    float:$stylevar[right];
}
#message_list .inlinemod_checkbox {
    float:$stylevar[right];
}
#message_list div.visitor_message_body {
    overflow:auto;
}
#message_list ul.controls {
    margin-top:6px;
    text-align:$stylevar[right];
}
#message_list ul.controls li {
    display:inline;
    margin-$stylevar[left]:6px;
}
#message_list ul.controls a:link, #message_list ul.controls a:visited {
    text-decoration:none;
}
#message_list .deletedmessage{
    float: $stylevar[left]
}

/***** About Me Tab *****/
#aboutme li.profilefield_category {
    font-weight:bold;
    margin-top:6px;
}
#aboutme dl.profilefield_list {
    font-weight:normal;
    margin:6px 16px 0px 16px;
}
#aboutme dl.profilefield_list dd {
    margin-bottom:6px;
    margin-$stylevar[left]:0px;
}
#aboutme #signature {
    width:100%;
    overflow:auto;
}
#aboutme #simple_aboutme_link {
    text-align: $stylevar[right];
    display: block;
}

/***** About Me Tab (Alternative) *****/
#aboutme2 dl.profilefield_list dd {
    margin-bottom:6px;
    margin-$stylevar[left]:0px;
}

/***** Statistics Tab *****/
#stats fieldset.statistics_group {
    margin-top:6px;
}
#stats fieldset.statistics_group ul {
    padding:6px;
}
#stats fieldset.statistics_group ul li {
    margin-bottom:3px;
}

/***** Statistics Tab (Alternative) *****/
#statistics2 ul.statistics_group li {
    margin-bottom:3px;
}

/***** Friends Tab *****/
#friends a.edit_friends_link {
    float:$stylevar[right];
}
#friends_mini a.edit_friends_link {
    float:<if condition="$prepared['friendcount']">$stylevar[left]<else />$stylevar[right]</if>;
    <if condition="$prepared['friendcount']">margin-$stylevar[right]<else />margin-$stylevar[left]</if>:10px;
}

/***** Infractions Tab *****/
div#infractions.content_block {
    padding:0px;
}

/***** Contact Info Tab *****/
#contactinfo fieldset {
    margin-bottom:6px;
}
#contactinfo div.fieldset_padding {
    padding:6px;
}
#contactinfo #messaging_list li {
    margin-bottom:3px;
    margin-$stylevar[right]:16px;
    float:$stylevar[left];
    white-space:nowrap;
}
#contactinfo #instant_messaging_list li {
    margin-top:6px;
    margin-$stylevar[right]:6px;
    position:relative;
}
#contactinfo #instant_messaging_list .im_img_link {
    vertical-align: middle;
}
#contactinfo #instant_messaging_list .im_txt_link {
    position:absolute;
    $stylevar[left]:75px;
}
#contactinfo #additional_contact_details dd {
    margin-$stylevar[left]:0px;
    margin-bottom:6px;
}

/***** Albums Block *****/
#ul.albums_mini_list {
    margin:6px 0px 0px 6px;
}
#albums_mini_list li {
    text-align:center;
    margin-$stylevar[right]:3px;
}
#albums_mini_list img {
    vertical-align:middle;
}

/***** Mini Friends Block *****/
#friends_mini_list a.username {
    display:block;
    margin-top:3px;
}
#friends_mini div.friends_counter {
    padding-bottom:6px;
}

/***** Groups Block *****/
span.group_count {
    float:$stylevar[right];
}
ul.group_list {
    margin:5px 10px 5px 10px;
}
ul.group_list li {
    display:block;
    margin-$stylevar[right]:3px;
}


/***** Traffic Block *****/
ol.last_visitors_list {
    margin:0px;
    margin-top:6px;
}
ol.last_visitors_list li {
    display:inline;
    margin-$stylevar[right]:3px;
}
ol.last_visitors_list img {
    vertical-align:middle;
}

.member_profile_niko_header {
    height:160px;
    margin:$stylevar[cellspacing]px 0px 0px 0px;
 }
.member_profile_header_right_niko {
    float:right;
}
.member_profile_left_right_niko {
    float:left;
}

.member_profile_picture_niko{
    float:left;
    padding-left:20px;
    }

.member_profile_picture_niko img{
    border:2px solid #ffffff;
    margin:10px 0 10px 0;
    }

.member_profile_status_niko {
    background: url(../images/misc/member_info.png) repeat-x;
    width:300px;
    height:25px;
    margin:0 10px 0 0;
}
#member_profile_info_niko {
    margin:20px 10px 0 10px;
    float:right;
    border:0;
}
.status_text_niko{
    color:#ffffff;
}
.rank_space_niko{
    margin:0 0 0 10px;
}

li.member_profile_niko{
    width:90px;
    overflow:hidden;
    float:$stylevar[left];
    text-align:center;
    margin:5px 5px 5px 5px;
    }
li.member_profile_niko a{
    text-decoration:none;
    }
li.member_profile_niko:hover{
    text-color:#ffffff;
    text-align:center;
    }

li.member_profile_niko img{
    border:2px solid #F0F0F0;
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity:0.7;
    -khtml-opacity:0.7;
}
li.member_profile_niko:hover img{
    border:2px solid #000000;
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
    -khtml-opacity:1.0;
}

$template_hook[memberinfo_css]
-->
</style>

işlem bu kadar...

Bu tasarımı herkez kullanabilir fakat sizden isteğim kendiniz yapmış gibi dağıtmayın, Başka sitelerde dağıtırken lütfen yapımcı adını belirtin...

dosya link : indir