Персональная страница сайта htmlCOPY.RU

Персональная страница сайта htmlCOPY.RU
Описание
Специально для Вас, дорогие пользователи, выкладываем персональную страницу htmlCOPY.RU. Довольно таки креативная и в тоже время просто персоналка, нет ничего лишнего, всё по фен-шую. Хорошо подойдёт для светлых дизайнов. Полноценная и работоспособная персональная страница!

Приступим к установке!
1. В таблицу стилей CSS в самый низ прописываем стили:
Код
/*== PROFILE PAGE ==*/
.profile-top {width: 100%; height: 250px; position: relative;}
.profile-top .shadow {background: rgba(40, 40, 40, 0.8); width: 100%; height: 250px; position: absolute; top: 0; right: 0;}
.profile-top .inbox {width: 968px; margin-left: -500px; padding: 38px 16px; position: absolute; top: 0; left: 50%;}
.profile-top .avatar img {width: 150px; height: 150px; float: left;}
.profile-top .title {margin: 0 0 20px 40px; font: 12px 'Gotham Pro Medium'; color: #a9a9a9; font-weight: bold;}
.profile-top ul.contacts {margin-left: 40px; color: #a9a9a9;}
.profile-top ul.contacts li {border-bottom: 1px solid rgba(255, 255, 255, 0.05); line-height: 36px; overflow: hidden;}
.profile-top ul.contacts li:last-child {border: 0 none;}
.profile-top ul.contacts li div {width: 180px; float: left;}
.profile-top .status {height: 40px; line-height: 21px; font-size: 7pt; color: #c84e4e; text-align: right;}
.profile-top .activity {margin-left: 8px;}
.profile-top .activity a {display: block; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 2px; width: 100px; height: 55px; margin-left: 8px; color: #a9a9a9; text-align: center; text-decoration: none; float: left;}
.profile-top .activity a:hover {border: 1px solid rgba(255, 255, 255, 0.2); color: #d5d5d5;}
.profile-top .activity div {margin-top: 11px; font-size: 12pt; font-weight: bold;}
.profile-top a.send-message {display: block; background: #8db664; border-radius: 32px; width: 120px; line-height: 30px; margin: 0 0 23px 108px; color: #fff; text-decoration: none; text-align: center;}
.profile-top .no-send-message {width: 120px; height: 30px; margin: 0 0 23px 0;}

.profile-title {border-radius: 2px 2px 0 0; width: 1000px; margin-left: -500px; position: absolute; top: -24px; left: 50%;}
.profile-title .left {background: #fff; width: 690px; border-bottom: 1px solid #e7e7e7; border-radius: 2px 0 0 0; padding-left: 22px;}
.profile-title .name {font: 9.5pt/46px 'Gotham Pro Medium'; float: left;}
.profile-title .right {background: #f7f7f7; border-radius: 0 2px 0 0; width: 285px;}
.profile-title .right div {background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); padding-left: 22px; font: 9.5pt/46px 'Gotham Pro Medium';}

.profile-moder {float: right; position: relative;}
.profile-moder a {display: block; background: url('/images/profile-moder-icon.png') no-repeat 5px 5px; border: 1px solid #e7e7e7; border-radius: 50%; width: 28px; height: 28px; margin: 8px 22px 0 0;}
.profile-moder a:hover {background: url('/images/profile-moder-icon.png') no-repeat 5px 5px #f3f3f3;}
.profile-moder a:active, .profile-moder a.active {background: url('/images/profile-moder-icon.png') no-repeat 5px 5px #f3f3f3; box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.03);}
.profile-moder .sub {display: none; background: #fff; width: auto; padding: 15px; position: absolute; top: 52px; right: 23px; z-index: 1;}
.profile-moder .sub a {display: inline; background: transparent; border: 0 none border-radius: 0; width: auto; height: auto; margin: 0;}
.profile-moder .sub select {display: block; margin-bottom: 10px;}

.activation-mail {background: url('/images/bg-pic-1.png'); border-bottom: 1px solid #e7e7e7; margin: 23px -15px -20px; padding: 10px 22px 12px;}
.activation-mail ul {width: 500px; float: left;}
.activation-mail ul li {font-size: 7pt; color: #949494;}
.activation-mail ul li:first-child {margin-bottom: 8px; font: 9.5pt 'Gotham Pro Medium'; color: #000; font-weight: bold;}
.activation-mail a {display: block; background: #94c886; border-radius: 32px; line-height: 30px; margin-top: 16px; padding: 0 16px; color: #fff; text-decoration: none; float: right;}
.activation-mail a:hover {background: #8cbf7f;}
.activation-mail a:active {box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.03);}

ul.profile-list {margin: 23px 7px 0px 7px;}
ul.profile-list li {border-bottom: 1px solid #e7e7e7; line-height: 42px; padding: 0; overflow: hidden;}
ul.profile-list li:last-child {border: 0 none;}
ul.profile-list li div {width: 280px; float: left;}
ul.profile-list li span {font-size: 7pt; color: #949494;}

.reputation {margin: 37px 22px 15px 22px;}
.reputation .negative {background: #fff; border: 1px solid #ededed; width: 166px; line-height: 25px; margin-left: 8px; text-align: center;}
.reputation .number {background: #fff; border: 1px solid #ededed; width: 166px; line-height: 25px; margin-left: 8px; text-align: center;}
.reputation a.edit {display: block; width: 17px; line-height: 17px; margin-top: 5px; font-size: 10pt; color: #fff; text-align: center; text-decoration: none;}
.reputation a.edit.left {background: #c84e4e;}
.reputation a.edit.right {background: #8db664;}

.activity-load {max-height: 251px;}
.activity-load#matactive-get #matactive {display: block!important;}
.activity-load .author-short {border-bottom: 1px solid #e7e7e7; padding: 12px 22px; color: #949494;}
.activity-load .author-short:nth-of-type(4) {border: 0 none;}
.activity-load .author-short ul li {line-height: 19px;}
.activity-load .author-short ul li a {font: 9pt 'Gotham Pro Medium'; font-weight: bold;}
.activity-load .author-short ul li:last-child {font-size: 7pt; color: #949494;}
.activity-load .author-short ul li:last-child span {margin-right: 20px;}
.activity-load .author-short ul li:last-child span:nth-of-type(2) {margin: 0;}
/* ======= */


2. Заходим в Персональная страница пользователя и прописываем код перед </head>
Код
<link rel="StyleSheet" href="/styles/fonts.css">
<link rel="StyleSheet" href="/styles/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>  
<script src="/scripts/htmlcopy.js"></script>
<style>
html {background: #f0f0f0;}
.box {background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); margin-bottom: 15px;}
.box .title {border-bottom: 1px solid #e7e7e7; padding-left: 22px; font: 9.5pt/46px 'Open Sans'; font-weight: bold;}
.box .content {overflow: hidden;}
.box-title-two {background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); margin-bottom: 15px; padding-left: 22px; font: 9.5pt/46px 'Open Sans'; font-weight: bold;}
</style>


3. Заходим в Персональная страница пользователя и вставляем между <-- < body > --> и <-- < /body > --> этот код:
Код
<div class="profile-top" style="background: url('<?if($_YAHOO$)?>$_YAHOO$<?else?>/images/profile-cover.png<?endif?>') no-repeat top center; background-size: cover;">
<div class="shadow"></div>
<div class="shadow"></div>
<div class="inbox hidden">
<div class="avatar br-50 left hidden"><span class="user_avatar"><?if($_AVATAR$)?>$_AVATAR$<?else?><img src="/images/no-avatar-6.png" /><?endif?></span></div>
<div class="left">
<div class="title">Персональная страница пользователя – $_USERNAME$</div>
<ul class="contacts left">
<li><div>Skype:</div><?if($_MSN$)?>$_MSN$<?else?>Не указан<?endif?></li>
<li><div>ВКонтакте:</div><?if($_YAHOO$)?>$_YAHOO$<?else?>Не указан<?endif?></li>
<li><div>Сайт:</div><?if($_WWW$)?>$_WWW$<?else?>Не указан<?endif?></li></ul> </div>
<div class="right">
<div class="status"><?if(strpos($_STATUS$,'Offline')!=-1)?> <?if(!$_IS_OWN_PROFILE$)?>Был на сайте <?if($_GENDER_ID$="2")?>а <?endif?><?if($DATE$=substr($_LOG_TIME$,strpos($_LOG_TIME$,', ')+2,strpos(substr($_LOG_TIME$,strpos($_LOG_TIME$,', ')+2),', ')))?>сегодня<?else?><?if((substr($_LOG_TIME$,strpos($_LOG_TIME$,', ')+2,2)=($DAY$-1)) && (substr(substr($_LOG_TIME$,strpos($_LOG_TIME$,', ')+2,strpos(substr($_LOG_TIME$,strpos($_LOG_TIME$,', ')+2),', ')),3)=substr($DATE$,3)))?>вчера<?else?><?substr(substr($_LOG_TIME$,strpos($_LOG_TIME$,', ')+2,strpos(substr($_LOG_TIME$,strpos($_LOG_TIME$,', ')+2),', ')),0,-5)?><?endif?><?endif?> в <?substr($_LOG_TIME$,strrpos($_LOG_TIME$,', ')+2)?><?endif?><?else?><span style="color: #4ec856;">Сейчас на сайте</span><?endif?></div>
<div class="no-send-message"><?if($_PM_SEND_URL$)?><a href="$_PM_SEND_URL$" class="send-message">Отправить ЛС</a><?endif?></div>
<div class="activity hidden">
<a href="$_COM_ACTIVITY_URL$"><div>$_COM_ENTRIES$</div>комментар<?if($_COM_ENTRIES$%10=0||$_COM_ENTRIES$%10>4||$_COM_ENTRIES$%100>10&&$_COM_ENTRIES$%100<15)?>ий<?else?><?if($_COM_ENTRIES$%10=1)?>ий<?else?>ия<?endif?><?endif?></a>
<a href="$_LOAD_ACTIVITY_URL$"><div>$_LOAD_ENTRIES$</div>материал<?if($_LOAD_ENTRIES$%10=0||$_LOAD_ENTRIES$%10>4||$_LOAD_ENTRIES$%100>10&&$_LOAD_ENTRIES$%100<15)?>ов<?else?><?if($_LOAD_ENTRIES$%10=1)?><?else?>а<?endif?><?endif?></a> </div> </div> </div></div>
</header>

<div class="br-2" id="middle" style="position: relative;">
<!-- <middle> -->
<div class="profile-title">
<div class="left">
<div class="name">Подробная информация</div> </div>
<div class="right"><div>Репутация пользователя</div></div> </div>
<div id="content">
<!-- <body> -->
<?if($_EMAIL_VERIFICATION_URL$)?>
<div class="activation-mail hidden">
<ul>
<li>Внимание! Вы всё ещё не подтвердили свой почтовый адрес.</li>
<li>1. Проверьте свою почту на наличие соответствующего письма.</li>
<li>2. Запросите повторную отправку сообщения с подтверждением.</li>
</ul>
<a href="$_EMAIL_VERIFICATION_URL$">Отправить заново</a> </div>
<?endif?>
<ul class="profile-list">
<li><div>Группа:</div> $_GROUP_NAME$</li>
<?if($_NAME$)?><li><div>Полное имя:</div>$_NAME$</li><?endif?>
<?if($_GENDER_NAME$)?><li><div>Пол:</div>$_GENDER_NAME$</li><?endif?>
<?if($_REG_TIME$)?><li><div>Дата регистрации:</div>$_REG_TIME$</li><?endif?>
<li><div>Дата рождения:</div><?if($_BIRTHDAY$)?>$_BIRTHDAY$<?else?>Не указано<?endif?></li>
<li><div>Возраст:</div><?if($_AGE$)?>$_AGE$<?else?>Не указано<?endif?></li>
<li><div>Знак зодиака:</div><?if($_ZODIAC$)?>$_ZODIAC$<?else?>Не указано<?endif?></li>
<li><div>E-mail:</div><?if($_IS_OWN_PROFILE$)?><div>$_EMAIL$</div><?if($_EMAIL_IS_HIDDEN$)?><span style="font-size:7pt">(Адрес скрыт)</span><?endif?><?else?><?if($MODER_PANEL$)?><a href="mailto:$_EMAIL$"><div>$_EMAIL$</div></a> <?if($_EMAIL_IS_HIDDEN$)?><span style="font-size:7pt">(Адрес скрыт)</span><?endif?><?else?><?if($_SEND_EMAIL_URL$)?><a href="$_SEND_EMAIL_URL$">Написать письмо пользователю</a><?else?><div>$_EMAIL$</div><?endif?><?endif?><?endif?></li>
<?if($_COUNTRY$)?><li><div><?if($_UID$)?>Место проживания<?else?>Страна<?endif?>:</div>$_COUNTRY$</li><?endif?>
<?if($_SIGNATURE$)?><li><div>Подпись:</div>$_SIGNATURE$</li><?endif?>
</ul>
<!-- </body> -->
</div>
   
<div id="sidebar">
<div class="reputation hidden">
<?if($_REP_DO_URL$)?><a href="$_REP_DO_URL$" class="edit br-2 left">-</a><?else?><a href="javascript://" class="edit br-2 left">-</a><?endif?>
<div class="number br-2 left"><a href="$_REP_READ_URL$"><b>$_REPUTATION$</b></a></div>
<?if($_REP_DO_URL$)?><a href="$_REP_DO_URL$" class="edit br-2 right">+</a><?else?><a href="javascript://" class="edit br-2 right">+</a><?endif?></div>

<div class="box br-2 hidden">
<div class="title">Активность пользователя</div>
<div class="content"><?if($_LOAD_ENTRIES$)?><div class="activity-load hidden" id="matactive-get"></div><?else?><div class="hint">$_USERNAME$ ещё не проявлял активности</div><?endif?> </div></div> </div>
<div class="clear"></div>
<!-- </middle> --></div>

<div style="position: absolute; left: -9999999px;">
<div class="br-50 hidden" id="avatar"><?if($_AVATAR$)?><img src="<?substr($_AVATAR$,54,-65)?>" /><?else?><img src="/new-images/no-avatar-6.png" /><?endif?></div>
<div id="group">Активный</div>  
<div id="activity">
<div class="title">Активность автора</div>
<ul>
<li class="hidden"><div class="left">Материалы</div><div class="right">$_LOAD_ENTRIES$</div></li>
<li class="hidden"><div class="left">Комментарии</div><div class="right">$_COM_ENTRIES$</div></li>
</ul>
</div>
</div>


4. Далее настраиваем модуль Пользователи


5. Скачиваем архив и заливаем в корень своего сайта.
6. Установка завершена!

Автор материала:
Логин на сайте:
Группа:
Дата входа:
О материале:
Дата добавления: 10.01.2016 в 13:37
Материал просмотрен: 826 раз
Оставлены: 0 комментария
Рейтинг материала По мнению пользователей
3.0
Поделиться
Комментарии
0 комментариев
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Онлайн никого нет

Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0