Как скрыть надпись меню или заменить её на свою.

Здравствуйте, на форуме okis.ru часто интересуются как скрыть шапку меню, и если есть возможность изменить надпись на свою. Что бы было понятно о чем речь скриншот:

Шапка меню на сайте okis.ru 

Вот именно этим элементом шаблона мы и займемся сегодня.  

Для начала попробуем скрыть надпись "Меню" не трогая изображение шапки, делается это легко с помощью простого кода который нужно вставить в редактор css:

.art-vmenublockheader .t {
display:none;

Жмем кнопку "Обновить" и проверяем результат на сайте, ок надписи больше нет. Теперь попробуем скрыть всю шапку меню, вместе с фоновым изображением. В этом нам поможет следующий код css:

.art-vmenublockheader {
display:none;

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

Теперь поговорим о том как заменить надпись в шапке меню на свою, к примеру не меню а "Категории". Напрямую доступа к шаблону мы не имеем и изменить текст шапки меню не можем (по крайней мере я такого способа пока еще не знаю), поэтому пойдем другим путем и изменим фон шапки меню на свое изображение с нужной надписью. Для этого необходимо в доступном вам графическом редакторе создать изображение с текстом.

Но перед тем как создавать изображение необходимо выяснить его размеры, а так как в шаблоне который использую я (шаблон #309) ширина сайдбара указана в процентах и высчитать реальный размер шапки меню сложно, я воспользовался встроенной в программу Screen Capture линейкой и измерил ширину заголовка. Высота элемента указана и ее я определил с помощью встроенного в браузер инспектора элементов. В итоге у меня получились размеры 187х33 пикселя, и именно таких размеров изображение я и нарисовал в редакторе.

заголовок меню

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

.art-vmenublockheader, .art-vmenublockheader .l, .art-vmenublockheader .r {
background-image:url(ссылка на изображение);
height: 33px;
width: 187px;
}

.art-vmenublockheader .t {
display:none;
}  

Закрепляем результат и смотрим на сайте что получилось:

Замена заголовка менюшки 

Как видите у меня все получилось, и заголовок меню выглядит как нужно мне.

Спасибо за внимание, если все же что то непонятно спрашивайте в комментариях, буду рад помочь.