Всем доброго времени суток, сегодня мы рассмотрим новую 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 вы можете получить скачав исходники.
Спасибо за внимание!