Question

Такой вопрос!
    У меня на сайте вертикальное меню категорий разделов выглядит как список текстовых ссылок (стандартный вид),
    хотелось бы чтобы он выглядел в форме кнопок.

    Как это сделать с применением CSS - без html
    шаблон стандартный 1088

Answer 1

Как пример, перейдите в Панель управления - Главная - Дизайн - Управление дизайном(CSS), далее в самый низ сохраните стили:

.catDescr {display:none;}

.catNumData {display:none;}

.catName {

text-align: center;

font-size: 11px;

padding: 5px 10px 6px;

margin: 2px 0px 0px 2px;

color: #fff !important;

display: block;

text-decoration: none;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

border-bottom: 1px solid rgba(0,0,0,0.25);

border-radius: 3px;

background: rgb(39, 158, 95);

}

 

.catNameActive {

 text-align: center;

font-size: 11px;

font-style: italic;

color: #807B7B !important; 

}

a.catNameActive {

text-align: center;

font-size: 11px;

padding: 5px 10px 6px;

margin: 2px 0px 0px 2px;

color: #fff !important;

display: block;

text-decoration: none;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

border-bottom: 1px solid rgba(0,0,0,0.25);

border-radius: 3px;

background: rgb(214, 59, 20);

}

 

После обновите страницу с категориями и посмотрите изменения.

Comments

Ну практически то что нужно, кроме цвета и размера))

а можно ли привязать к этому свою картинку, чтобы кнопка отображалась как картинка?

---

Да, можно.
Находим в стилях - background: rgb(214, 59, 20); и background: rgb(39, 158, 95);
Далее заменяем на -  background: url(ссылка на изображение кнопки)no-repeat;

Вот и все!

---

Спасибо за помощь!

---

А как в этом коде регулировать размер шрифта?

---

Найдите параметр - font-size: 11px; в нем увеличиваем параметр 11 на нужный вам размер.

---

я тоже так хотел меню сделать только у меня дизайн повело растенуло http://doskaobjavlenij.com/. и еще 1 вопросик как удалить категории и под категории  в центре стоят. оставить только там надо( Доска объявлений (238)    [ Добавить объявление ])а категории я перенису в первый контейнер. за рание спасибо чтото странное происходит яндекс метрика гуляет по всему сайту после обновления страницы или перехода по сайты метрика появляется в разных мистах .тоесть 2 яндекс метрика

---

>> я тоже так хотел меню сделать только у меня дизайн повело растенуло
>  Чтобы категории не растягивались на всю страницу нужно задать фикс размер для фона кнопки, для класса .catName {width:180px;} между фигурных кавычек дописать ширину -180px
>>и еще 1 вопросик как удалить категории и под категории  в центре стоят.
> Аналогично для класса .catName задать параметр -  text-align: left; вместо  text-align: center;
>> оставить только там надо( Доска объявлений (238)
> c стилей удалить - .catNumData {display:none;} Если таковые стили имеются
>> что-то странное происходит яндекс метрика гуляет по всему сайту после обновления страницы или перехода по сайты метрика появляется в разных местах .то есть 2 яндекс метрика
> Как я вижу вы ранее вручную добавили счетчик с - https://metrika.yandex.ua/list/ и дополнительно в Панели управления - Раскрутка сайта - Яндекс материка вы настроили отображение доп счетчика.
Чтобы убрать второй, далее в настройках убрать отметку с пункта - Автоматически добавлять код счётчика на страницы сайта [?]

---

куда именно добавить я добавил в 3 строку width:180px;}  . только дизайн также поплыл и почемуто дизайн стал старый .потом я поставил галочку Обновить текущий дизайн во всех используемых модулях. все вернулось на свои места. это вопще нормально? я ж вроде дизайн другой поставил и галочку эту раньше тож ставил

---

Восстанавливайте стандартный шаблон.
Перейдите в общие настройки выберите заново шаблон 1064 так как у вас сейчас там стоит 844 и соответственно при отметке пункта обновить дизайн во всех шаблонах вам восстанавливается старый 844.

Выберите 1064 нажмите сохранить, после заново отметьте пункт обновить дизайн во всех шаблонах, после перейдите в таблицу стилей CSS и в правом верхнем углу нажмите на кнопку восстановить стандартный шаблон. Все!

---

я вроде уже восстанавливал.пропишите пожалуйста как именно по шагово.

---

ответ немного выше

---

а теперь просто выбираю нужный шаблон и все готово? или делаю также как в инструкции выше?

---

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

---

спасибо большое и меню заработало как у вас выше прописано даже не пришлось  нечего добавлять. еще вопросик а как теперь кнопочку заделать также (добавление материалов )и еще цвет фона меню не могу найти(как можно цвет или фон кнопок сделать разный для каждой кнопки