CSS core для CMSimple_xh

CMSimple_xh это простая и легкая cms, разработчиками которой являются команда программистов . В этой статье Я напишу как оформить меню администратора CMSimple_xh для русских слов и как добавить к списку меню иконки с помощью webfont icons.

CMSimple_xh core. css

Если ваш шаблон CMSimple_xh предусматривает информирование для ссылок в формате jpg, gif или PNG, рекомендую заменить их на webfont icons.

Сам файл core.css содержит таблицу стилей для административной панели CMSimple_xh. Первое что Я сделал в core.css, это немного изменил разметку стилей для лучшего отображения русских слов в меню админки CMSimple_xh.

Вот новый код CSS для файла core.css, код улучшит разметку меню администратора.



/*
 * Adminmenu
 */

#xh_adminmenu_scrolling {
    z-index: 999;
}

#xh_adminmenu_fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

#xh_adminmenu {
    background-color: #333;
    border-bottom: 1px solid #aaa;
    font-size: 14px;
}

#xh_adminmenu ul {
    font-family: arial,sans-serif;
    font-style: normal;
    height: 36px;
    list-style-image: none;
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}

#xh_adminmenu li {
    float: left;
    list-style-type: none !important;
    margin: 0;
    position: relative;
    text-align: center;
    width: 125px;
}

#xh_adminmenu li a:hover,
#xh_adminmenu li:hover {
    background-color: #444;
}

#xh_adminmenu a, 
#xh_adminmenu a:visited, 
#xh_adminmenu span {
    color: #ccc;
    display: inline-block;
    line-height: 36px;
    text-decoration: none;
}

#xh_adminmenu span {
    cursor: default;
}

#xh_adminmenu ul ul {
    left: 0;
    list-style-type: none !important;
    position: absolute;
    visibility: hidden;
    z-index: 9999;
}

#xh_adminmenu ul ul li {
    background-color: #555;
    line-height: 26px;
}

#xh_adminmenu ul ul li a:hover {
    background-color: #c50;
    width:100%;
}

#xh_adminmenu li:hover > ul {
    visibility: visible;
}


Посмотрите внимательно, в новом коде для файла core.css нет CSS3 Media Queries , он не нужен. Все слова в меню админки CMSimple_xh построены списком и обтекают слева с шириной в 100℅, это означает что слова в меню админа CMSimple_xh не спрячутся на небольшом экране мобильного устройства.

Добавить иконки для админки

На сайте  fontello Я выбрал понравившиеся мне веб-иконки, и абсолютно бесплатно скачал их себе на локальный компьютер. Дальше, Я распаковал файл fontello в корневой каталог CMSimple_xh в папке core. В распакованной каталоге, в папке fontello есть файл demo.html с выбранными мной иконками, для того что бы узнать код иконки нажимаем радио кнопку show codes .

После того как известно коды иконок, их можно добавлять к стилям в папке core/core.css. Но сначала, нужно в самом верху файла core.css подключить шрифт веб-иконок, вот так:



/*
 * Web-font fontello
 */
 
 @font-face {
	 font-family: 'fontello';
	 src: url('../fontello/font/fontello.eot?59037492');
	 src: url('../fontello/font/fontello.eot?59037492#iefix') format('embedded-opentype'),
		   url('../fontello/font/fontello.woff?59037492') format('woff'),
		   url('../fontello/font/fontello.ttf?59037492') format('truetype'),
		   url('../fontello/font/fontello.svg?59037492#fontello') format('svg');
	 font-weight: normal;
	 font-style: normal;
  }
    
  a:before, a:after, span:before {
        font-family: 'fontello';
        font-style: normal;
        font-weight: normal;
        speak: none;
   
        display: inline-block;
        text-decoration: none;
        margin-right: .2em;
        text-align: center;

        font-variant: normal;
        text-transform: none;
       
        line-height: 1em;

        margin-left: .2em;
  }


Как лучше всего добавить иконки к ссылкам, что бы они отображались даже в старом браузере IE8, Вы можете узнать на странице « CSS селектор для ссылок »

В нашем случае селекторы CSS для меню администратора, не все определяются по URL есть и по идентификатору:



/* стили для админки  */ 

[href*="&edit"]:before {
    content: '\e822';
}

[href*="&normal"]:before {
    content: '\e814';
}

ul ul [href*="&normal"]:before {
    content: '';
}

[href*="&xhpages"]:before {
    content: '\e825';
}

[href*="&normal&userfiles"]:before {
    content: '\e827';
}

[href*="&settings"]:before {
    content: '\e828';
}

[id*="xh_adminmenu"] span:before {
    content: '\e829';
}

[href*="logout"]:before {
    content: "\e817"
}


Дальше добавляем код по желанию, он запрещает отображать изображение в меню админки и добавляет веб-иконку для обновления, она появится только когда будет обновление для CMSimple_xh.



/* иконка для обновления  */ 
#xh_adminmenu li#editmenu_update, #xh_adminmenu li#xh_adminmenu_update {
    padding:0;
}

a[href*="hi_updatecheck&admin=plugin_main&normal"]:before {
    content: "\e81b";
    display: block;
    font-size: 28px;
    padding: 0;
    color:#aff;
}

[href*="hi_updatecheck"] img {
    display:none;
}


Добавить иконки для панели плагинов, можно с помощью следующих свойств CSS:



/* Значки для панели плагинов*/

.edit 
[href*="plugin_main"]:before {
   content: "\e828"
}

.edit 
[href*="plugin_config"]:before {
    content: '\e81d';
}

.edit
[href*="plugin_language"]:before {
    content: '\e81f';
} 

.edit
[href*="plugin_stylesheet"]:before {
    content: '\e82a';
}


Но это не всё, разработчики предоставляют администратору CMSimple_xh страницу помощи о плагине. Для ссылки помощи, иконку правильно добавить после слова Помощь .

Свойство CSS для ссылки помощь:



.edit 
[href*="/help/"]:after {
    content:'\e809';
    vertical-align: super;
}


И последнее, почти во всех шаблонах для CMSimple_xh есть ссылки Версия для печати , Карта сайта , Оправить письмо , для этих ссылок также можно добавить свойства CSS в файл со стилями, это может быть файл core.css или файл шаблона stylesheet.css:



[href*="print"]:before,
[href*="?&print&sitemap"]:before {
     content: "\e801";
     display: inline;
}

[href*="?&sitemap"]:before {
     content: "\e80a";
} 

[href^="mailto:"]:before,
[href$="mailform"]:before {
     content: '\e80c';	
}


Дерево папок в корневом каталоге CMSimple_xh должно выглядеть так:

Дерево файлов в CMSimple_xh после добавления веб-иконок
Дерево папок в корневом каталоге CMSimple_xh

Если Вы сделали всё правильно, Вы должны увидеть замечательную административную панель, адаптивную для всех размеров монитора.

Скачать готовый файл:
core.css

Заключение

В этой статье Я описал как определить свойства css для улучшения вида меню админки CMSimple_xh. Возможно в некоторых шаблонах, нужно будет изменить свойства CSS для лучшего отображения webfont icons. Файл core.css содержит много стилей. Вы можете сами усовершенствовать вид на свой вкус и цвет не только панель администратора но и содержание сайта.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>