На одном из сайтов uCoz я обнаружил интересное решение, как вы поняли по заголовку данной темы, речь идёт о новом личном сообщении как «ВКонтакте», единственное что мне не понравилось в данном решении, так это:
— размещение аватара пользователя с левой стороны ячейки
— старая вёрстка таблицами
— css стили вписаны в html код, а не вынесены в отдельный файл
но самым главным плюсом является тот момент, что в данном решении автор задействовал API системы ucoz, что даёт нам возможность вывести аватар пользователя который отправил вам личное сообщение.
Немного повозившись с кодом я реализовал всё как надо с точки зрения юзабилити и html-css кода и так начнём.
Шаг 1 — Установка Js:
Всё что нам следует сделать, так это установить следующий js код, на вашу страницу сайта, в самый низ перед тегом
var no_ava = ‘http://www.center-dm.ru/img/no_avatar.jpg’ ;
$ . getScript ( ‘http://center-dm.ru/ucoz/vid_ls/v1/ls.js’ );
Шаг 2 — Установка CSS:
Всё для Ucoz- Установка на сайте кнопки Мне нравится от ВКонтакте
Теперь нам следует выбрать один из пяти вариантов оформление данного решения для uCoz:
Белый вариант:
/* Оповещение о новом лс как Вконтакте
——————————————*/
. news_ls1 <
position : relative ;
z — index : 9999 ;
>
. news_ls2 <
position : fixed ;
bottom : 5px ;
right : 5px ;
>
. uContent <
overflow : hidden ;
display : none ;
margin — bottom : 10px ;
width : 300px ;
background : url ( http : //center-dm.ru/ucoz/vid_ls/v1/fon_uContent_White.png);
padding : 5px 10px 5px 10px ;
— webkit — border — radius : 5px ;
— moz — border — radius : 5px ;
border — radius : 5px ;
— moz — box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
— webkit — box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
>
. uContent_l <
float : left ;
font : 11px Verdana , Arial , Helvetica , sans — serif ;
color : #555; text-shadow: 1px 1px 1px #fff; font-weight: bold;
>
. uContent_p < float : right ;>
. uContent_c <
float : left ;
font : 100 % /1.0 Verdana,Arial,Helvetica, sans-serif;
width:300px;
padding: 5px 0px 0px 0px;
>
.uPm-close <
width:18px;
height:18px;
background:url(http:/ / center — dm . ru / ucoz / vid_ls / v1 / knopka_closse_White . png ) no — repeat ;
>
. uPm — close : hover <
background — position : 0px — 18px ;
>
. uContent_c img <
float : right ;
width : 45px ;
height : 45px ;
border : 1px solid #a7a7a7;
padding : 3px ;
margin : 0px 0px 10px 15px ;
Ставим Виджет коментариев от Вконтакте для ucoz.
background : #fff;
>
. uContent_c span <
color : #547ec4;
>
. uContent_c p <
padding : 0 ;
margin : 5px 0px 0px 0px ;
>
Чёрный вариант:
/* Оповещение о новом лс как ВКонтакте
——————————————*/
. news_ls1 <
position : relative ;
z — index : 9999 ;
>
. news_ls2 <
position : fixed ;
bottom : 5px ;
right : 5px ;
>
. uContent <
overflow : hidden ;
display : none ;
margin — bottom : 10px ;
width : 300px ;
background : url ( http : //center-dm.ru/ucoz/vid_ls/v1/fon_uContent_Black.png);
padding : 5px 10px 5px 10px ;
— webkit — border — radius : 5px ;
— moz — border — radius : 5px ;
border — radius : 5px ;
— moz — box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
— webkit — box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
>
. uContent_l <
float : left ;
font : 11px Verdana , Arial , Helvetica , sans — serif ;
color : #a7a7a7; text-shadow: 1px 1px 1px #252525; font-weight: bold;
>
. uContent_p < float : right ;>
. uContent_c <
float : left ;
font : 100 % /1.0 Verdana,Arial,Helvetica, sans-serif;
color:#a7a7a7;
width:300px;
padding: 5px 0px 0px 0px;
>
.uPm-close <
width:18px;
height:18px;
background:url(http:/ / center — dm . ru / ucoz / vid_ls / v1 / knopka_closse_Black . png ) no — repeat ;
>
. uPm — close : hover <
background — position : 0px — 18px ;
>
. uContent_c img <
float : right ;
width : 45px ;
height : 45px ;
border : 1px solid #838383;
padding : 3px ;
margin : 0px 0px 10px 15px ;
background : #646464;
>
. uContent_c span <
color : #8fbbe9;
>
. uContent_c p <
padding : 0 ;
margin : 5px 0px 0px 0px ;
>
Синий вариант:
/* Оповещение о новом лс как Вконтакте
——————————————*/
. news_ls1 <
position : relative ;
z — index : 9999 ;
>
. news_ls2 <
position : fixed ;
bottom : 5px ;
right : 5px ;
>
. uContent <
overflow : hidden ;
display : none ;
margin — bottom : 10px ;
width : 300px ;
background : url ( http : //center-dm.ru/ucoz/vid_ls/v1/fon_uContent_Blue.png);
padding : 5px 10px 5px 10px ;
— webkit — border — radius : 5px ;
— moz — border — radius : 5px ;
border — radius : 5px ;
— moz — box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
— webkit — box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
>
. uContent_l <
float : left ;
font : 11px Verdana , Arial , Helvetica , sans — serif ;
color : #6e87c6; text-shadow: 1px 1px 1px #fff; font-weight: bold;
>
. uContent_p < float : right ;>
. uContent_c <
float : left ;
font : 100 % /1.0 Verdana,Arial,Helvetica, sans-serif;
color:#555;
width:300px;
padding: 5px 0px 0px 0px;
>
.uPm-close <
width:18px;
height:18px;
background:url(http:/ / center — dm . ru / ucoz / vid_ls / v1 / knopka_closse_Blue . png ) no — repeat ;
>
. uPm — close : hover <
background — position : 0px — 18px ;
>
. uContent_c img <
float : right ;
width : 45px ;
height : 45px ;
border : 1px solid #99bee4;
padding : 3px ;
margin : 0px 0px 10px 15px ;
background : #fff;
>
. uContent_c span <
color : #43983f;
>
. uContent_c p <
padding : 0 ;
margin : 5px 0px 0px 0px ;
>
Зелёный вариант:
/* Оповещение о новом лс как Вконтакте
——————————————*/
. news_ls1 <
position : relative ;
z — index : 9999 ;
>
. news_ls2 <
position : fixed ;
bottom : 5px ;
right : 5px ;
>
. uContent <
overflow : hidden ;
display : none ;
margin — bottom : 10px ;
width : 300px ;
background : url ( http : //center-dm.ru/ucoz/vid_ls/v1/fon_uContent_Green.png);
padding : 5px 10px 5px 10px ;
— webkit — border — radius : 5px ;
— moz — border — radius : 5px ;
border — radius : 5px ;
— moz — box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
— webkit — box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
box — shadow : 0px 2px 7px rgba ( 0 , 0 , 0 , 0.70 );
>
. uContent_l <
float : left ;
font : 11px Verdana , Arial , Helvetica , sans — serif ;
color : #1dbb19; text-shadow: 1px 1px 1px #fff; font-weight: bold;
>
. uContent_p < float : right ;>
. uContent_c <
float : left ;
font : 100 % /1.0 Verdana,Arial,Helvetica, sans-serif;
color:#555;
width:300px;
padding: 5px 0px 0px 0px;
>
.uPm-close <
width:18px;
height:18px;
background:url(http:/ / center — dm . ru / ucoz / vid_ls / v1 / knopka_closse_Green . png ) no — repeat ;
>
. uPm — close : hover <
background — position : 0px — 18px ;
>
. uContent_c img <
float : right ;
width : 45px ;
height : 45px ;
border : 1px solid #77ca79;
padding : 3px ;
margin : 0px 0px 10px 15px ;
background : #fff;
>
. uContent_c span <
color : #5976c0;
>
. uContent_c p <
padding : 0 ;
margin : 5px 0px 0px 0px ;
>
Примечание:
Для того чатобы аватар пользователя который отправил вам личное сообщение стал отображаться, вам следует включить API в админ панели uCoz, для этого заходим в:
Админ панель => Настройки => Общие настройки => Разрешить использование API
Источник: ucoz-helper.ucoz.com
Шаблон All-for-VKontakte для uCoz
Описание:
Новый дизайн All-for-VKontakte, красивый, простенький дизайн с элементами ВКонтакте, по мне достаточно функциональный и работоспособный. Это уже не первый шаблон данного сайта, этот шаблон новее и красивее. Можете смотреть скриншоты или установить себе на сайт.
Файл:
Конструктор шаблонов;
Необходимые файлы для загрузки;
Инструкция по настройке шаблона;
Коды для информеров;
Backup шаблона (_tbkp).
Примечания и Авторство :
1. Нашли ошибку или баг? Сообщите в ЛС или в тему на форуме;
2. Указывайте ссылку на источник;
3. Уважайте чужой труд.
Источник: www.nk-cs.ru
Все как вконтакте для ucoz
Всплывающее окно для ucoz.Как сделать всплывающие AJAX-окна в uCoz?
Иногда есть необходимость использования всплывающих окон на юкоз. Например, когда Вам нужно, чтобы пользователь обязательно прочел определенную информацию или перешел по желаемой ссылке. Конечно, можно поставить скрытый код кликандера, но это не честно и тем более очень плохо сказывается на отношение поисковых машин к вашему сайту.
Сегодня я Вас научу, как можно сделать всплывающие окошки на движке юкоз по технологии AJAX. Ничего сверхъестественного в этом нет и если Вы начинающий веб-мастер, не стоит боятся этого урока. Я подробно все опишу, тем более описывать многого не придется – статья небольшая.