Улучшаем модер панель для 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; }

2. Теперь давайте пропишем CSS стили которые будут говорить данной ячейки быть всегда открытой:

.manucoz-moder-panel span {display:inline!important}

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

Чтобы решить данную задачу прописываем следующие строчки кода:

.manucoz-moder-panel img[style], 
.manucoz-moder-panel img[width="1"] {display:none!important}

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

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

Так вот, чтобы скрыть данную линию, я пропишу тегу 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 выглядит как я и хотел:

И теперь чтобы не запутаться, давайте посмотрим на все прописанные выше 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;} 

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