Регистрация    Войти
Авторизация

Улучшаем модер панель для uCoz, $MODER_PANEL$ uCoz

Улучшаем модер панель для uCoz, $MODER_PANEL$ uCoz

В этом готовом решении я буду улучшать существующую модер панель на uCoz, благодаря секретам HTML-CSS.

Смысл данного CSS решения заключается в том, что стандартная модер панель новостей на uCoz всегда будет открыта.

Шаг 1 - HTML каркас:
Для начала нам следует поместить переменную uCoz отвечающую за отображение модер панели в новостях сайта в ячейку div с нужным классом:
<?if($MODER_PANEL$)?>  
  <div class="manucoz-moder-panel">$MODER_PANEL$</div> 
<?endif?>


Шаг 2 - Установим CSS:
1. Первая наша с вами задача - это прописать внешние отступы между иконками, для этого прописываем вот такие CSS стили:
.manucoz-moder-panel span img {margin: 0px 3px; }

moder_panel_ucoz_1


2. Теперь давайте пропишем CSS стили которые будут говорить данной ячейки быть всегда открытой:
.manucoz-moder-panel span {display:inline!important}


Наш хак почти готов, только с небольшим но, в нём отображается визуальный хлам:
moder_panel_ucoz_2


Чтобы решить данную задачу прописываем следующие строчки кода:
.manucoz-moder-panel img[style], 
.manucoz-moder-panel img[width="1"] {display:none!important}


Теперь модер панель для новостей ucoz готова и выглядит как и задумано.
moder_panel_ucoz_3


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

Так вот, чтобы скрыть данную линию, я пропишу тегу span высоту ячейки в 12px и пропишу значение overflow:hidden;

а иконкам в данной ячейки пропишу отрицательный верхний отступ в 6 пикселей, давайте посмотрим что у меня получилось
.manucoz-moder-panel span { 
  float:left; 
  height:12px; 
  overflow:hidden;  
  display:inline!important 
} 

.manucoz-moder-panel span img { 
  margin: -6px 3px 0px 0px; 
}


вот теперь данная модер панель uCoz выглядит как я и хотел:
moder_panel_ucoz_4


И теперь чтобы не запутаться, давайте посмотрим на все прописанные выше CSS стили:
/* Модер панель в нoвостях 
------------------------------------------*/ 
.manucoz-moder-panel img[style], 
.manucoz-moder-panel img[width="1"] {display:none!important} 
.manucoz-moder-panel span {float:left; height:12px; overflow:hidden; display:inline!important;} 
.manucoz-moder-panel span img {float:left; margin: -2px 3px 0px 0px;} 


На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  17-12-2014, 19:03   Просмотров: 3911   

Источник новости: uotvet.ru

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


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.