Доброго времени суток читатели блога No Zombies Allowed. Мне частенько задают вопросы «Как изменить только один пункт меню?» и «Хочу чтоб на этой конкретной странице был другой фон.» и подобные. Этому и посвящена эта небольшая статья.
CSS-класс ссылки Joomla
Изменение CSS-класса ссылки на Joomla позволяет задать свой CSS для конкретно одного пункта меню. Т.е. Если вы хотите каким-то образом выделить один из пунктов меню, то это решение для вас. Вам нужно зайти в админку, далее: меню->название меню->пункт меню. Например: меню->Главное меню->Наши услуги.
Справа вам нужно открыть «параметры отображения ссылки» и там вы увидите CSS-класс ссылки. Вам нужно придумать название, которое не встречалось в вашем шаблоне Joomla прежде. Скажем newlink и написать его в поле CSS-класс ссылки.
CSS-класс ссылке вы задали, теперь осталось лишь прописать CSS вашему пункту меню. Вам нужно выяснить где находится файл со стилями CSS вашего меню. Как это сделать быстро и легко я писал в инструкции к firebug (инспектору). Осталось только открыть файл со стилями и добавить их.
Если у вас было к примеру:
.uk-navbar-nav > li > a {
padding: 0px 40px;
line-height: 50px;
color: #444444;
background: #fff;
}
Вам нужно добавить ваш новый стиль перед старым и дополнить вашим:
.uk-navbar-nav > li > a {
padding: 0px 40px;
line-height: 50px;
color: #444444;
background: #fff;
}
.newlink .uk-navbar-nav > li > a {
background:red;
color:#fff
}
Только не удаляйте старый стиль! Просто добавьте ваш новый стиль чуть ниже старого. Так, в примере, мы изменили цвет одного пункта меню на красный.
CSS-класс страницы Joomla
CSS-класс страницы позволяет изменить стиль конкретно одной страницы, привязанной к пункту меню. Но, если у вас пунктом меню выводится скажем блог категорий, а из него люди попадают на материалы, то все материалы буду изменены точно так же, как и страница категории. Чтобы изменить CSS-класс ТОЛЬКО страницы категории, вам придется создавать пункт меню для каждого материала из этой категории.
Чтобы изменить CSS-класс страницы вам нужно точно так же, как и при изменении CSS-класса ссылки зайти в админку, далее: меню->название меню->пункт меню.
Теперь зайдите справа в «параметры отображения страницы» и задайте какой-нибудь класс. Скажем newpage.
Далее нам нужно найти файл css и немного изменить его, как найти файл css, повторюсь, я писал в инструкции к firebug (инспектору).
Теперь у вашей страницы есть дополнительный класс newpage. Вы можете изменить любой цвет, фон, размер, расположение — вообщем все, что пожелаете и что возможно сделать на CSS. Давайте на примере изменим фон страницы.
Это наш исходный CSS для body
body {
background:#fff;
color:#444;
font-size:16px;
}
Давайте изменим цвет фона страницы на серый
body {
background:#fff;
color:#444;
font-size:16px;
}
.newpage body {
background:#ddd;
}
Обратите внимание, что при помощи вашего класса страницы можете менять не только body, но и все, что есть на странице, достаточно лишь поставить ваш новый класс перед старым. Например изменить цвет какого-нибудь блока.
.block div {
background:#fff;
}
.newpage .block div{
background:#ddd;
}
Спасибо за то, что читаете мой блог, если у вас возникают какие-то вопросы, задавайте, я с радостью на них отвечу.
Оценка: 
Loading...
Не совсем понятно. Дополнительный класс работает. Но он просто переопределяет параметры класса причем для всех страниц. Если имеется один файл *.css и в нем есть запись .logo то .second, .logo просто переопределит параметры для всех страниц а не только для которой назначен класс .second. Как сделать что бы класс определялся только для одной страницы?
Если у вас написано в CSS
.logo .second {
width:50px;
}
То это изменит ширину блока с логотипом img class=»logo second»
Вероятнее всего вы поменяли css класс у модуля. Вам нужно зайти в менеджер меню, выбрать пункт, который публикует нужную страницу и задать css класс для страницы, например second-page.
Тогда у ВСЕЙ страницы, что привязана к пункту меню будет новый класс second-page, который задается боди (body class=»second-page»). Теперь, для того, чтобы изменить CSS на этой страницe у любого элемента нужно сделать так:
.second-page .любой-элемент {
width:50px;
}
/*Т.е. в нашем случае это*/
.second-page .logo {
width:50px;
}
Джумла 3.4.8
Попробовал изменить данным методом бэкграунд для пункта меню.Не работает.Можеь какие-то нюансы есть?
Покажите ту часть CSS, где вы пытались изменить бэкргаунд у пункта меню и дайте ссылку на сайт — я посмотрю в чем проблема.
Не работает. Resurs.kharkov.ua … Как только не крутил и не вертел.. Автору: Я думаю что логично было бы написать что нужно прописать в самый строке CSS : .newlink правильно ?
.main {
min-height: 100%;
background : url(«../images/top_fon.jpg») center top no-repeat;
}
.newlink .main {
min-height: 100%;
background : url(«../images/top_fon2.jpg») center top no-repeat;
}
это кусок CSS а в строке CSS я прописываю: .newlink
Разберем вопрос конкретно на вашем примере сайта Resurs.kharkov.ua.
Я так понимаю необходимо изменить фон на какой-то определенной странице. Вам нужно вначале зайти и добавить новый CSS-класс на страницу. Необходимо открыть пункт меню соответствующей страницы, а затем вписать CSS-класс страницы, например newlink (БЕЗ точки).
У вас появится дополнительный класс на всем боди, т.е. будет
body class=»ваши-старые-классы-если-были newlink»
Далее, вы добавляете в CSS, строчки из вашего комментария — с ними все ок.
Я думаю мне стоит расписать все по пунктам. Поскольку походу не я один столкнулся с неприятностью:
1) В файл CSS Я добавил вот такой код ( Расширения=> Менеджер шаблонов => (Название вашего шаблона)=>Изменить css/template.css )
.newlink .main {
min-height: 100%;
background : url(«../images/top_fon2.jpg») center top no-repeat;
}
2. Выбираю пункт «Меню»=> «Бетон» ( в моем случае ) , в открывшемся меняю Я открываю «ползунок с настройками «под названием «Параметры отображения страницы » и в поле «CSS Класс страницы» я ввожу newlink ( без сяких там точек, кавычек, точек с запятой)
Ничего не работает … может я что-то упустил ?? Подскажите, весь интернет заполнен не полным разъяснениям.. я уже съел 4 таблетки Барбавала.
Я посмотрел страницу про бетон resurs.kharkov.ua/kupiti-beton-v-harikove.html
На ней отсутствует класс newlink у body, т.е. возможно проблема в том, что он просто не добавляется к body, как обычно происходит.
PS. залез на форум, там описано решение. Необходимо внести правки в шаблон, если к боди не добавляется css-класс страницы.