Nikolas*
Умник
1. Перейдите в Admin CP -> Look & Feel -> Select Template -> Board Index -> boardIndexTemplate и найти :
2. Поместите этот код перед ним:
(Замените ваши ссылки и текст)
3. Сохранить.
4. Перейти Admin -> CPLook & Feel -> Manage Skin Sets & Templates -> Manage Templates in -> Select Template -> и нажмите кнопку Добавить CSS-файла.
5. Назовите его portfoliocard.
6. Поместите следующий код в нем:
7. Сохранить.
Я искренне надеюсь, урок вам понравился :dr:
вот что у меня вышло:
HTML:
<foreach loop="side_blocks:$side_blocks as $block">
{$block}
</foreach>
HTML:
<div class='ipsSideBlock'><div class='_sbcollapsable'>
<div class="portfoliocard">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="coverphoto ">
<div class="customBackground"></div>
<PHP>
$this->memberData['customization'] = @unserialize($this->memberData['pp_customization']);
</PHP>
<style type="text/css">
<if test="hasBodyCustomization:|:$this->memberData['customization']['bg_color'] OR $this->memberData['customization']['_bgUrl']">
.customBackground{
<if test="hasBackgroundColor:|:$this->memberData['customization']['bg_color']">
background-color: #{$this->memberData['customization']['bg_color']} !important;
</if>
<if test="hasBackgroundImage:|:$this->memberData['customization']['bg_url']">
background-image: url("{$this->settings['upload_url']}/{$this->memberData['customization']['bg_url']}?nc={$this->memberData['pp_profile_update']}") !important;
<if test="backgroundIsFixed:|:! $this->memberData['customization']['bg_tile']">
background-position: 50% 50%;
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: cover;
<else />
background-position: 50% 50%;
background-repeat: repeat;
</if>
</if>
height: 130px;
left: -25px;
margin-bottom: -10px;
top: -10px;
width: 360px !important;
position: relative;
}
</if>
</style>
</div>
<div class="profile_picture">
<img src='{$this->memberData['pp_small_photo']}' alt="{parse expression="sprintf($this->lang->words['users_photo'],$this->memberData['members_display_name'])"}" class='ipsUserPhoto1 ipsUserPhoto_mediumbg' style="width: 110px; height: 110px;
margin: -5px 5px 5px -5px;border-radius: 100%;" /></div>
<div class="left_col">
<div class="followers">
<div class="follow_count">
<a style="padding: 0 5px;" href="{$this->settings['board_url']}/index.php?/user/{$this->memberData['member_id']}-{$this->memberData['members_seo_name']}/?tab=reputation">
<if test="$this->memberData['pp_reputation_points'] > 0">
<span id='user_reputation' class="reputationbg positive" title='Репутация'>{$this->memberData['pp_reputation_points']}</span>
</if>
<if test="$this->memberData['pp_reputation_points'] < 0">
<span id='user_reputation' class="reputationbg negative" title='Репутация'>{$this->memberData['pp_reputation_points']}</span>
</if>
<if test="$this->memberData['pp_reputation_points'] == 0">
<span id='user_reputation' class="reputationbg zero" title='Репутация'>{$this->memberData['pp_reputation_points']}</span>
</if>
</a></div>Репутация
</div>
<div class="following">
<div class="follow_count"><a href="ваша ссылка" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></div>
</div>
<div class="following">
<div class="follow_count"><a href="ваша ссылка" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></div>
</div>
</div>
<div class="right_col">
<h2 class="name">{$this->memberData['members_display_name']}</h2>
<h4 class="locationbg">{$this->memberData['prefix']}{$this->memberData['g_title']}{$this->memberData['suffix']}</h4>
<ul class="contact_information">
<li class="work"><a href='{parse url="showuser={$this->memberData['member_id']}" seotitle="{$this->memberData['members_seo_name']}" template="showuser" base="public"}' title='{$this->lang->words['your_profile']}'><i class="fa fa-suitcase"></i> {$this->lang->words['my_profile']}</a></li>
<li class="website"><a href="{parse url="app=core&module=usercp" base="public"}" title="{$this->lang->words['cp_tool_tip']}"><i class="fa fa-cog"></i> {$this->lang->words['your_cp']}</a></li>
<li class="mail"><a href="{parse url="app=core&module=search&do=user_activity&mid={$this->memberData['member_id']}" base="public"}" title="{$this->lang->words['my_content_link']}"><i class="fa fa-folder-open"></i> {$this->lang->words['my_content_link']}</a></li>
<li class="phone"><a href='{parse url="app=members&module=profile§ion=friends&do=list" base="public"}' title="{$this->lang->words['manage_friends']}" class='manage_friends'><i class="fa fa-users"></i> {$this->lang->words['manage_friends']}</a></li>
<li class="resume"><a href='{parse url="app=core&module=search&do=followed" base="public"}' title='{$this->lang->words['your_likes']}'><i class="fa fa-comments"></i> {$this->lang->words['your_likes']}</a></li>
<li class="resume"><a href='{parse url="app=core&module=usercp&tab=core&area=ignoredusers" base="public"}' title="{$this->lang->words['manage_ignored_users']}" class='manage_enemies'><i class="fa fa-minus-circle"> </i>{$this->lang->words['manage_ignored_users']}</a></li>
<li class="resumebg" style="font-size: 14px; font-variant: small-caps; text-shadow: rgba(0,0,0,0.85) 0px 1px 4px;"><a href='pawno-info.ru'>By Nikolas*</a></li>
</ul></div></div></div></div>3. Сохранить.
4. Перейти Admin -> CPLook & Feel -> Manage Skin Sets & Templates -> Manage Templates in -> Select Template -> и нажмите кнопку Добавить CSS-файла.
5. Назовите его portfoliocard.
6. Поместите следующий код в нем:
HTML:
a.nostyle{
color:inherit;
text-decoration:none;
padding:0;
margin:0;
}
div.portfoliocard{
position: relative;
height: 450px;
width: 250px;
background: #CDCDCD;
border: 1px solid rgba(0,0,0,0.7);
box-shadow: 0px -1px 3px rgba(0,0,0,0.1), 0px 2px 6px rgba(0,0,0,0.5);
border-radius: 6px;
overflow: hidden;
z-index: 100;
}
div.portfoliocard div.coverphoto{
width:100%;
height:120px;
background: #283A4A;
background-position:center center;
border-top-right-radius:5px;
border-top-left-radius:5px;
border-bottom:1px solid rgba(0,0,0,0.1);
box-shadow:inset 0px 3px 20px rgba(255,255,255,0.3),
1px 0px 2px rgba(255,255,255,0.7);
z-index:99;
}
div.portfoliocard div.left_col, div.portfoliocard div.right_col{
float:left;
height:340px;
}
div.portfoliocard div.left_col{
width:39%;
padding-top:75px;
box-sizing:border-box;
}
div.portfoliocard div.right_col{
width:60%;
}
div.portfoliocard div.profile_picture{
width:100px;
height:100px;
background:rgba(255,255,255,1);
position:absolute;
top:65px;
left:5px;
border-radius:100%;
background-size:100% 100%;
padding:7px;
border:4px solid rgba(255,255,255,1)
}
div.portfoliocard div.right_col h2.name{
font-size: 22px;
font-weight: 100;
color: #fafafa;
padding: 0;
text-align: center;
margin: 15px 10px 0px 30px;
}
div.portfoliocard div.right_col h4.locationbg{
font-size: 15px;
font-weight: 300;
color: rgba(170,170,170,1);
padding: 0;
text-align: center;
margin: 8px 10px 10px 30px;
}
div.portfoliocard ul.contact_information{
margin-top:20px;
list-style-type:none;
}
div.portfoliocard ul.contact_information li{
height: 25px;
width: 180px;
line-height: 25px;
font-weight: 300;
font-size: 15px;
color: rgba(140,140,140,1);
padding: 5px 0px;
background-repeat: no-repeat;
background-size: 18px 18px;
cursor: default;
}
div.portfoliocard ul.contact_information li:before{
content:"";
width:15px;
height:25px;
display:block;
float:left;
background-position:center;
background-size:18px 18px;
background-repeat:no-repeat;
margin-right:5px;
opacity:0.7;
}
div.portfoliocard ul.contact_information li:hover:before{
opacity:1;
}
div.portfoliocard div.followers, div.portfoliocard div.following{
margin:15px 0px 0px 20px;
font-weight:300;
font-size:16px;
color:#fafafa;
}
div.portfoliocard div.follow_count{
font-weight:400;
font-size:25px;
color:rgba(140,140,140,1);
}Я искренне надеюсь, урок вам понравился :dr:
вот что у меня вышло: