» »

Страница пользователя uCoz оригинальный стиль


Страница пользователя uCoz оригинальный стиль

Эту персональную страницу, можно смело сказать, что она оригинальная во всем и своих функциях. Она была грамотно адаптированная под систему uCoz сайта и теперь можно ее установить. Минусы и плюсы, но только что нужно ее под настроить в стилях под свой сайт, но это обычно так делают. Также с ней идет много файлов и папок, которые нужно забросить в папку personal которую создаем в файловом менеджере.

Так можно с ней поработать и убрать что то лишнее, но это уже вам решать. Вот как пример, не будем выводить комментарий, которые идут с ней, а можно поставить это разрешение, но здесь кому как будет. Сама она будет открываться в своей новой странице, что отлично, и все по функциям понятно по ней. Можно установить свой фон, а также где изображение пользователя, красивый обвод идет. Много всего красивого в ней, но установка скажу вам не трудная, просто время на ее больше уйдет.

Вот чтоб лучше рассмотреть:



Теперь переходим к установке:

1. Скачиваем архив с файлами, которые загружаем в папку personal в файловом менеджере.
2. Управление дизайном - модуль Пользователи - Персональная страница пользователя замена на этот код:

Код
<html>  
<head>  
<meta charset="utf-8">  
<title>Персональная страница пользователя $_USERNAME$</title>  
<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  <!-- <CSS> -->  
  <link href="/personal/css/demo.css" rel="stylesheet" type="text/css">  
  <link rel="stylesheet" href="/personal/css/jqbar.css" />  
  <link rel="stylesheet" type="text/css" href="/personal/css/bootstrap.css">  
  <link rel="stylesheet" type="text/css" href="/personal/css/bootstrap-responsive.css">  
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600' rel='stylesheet' type='text/css'>  
  <link rel="stylesheet" type="text/css" href="/personal/css/style.css">  
  <link rel="stylesheet" href="/personal/font-awesome/css/font-awesome.min.css">  
  <link rel="stylesheet" type="text/css" href="/personal/css/simpletextrotator.css" />  
  <!-- </CSS> -->  
  <!--[if lt IE 9]>  
  <style>  
  .rw-wrapper{ display: none; }  
  .rw-sentence-IE{ display: block; }  
  </style>  
  <![endif]-->  

</head>  

<body>  
<!-- <body> -->  
  <div class="container topbottom">  
  <div class="row-fluid">  

  <div class="span5">  
<!-- <ОБЛОЖКА> -->  
  <?if($_WWW$)?> <img src="$_WWW$" alt="$_NAME$ profile fon" class="avatarl" style="margin-bottom: -26px;width: 100%;border-radius: 15px 15px 0px 0px;"><?else?>  
  <img src="/personal/img/avatar.jpg" alt="$_NAME$ profile fon" class="avatarl" style="margin-bottom: -26px;width: 100%;border-radius: 15px 15px 0px 0px;"><?endif?>  
  <!-- <СТАТУС> -->  
  <?if(strpos($_STATUS$,'Offline')!=-1)?><div class="offtext">Оффлайн</div><?else?><div class="ontext">Онлайн</div><?endif?>  
  <!-- <АВТАР> -->  
  <?if($_AVATAR$)?>$_AVATAR$<?else?>  
  <img src="/personal/img/no-avatar.png" alt="$_NAME$ profile Avatar" class="avatar"><?endif?>  
  <!-- <НАВИГАЦИЯ> -->  
  <div class="navigation">  
  <div>  
  <ul>  
  <?if($LOGOUT_LINK$)?><li>  
  <img src="/personal/img/about-icon.png">  
  <a href="/index/8">Мой профиль</a>  
  </li><?else?><li>  
  <img src="/personal/img/about-icon.png">  
  <a href="$LOGIN_LINK$">Вход</a>  
  </li><?endif?>  
<?if($_PM_READ_URL$)?> <li>  
  <i class="icon-pencil" style="color:#fff;margin-left: 20px;"></i>  
  <a href="/index/11" style="margin-left: 20px;">Редактировать информацию</a>  
  </li><?endif?>  
  <li>  
  <img src="/personal/img/contact-icon.png">  
<?if($_PM_READ_URL$)?> <a href="$_PM_READ_URL$">Личные сообщения <?if($UNREAD_PM$)?>($UNREAD_PM$)<?else?>(0)<?endif?></a>  
  <?else?><a href="$_PM_SEND_URL$">Отправить сообщение </a><?endif?>  
  </li>  
  <li style="padding-left:16px;">  
  <i class="icon-user" style="color:#fff;"></i><i class="icon-user" style="color:#fff; margin-left: -5px;"></i>  
  <a href="index/15" style="padding-left: 35px;">Все пользователи</a>  
  </li>  
  <li>  
  <img src="/personal/img/portfolio-icon.png">  
  <a href="$_LOAD_ACTIVITY_URL$">Публикации</a>  
  </li>  
  <?if($LOGOUT_LINK$)?> <li>  
  <i class="icon-signout" style="color:#fff;margin-left: 20px;"></i>  
  <a href="$LOGOUT_LINK$" style="margin-left: 20px;">Выход</a>  
  </li><?endif?>  
  </ul>  
  </div>  
  </div>  
  </div>  

  <div class="span7 homeabout" style="background: rgba(234, 243, 250, 0.25);">  
  <div class="person">  
  <span class="name">$_NAME$ <?if($_EMAIL_IS_VERIFIED$)?><div title="Пользователь подтвержден" class="okemail" ></div><?else?><div title="Пользователь не подтвержден" class="noemail" ></div><?endif?>  
</span><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?></div>  
   
Группа: <b>$_GROUP_NAME$</b>  
  <hr>  
Логин: <b>$_USERNAME$</b>  
  <hr>  
Полное имя: <b>$_NAME$</b>  
  <hr>  
Пол пользователя: <b>$_GENDER_NAME$</b>  
  <hr>  
Последний вход: <b>$_LOG_TIME$</b>  
  <hr>  
Дата регистрации: <b>$_REG_TIME$</b>  
  <hr>  
День рождения: <b>$_BIRTHDAY$</b>  
  <hr>  
Группа: <b>$USER_GROUP$</b>  
  <hr>  
Ранг: <b>$_RANK_NAME$</b>  
  <hr>  
Награды: <?if($AWARDS_READ_URL$)?><a href="$AWARDS_READ_URL$" title="Список наград">(<b>$AWARDS$</b>)</a> <?if($AWARDS_DO_URL$)?>[<a href="$AWARDS_DO_URL$">+</a>]<?endif?><?endif?>  
  <hr>  
  <?if($_BAN_READ_URL$)?><b>Замечания:</b> <a href="$_BAN_READ_URL$"><b>$_BAN_RATING$</b></a>  
  <hr><?endif?>  
   
  <?if($_REPUTATION$=0)?>  
