|
|
Пост #1 написан 20.01.2015 в 13:51
В этом готовом решении я буду улучшать существующую модер панель на 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;}
На этом всё, спасибо за внимание!
|
|
