» » >

User панель uCoz со сменой цвета на cookie v 1.0
·
29.09.2013, 01:48

Всем доброго времени суток, сегодня мы рассмотрим новую User панель, которая может менять свой цвет и запоминать его при переходах по страницам. В этой версии предоставлено 4 цвета, по умолчанию стоит голубой цвет, который вы можете поменять на любой другой.

Шаг 1 - Установим JS:

Приступим к установке. Для начала подключим скрипт, с помощью которого наши цвета будут изменяться и запоминаться. Ставим этот код перед закрывающим тегом </body>:

JS


<script type="text/javascript" src="http://ucoz-helper.ucoz.com/v-selom-o-ucoz/Cookie.js"></script>
<script>
if(getCookie('mpbgcolors1')) {  
  $( '.mprofiles_ava' ).css({'background':'#ff4d00'});
  $( '.mprofiles a' ).css({'background':'#ff4d00'});
  $( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});  
} else if(getCookie('mpbgcolors2')){
  $( '.mprofiles_ava' ).css({'background':'#34c924'});
  $( '.mprofiles a' ).css({'background':'#34c924'});
  $( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});  
} else if(getCookie('mpbgcolors3')){
  $( '.mprofiles_ava' ).css({'background':'#42aaff'});
  $( '.mprofiles a' ).css({'background':'#42aaff'});
  $( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});  
} else if(getCookie('mpbgcolors4')){
  $( '.mprofiles_ava' ).css({'background':'#808080'});
  $( '.mprofiles a' ).css({'background':'#808080'});
  $( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});  
};

$( '.mpcolor' ).click(function() {
  var color = $( this ).css( 'background-color' );
  $( '.mprofiles_ava' ).css({'background':color});
  $( '.mprofiles a' ).css({'background':color});
  $( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});
});
</script>
Шаг 2 - Установим HTML:

Далее нужно вставить данный html код в то место, где вы хотите видеть данную User панель:

HTML

if($USER_LOGGED_IN$)?>
<div class="mprofiles">
<div class="mprofiles_ava"><img src="if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$else?>http:http://ucoz-helper.ucoz.com/v-selom-o-ucoz/no_ava.jpgendif?>" width="80" height="80" alt="$USERNAME$"></div>
<div class="mpcolor" style="background-color:#ff4d00;" onclick="setCookie('mpbgcolors1', 1, 365);eraseCookie('mpbgcolors2');eraseCookie('mpbgcolors3');eraseCookie('mpbgcolors4');"></div>
<div class="mpcolor" style="background-color:#34c924;" onclick="setCookie('mpbgcolors2', 1, 365);eraseCookie('mpbgcolors1');eraseCookie('mpbgcolors3');eraseCookie('mpbgcolors4');"></div>
<div class="mpcolor" style="background-color:#42aaff;" onclick="setCookie('mpbgcolors3', 1, 365);eraseCookie('mpbgcolors1');eraseCookie('mpbgcolors2');eraseCookie('mpbgcolors4');"></div>
<div class="mpcolor" style="background-color:#808080;" onclick="setCookie('mpbgcolors4', 1, 365);eraseCookie('mpbgcolors1');eraseCookie('mpbgcolors2');eraseCookie('mpbgcolors3');"></div>
<a href="/index/8-$USER_ID$" class="mprofiles_name">$USERNAME$</a>
<a href="$PM_URL$" class="mprofiles_ls">Сообщения $UNREAD_PM$</a>
<a href="/index/11" class="mprofiles_set">Настройки</a>
<a href="/index/10" class="mprofiles_out">Выход</a>
</div>
endif?>
Шаг 3 - Установим CSS:

И для того чтобы придать нашей панели дизайн, установим следующие css стили в таблицу стилей css:

CSS-Code

/* User панель пользователя start */  
.mpcolor{width:15px;height:15px;margin:3px;float:left;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.mpcolor:hover{opacity:0.7;cursor:pointer;}
.mprofiles{padding:5px;position:relative;}
.mprofiles_ava{width:80px;height:80px;background:#42aaff;padding:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.mprofiles a{color:#fff;padding:3px;background:#42aaff;}
.mprofiles a:hover{text-decoration:none;opacity:0.7;}
.mprofiles_name{position:absolute;top:10px;left:95px;border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;}
.mprofiles_ls{position:absolute;top:30px;left:95px;border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;}
.mprofiles_set{position:absolute;top:50px;left:95px;border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;}
.mprofiles_out{position:absolute;top:70px;left:95px;border-radius:0px 5px 5px 0px;-webkit-border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;}
/* User панель пользователя end */

Все, установка завершена. Файл Cookie.js и картинку no_ava.jpg вы можете получить скачав исходники.

Спасибо за внимание!

Категория: В целом о uCoz | Добавил: tashkent97
Просмотров: 596 | Загрузок: 310 | Источник: center-dm.ru | Рейтинг: 4.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<