<div style="text-align: center;">Репутация пользователя пуста!</div>  
<?else?>  
<div id="testRepa" style="border:0px text-align:left; max-height:250px; overflow-x:hidden;">  
</div>  
<script type="text/javascript">  
var user_id = "$_USER_ID$";  
</script>  
<script type="text/javascript" src="http://webmaster-ucoz.ru/a-web/person_stranica/js/rep.js"></script>  
<?endif?>  

  <br>  
   

  <center> <span class="name" style="color:black;font-size:23px;">Подпись</span></center>  
  <div class="desciption home">  
  <p><?if($_SIGNATURE$)?>$_SIGNATURE$<?else?>Нет подписи =(</p><?endif?>  
  </div>  
  <div class="row">  
  <div class="span12">  
  <!--Google Ad here-->  
  <div id="horizontal-ad" >  
  <script type="text/javascript"><!--  
  google_ad_client = "ca-pub-6472538845369616";  
  /* On Demos 2 */  
  google_ad_slot = "6440596675";  
  google_ad_width = 568;  
  google_ad_height = 60;  
  //-->  
  </script>  
  <script type="text/javascript"  
  src="//pagead2.googlesyndication.com/pagead/show_ads.js">  
  </script>  
  </div>  
  <div id="box-ad">  
  <script type="text/javascript"><!--  
  google_ad_client = "ca-pub-6472538845369616";  
  /* GoogleSuggestedForDemo */  
  google_ad_slot = "5067431585";  
  google_ad_width = 300;  
  google_ad_height = 250;  
  //-->  
  </script>  
  <script type="text/javascript"  
  src="//pagead2.googlesyndication.com/pagead/show_ads.js">  
  </script>  
  </div>  
  <!--Google ad ends here-->  
  </div>  
  </div>  
  <!-- <ПРОГРЕСС БАР> -->  
  <div class="row">  
  <div class="span6">  
  <div class="bars">  
  <div id="bar-1">  
  </div>  
  <div id="bar-2">  
  </div>  
  <div id="bar-3">  
  </div>  
  <div id="bar-4">  
  </div>  
   
  </div>  
  </div>  
  <div class="span6">  
  <div class="user-tip"><span style="color:black;font-size:23px;font-weight: 600;">Статистика</span></div>  
  <div id="bars-content">  
  <div class="content" id="content-1">Комментарий (лат. commentarius — заметки, записки; толкование) — пояснения к тексту, рассуждения, замечания о чём-нибудь или в Интернете — к посту (сообщению).</div>  
  <div class="content" id="content-2">Веб-форум — класс веб-приложений для организации общения посетителей веб-сайта. Термин соответствует смыслу исходного понятия «форум».</div>  
  <div class="content" id="content-3">Файл (англ. file) — именованная область данных на носителе информации. Работа с файлами реализуется средствами операционных систем.</div>  
  <div class="content" id="content-4">Репутация (англ. reputation), реноме? (фр. renommee) — закрепившееся определённое мнение о человеке или группе людей.</div>  
  <div class="content" id="content-5">A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</div>  
  <div class="content" id="content-6">A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</div>  
  </div>  
  </div>  
  </div>  
   
  </div>  

  </div>  
  </div><!-- </body> -->  
  <!-- <СКРИПТЫ> -->  
  <script src="/personal/js/jquery-1.7.1.min.js" type="text/javascript"></script>  
  <script src="/personal/js/jqbar.js" type="text/javascript"></script>  
   
  <script type="text/javascript">  
  $(document).ready(function () {  
   
  $('#bar-1').jqbar({ label: 'Комментариев: ', value: $_COM_ENTRIES$, barColor: '#BA7B21' });  
  $('#bar-2').jqbar({ label: 'Ответов: ', value: $_FORUM_ENTRIES$, barColor: '#BA7B21' });  
  $('#bar-3').jqbar({ label: 'Файлы: ', value: $_LOAD_ENTRIES$, barColor: '#BA7B21' });  
  $('#bar-4').jqbar({ label: 'Репутация: ', value: $_REPUTATION$, barColor: '#BA7B21'});  
   
   
  $('#bars-content .content').css({'opacity':'0',display:'none'});  
  $('#bars-content .content:eq(0)').css('display','block').animate({opacity:1},1000);  
  $('.jqbar:first').addClass('active');  
  $('.jqbar').hover(function(){ $(this).addClass('hover');},function(){ $(this).removeClass('hover');});  
  $('.jqbar').click(function(){  
  $('.jqbar').removeClass('active');  
  var id = $(this).addClass('active').attr('id').replace('bar','content');  
  $('#bars-content .content').css({'opacity':'0',display:'none'});  
  $('#' + id).css('display','block').animate({opacity:1},1000);  
   
  });  
   
  /* $(".rotate").textrotator({  
  animation: "spin",  
  separator: ",",  
  speed: 2000  
  });  
  */  
   
  });  
   
  </script>  
   
  <script type="text/javascript" src="/personal/js/jquery.simple-text-rotator.min.js"></script>  
   
</body>  
</html>


И это не все, нужно сменить в Страница редактирования данных пользователя, также весь код:

Код
<html>  
<head>  
<meta charset="utf-8">  
<title>Редактирование данных</title>  
<meta name="viewport" content="width=device-width, initial-scale=1.0" />  
  <!-- <CSS> -->  
  <link href="/personal/css/demo.css" rel="stylesheet" type="text/css">  
  <link rel="stylesheet" href="/personal/css/jqbar.css" />  
  <link rel="stylesheet" type="text/css" href="/personal/css/bootstrap.css">  
  <link rel="stylesheet" type="text/css" href="/personal/css/bootstrap-responsive.css">  
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600' rel='stylesheet' type='text/css'>  
  <link rel="stylesheet" type="text/css" href="/personal/css/style.css">  
  <link rel="stylesheet" href="/personal/font-awesome/css/font-awesome.min.css">  
  <link rel="stylesheet" type="text/css" href="/personal/css/simpletextrotator.css" />  
  <!-- </CSS> -->  
  <!--[if lt IE 9]>  
  <style>  
  .rw-wrapper{ display: none; }  
  .rw-sentence-IE{ display: block; }  
  </style>  
  <![endif]-->  

</head>  

<body>  
<!-- <body> -->  
  <div class="container topbottom">  
  <div class="row-fluid">  

  <div class="span5">  
<!-- <ОБЛОЖКА> -->  
  <?if($_WWW$)?> <img src="$_WWW$" alt="$_NAME$ profile fon" class="avatarl" style="margin-bottom: -26px;width:100%;"><?else?>  
  <img src="/personal/img/avatar.jpg" alt="$_NAME$ profile fon" class="avatarl" style="margin-bottom: -26px; width:100%;"><?endif?>  
<br><br>  
<!-- <НАВИГАЦИЯ> -->  
<div class="navigation">  
  <div>  
  <ul>  
  <?if($LOGOUT_LINK$)?><li>  
  <img src="/personal/img/about-icon.png">  
  <a href="/index/8">Мой профиль</a>  
  </li><?else?><li>  
  <img src="/personal/img/about-icon.png">  
  <a href="$LOGIN_LINK$">Вход</a>  
  </li><?endif?>  
<?if($_PM_READ_URL$)?> <li>  
  <i class="icon-pencil" style="color:#fff;margin-left: 20px;"></i>  
  <a href="/index/11" style="margin-left: 20px;">Редактировать информацию</a>  
  </li><?endif?>  
  <li>  
  <img src="/personal/img/contact-icon.png">  
<?if($_PM_READ_URL$)?> <a href="$_PM_READ_URL$">Личные сообщения <?if($UNREAD_PM$)?>($UNREAD_PM$)<?else?>(0)<?endif?></a>  
  <?else?><a href="$_PM_SEND_URL$">Отправить сообщение </a><?endif?>  
  </li>  
  <li style="padding-left:16px;">  
  <i class="icon-user" style="color:#fff;"></i><i class="icon-user" style="color:#fff; margin-left: -5px;"></i>  
  <a href="index/15" style="padding-left: 35px;">Все пользователи</a>  
  </li>  
  <li>  
  <img src="/personal/img/portfolio-icon.png">  
  <a href="$_LOAD_ACTIVITY_URL$">Публикации</a>  
  </li>  
  <?if($LOGOUT_LINK$)?> <li>  
  <i class="icon-signout" style="color:#fff;margin-left: 20px;"></i>  
  <a href="$LOGOUT_LINK$" style="margin-left: 20px;">Выход</a>  
  </li><?endif?>  
  </ul>  
  </div>  
  </div>  
  </div>  

  <div class="span7 homeabout" style="background: rgba(234, 243, 250, 0.25);">  
  <div class="person">  
  <span class="name">Редактирование данных  
</span>  

  </div>  

  <hr>  
$BODY$  
  <style>  
  body{  
  font-size:14px;  
  }  
  label {  
  display: -webkit-inline-box;  
  }  
  <style>  
  </div>  
  </div>  
   
   
  </div>  
  </div>  
   
   
  </div>  

  </div>  
  </div><!-- </body> -->  
  <!-- <СКРИПТЫ> -->  
  <script src="/personal/js/jquery-1.7.1.min.js" type="text/javascript"></script>  
  <script src="/personal/js/jqbar.js" type="text/javascript"></script>  
   
  <script type="text/javascript">  
  $(document).ready(function () {  
   
  $('#bar-1').jqbar({ label: 'Комментариев: ', value: $_COM_ENTRIES$, barColor: '#21ba82' });  
  $('#bar-2').jqbar({ label: 'Ответов: ', value: $_FORUM_ENTRIES$, barColor: '#21ba82' });  
  $('#bar-3').jqbar({ label: 'Файлы: ', value: $_LOAD_ENTRIES$, barColor: '#21ba82' });  
  $('#bar-4').jqbar({ label: 'Репутация: ', value: $_REPUTATION$, barColor: '#21ba82'});  
   
   
  $('#bars-content .content').css({'opacity':'0',display:'none'});  
  $('#bars-content .content:eq(0)').css('display','block').animate({opacity:1},1000);  
  $('.jqbar:first').addClass('active');  
  $('.jqbar').hover(function(){ $(this).addClass('hover');},function(){ $(this).removeClass('hover');});  
  $('.jqbar').click(function(){  
  $('.jqbar').removeClass('active');  
  var id = $(this).addClass('active').attr('id').replace('bar','content');  
  $('#bars-content .content').css({'opacity':'0',display:'none'});  
  $('#' + id).css('display','block').animate({opacity:1},1000);  
   
  });  
   
  /* $(".rotate").textrotator({  
  animation: "spin",  
  separator: ",",  
  speed: 2000  
  });  
  */  
   
  });  
   
  </script>  
   
  <script type="text/javascript" src="/personal/js/jquery.simple-text-rotator.min.js"></script>  
   
</body>  
</html>


После установки вы сможете сменить сам фон странице, так как идет картинкой и поставить свою, к примеру поставил сини. и стили поменял на этот оттенок. Но у вам все будет по умолчанию с источника, это темно темная гамма.

Источник: http://internetempire.ru/
24.02.2016 Загрузок: 15 Просмотров: 628 Комментарий: (19)

Поделиться в социальных сетях

Материал разместил

Комментарий: 17
Сопрано
Сопрано 24.02.2016 20:081
0
Но для этой страницы, точно нужно что то оригинальное по сайту. Просто нагрузили ее, а так по самому дизайн отлично смотрится. Посмотрел сколько нужно загрузить, с начало подумал, что файлом ошиблись, и это какой то шаблон, а нет все правильно.
Kosten
Kosten 24.02.2016 20:122
0
А что вы хотели, такая серьезная страница, можно сказать второй ресурс, а что вы хотели, одним кодом и все, здесь такое не прокатит.
tsakonter
tsakonter 24.02.2016 20:183
0
В статистике явно там лишнее, да она сама, правильно что поставили ссылку на другую, просто не очень она там идет и не понятно, а здесь как то роднее. А что по загрузке файлов в корень сайта, в помощь вам FileZilla, залетит все за считанные секунды.
Kvint
Kvint 24.02.2016 22:307
0
Да все можно ручками закинуть и не каких программ не нужно.
Сафрон
Сафрон 24.02.2016 20:244
-1
Не хочу не кого обидеть, просто поймите меня правильно.
Зачем такие станицы адаптировать, но если один поставит ее, но только время зря тратите, так как есть намного красивей. Если и адаптацию делать и хорошо, так весь сайт, но не одну ее.
Kosten
Kosten 24.02.2016 20:285
+2
Сафрон, нужно всегда отвечать по факту, а не брать с головы статистику, если бы да один поставит, где взято было.
Что по адаптацию, люди делают не для себя в выкидывают в интернет, для всех нас, тут нужно сказать им от души, а не говорить, что ненужное или грузить будет. Они могут забить на все, и для себя делать или за лафэ впаривать, тогда бы по другому уже разговор был.
Canon
Canon 24.02.2016 22:318
0
Все правильно, зачем что то делать замороченное в адаптаций.
frecsarg
frecsarg 24.02.2016 20:326
+2
Есть такая песня "Давай до свидание" но не понравиться, написал, что она не нравится мне. Другое дело, писать для чего вы делаете, не кто не ответит здесь для чего они делают адаптацию, так же можно сказать, для чего ты делаешь сайт, или деньги заработать и этим самоутвердиться или просто для людей.
ucozmental
ucozmental 24.02.2016 22:369
0
Мне понравился сам вид, что на отдельной странице, но что то подсказывает, персоналка там много места не займет, разве что в длину и прокручивать нужно будет.
Alex_L_X
Alex_L_X 24.02.2016 22:3710
0
Ништяк. Но недоработки есть Временная демка
ucozmental
ucozmental 24.02.2016 22:4011
0
Alex_L_X, точно сказал, что прокручиваться будет, так низ сделан не по теме и можно было уже самому вывести данные и скрипт на это есть.
ucozmental
ucozmental 24.02.2016 22:4112
0
Но здесь не поспоришь, ты даже сайта своего показать не хочешь, а такие предложение пишешь.
Maryges
Maryges 24.02.2016 22:4413
0
ucozmental, если тебе не нравится другое соображение по этому файлу, но напиши нормально, зачем эти все крутизны.
Tergran
Tergran 24.02.2016 22:4614
0
На демо отлично смотрится, да он просто был взят полностью, и там есть элементы, которые не нужны, есть такие, которые можно сменить, но сама страница выглядит великолепно.
csretven
csretven 24.02.2016 22:5415
0
Здесь согласен полностью, то слишком много умных нашлось, сами поди не чего как скопировить не могут, но обсудить да что то внести свое, здесь одни из первых.
Вид самый ходовой, для меня, и посмотрб как на одном сайте смотреться будет.
Alex_L_X
Alex_L_X 24.02.2016 22:5716
0
Этот код можно взять как отличную базу, знаючи можно хорошо доработать, +100500, хотябы за необычность и отличный подход. А касаемо знаний - тут они большие - так написать.
Alex_L_X
Alex_L_X 25.02.2016 00:3717
0
P.S. не работает онлайн/оффлайн.
Всё время онлайн показывает
avatar