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> </td>
<td align="center">$prepared[onlinestatus]</td>
<td> </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", "»", "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
şu an v2 hazır ama ilgi pek olmadığından yayınlamıyorum 