Все о создании и продвижении сайтов, а также заработке в интернете.

CSS-класс ссылки и CSS-класс страницы у Joomla

CSS-класс ссылки и CSS-класс страницы у Joomla
Опубликовано в Joomla
/
27 Дек 2014
/

Доброго времени суток читатели блога No Zombies Allowed. Мне частенько задают вопросы «Как изменить только один пункт меню?» и «Хочу чтоб на этой конкретной странице был другой фон.» и подобные. Этому и посвящена эта небольшая статья.

CSS-класс ссылки Joomla

Изменение CSS-класса ссылки на Joomla позволяет задать свой CSS для конкретно одного пункта меню. Т.е. Если вы хотите каким-то образом выделить один из пунктов меню, то это решение для вас. Вам нужно зайти в админку, далее: меню->название меню->пункт меню. Например: меню->Главное меню->Наши услуги.

CSS класс ссылки Joomla

Справа вам нужно открыть «параметры отображения ссылки» и там вы увидите 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-класса ссылки зайти в админку, далее: меню->название меню->пункт меню.

 

CSS-класс страницы Joomla

Теперь зайдите справа в «параметры отображения страницы» и задайте какой-нибудь класс. Скажем 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;
}

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд Оценка: 4,00 из 5 (голосов: 10)
Loading...Loading...

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

  • S Sh

    Не совсем понятно. Дополнительный класс работает. Но он просто переопределяет параметры класса причем для всех страниц. Если имеется один файл *.css и в нем есть запись .logo то .second, .logo просто переопределит параметры для всех страниц а не только для которой назначен класс .second. Как сделать что бы класс определялся только для одной страницы?

    • Михаил

      Если у вас написано в CSS

      .logo .second {
      width:50px;
      }

      То это изменит ширину блока с логотипом img class=»logo second»
      Вероятнее всего вы поменяли css класс у модуля. Вам нужно зайти в менеджер меню, выбрать пункт, который публикует нужную страницу и задать css класс для страницы, например second-page.
      CSS-класс страницы Joomla
      Тогда у ВСЕЙ страницы, что привязана к пункту меню будет новый класс second-page, который задается боди (body class=»second-page»). Теперь, для того, чтобы изменить CSS на этой страницe у любого элемента нужно сделать так:

      .second-page .любой-элемент {
      width:50px;
      }
      /*Т.е. в нашем случае это*/
      .second-page .logo {
      width:50px;
      }

  • Fikus Benjamin

    Джумла 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 (БЕЗ точки).
      CSS-класс страницы Joomla
      У вас появится дополнительный класс на всем боди, т.е. будет

      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-класс страницы.

  • Роман

    К сожалению трюк с меню не сработал. Добавил свой класс redmenu. Цель — изменить цвет одного пункта меню. Сделал в css-файле вот так:

    }
    .horiznav ul li a,
    .horiznav ul li a:visited {
    color: #efefef;
    background: url(../images/orange/topmenu/normal_r.png) no-repeat right center;
    }
    .redmenu .horiznav ul li a,
    .redmenu .horiznav ul li a:visited {
    color: #ff0000;
    }

    В Firebug видно, что класс ссылке присвоился:
    Акции
    Другие используемые здесь классы цвета не устанавливают.

    Итог: цвет пункта меню не изменился.

    • Михаил

      Класс ссылки, скорее всего, будет задан

      
      

      Соответственно, вам нужно задать стиль подобным способом:
      .horiznav ul li a.redmenu,
      .horiznav ul li a.redmenu:visited {
      color: #ff0000;
      }

      • Роман

        Действительно, такая конструкция сработала! Спасибо за разъяснение!

        • Михаил

          Пожалуйста, Роман. Рад, что все получилось!

Оставить комментарий

Войти с помощью: