[FAQ] CSS-класс страницы

  • 87 Ответов
  • 41883 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн Orion

[FAQ] CSS-класс страницы
« : 26.02.2012, 12:21:25 »
При создании пунктов меню в Joomla 2.5 в разделе настроек присутствует раздел "Параметры отображения страницы". В этом разделе есть поле, которое называется "CSS-класс страницы", с помощью которого, судя по описанию, можно изменить внешний вид ТОЛЬКО данной страницы. Только вот, как это сделать? Что должно быть указано в этом поле?
В ранних версиях Joomla, если не ошибаюсь, присутствовало большое поле, в которое можно было вставить CSS-код, изменявший вид страницы. А как в новой версии?
« Последнее редактирование: 29.08.2013, 12:11:33 от b2z »

*

Оффлайн Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Re: CSS-класс страницы
« Ответ #1 : 26.02.2012, 12:37:17 »
<div class="item-page<?php echo $this->pageclass_sfx?>">...в самом начале файла components\com_content\views\article\tmpl\default.php
Посмотрите, чтобы в templates\шаблон\html\com_content\article\default.php тоже так было. Дальше просто. Пишете класс "-krevedki", и можете индивидуально оформлять CSS по селектору .item-page-krevedki
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Оффлайн Orion

Re: CSS-класс страницы
« Ответ #2 : 26.02.2012, 13:32:03 »
Спасибо большое!

Файлы default.php проверил: во втором файле (в файле шаблона) в тексте присутствует дополнительный символ ";" перед вторым знаком вопроса:
<div class="com-content <?php echo $this->pageclass_sfx?>">Не знаю, имеет ли это значение?

И еще, для уточнения: новый класс записывается как раз в то самое поле CSS-класс страницы, да? А где описать сам класс, в каком файле CSS?

*

Оффлайн danik.html

Re: CSS-класс страницы
« Ответ #3 : 26.02.2012, 13:39:59 »
Вобще, этот суффикс можно вызывать в шаблоне и приклеивать например к тегу body, получаем больше возможностей
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

*

Оффлайн Efanych

Re: CSS-класс страницы
« Ответ #4 : 26.02.2012, 13:54:09 »
Вобще, этот суффикс можно вызывать в шаблоне и приклеивать например к тегу body, получаем больше возможностей
А как его можна в шаблоне вызвать?
Создание сайтов, шаблонов, помощь в решении проблем.

*

Оффлайн danik.html

Re: CSS-класс страницы
« Ответ #5 : 26.02.2012, 16:35:50 »
А как его можна в шаблоне вызвать?
А вот так вот:

Код: (php) [Выделить]
<?php 
  $pageClassSuffix 
JSite::getMenu()->getActive()? JSite::getMenu()->getActive()->params->get('pageclass_sfx''-default') : '-default';
?>


Кстати, если в качестве суффикса указать слово с пробелом впереди, то получим второй класс:
Код: (php) [Выделить]
$pageClassSuffix = ' about-me';
Код: (html4strict) [Выделить]
<div class="page about-me">...</div>
Код: (css) [Выделить]
.page{
border: 1px solid gray;
}
.about-me{
background: url(../images/about-me.jpg) no-repeat;
}
Иногда удобно
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

*

Оффлайн Efanych

Re: CSS-класс страницы
« Ответ #6 : 26.02.2012, 18:58:19 »
Полезная фишка. Спасибо.
Создание сайтов, шаблонов, помощь в решении проблем.

*

Оффлайн Algemir

Re: CSS-класс страницы
« Ответ #7 : 01.03.2012, 19:07:28 »
А не будет ли господин столь великодушен, что объяснит более на пальцах)
Делаю свой шаблон с нуля. Но в PHP ничего не смыслю.

Какие строчки и куда именно нужно вставить что бы класс прописывался в body?

*

Оффлайн danik.html

Re: CSS-класс страницы
« Ответ #8 : 01.03.2012, 22:35:20 »
Код: (php) [Выделить]
<?php 
  $pageClassSuffix 
JSite::getMenu()->getActive()? JSite::getMenu()->getActive()->params->get('pageclass_sfx''-default') : '-default';
?>

<body class="page<?php echo $pageClassSuffix ?>">
...
</body>
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

*

Оффлайн Algemir

Re: CSS-класс страницы
« Ответ #9 : 02.03.2012, 13:22:15 »
Спасибо!
Оказывается я и в первый раз почти угадал)

*

Оффлайн Ohar

Re: CSS-класс страницы
« Ответ #10 : 17.03.2012, 23:02:39 »
Ох, а я вот такую штуку писал:
Код: (php-brief) [Выделить]
<?php //Определение ID для <body>
if (strpos($_SERVER['REQUEST_URI'],'index.php')){
$body_id 'index_page';
}
elseif (strpos($_SERVER['REQUEST_URI'],'about')){
$body_id 'about_page';
}
elseif (strpos($_SERVER['REQUEST_URI'],'projects')){
$body_id 'projects_page';
}
elseif (strpos($_SERVER['REQUEST_URI'],'faq')){
$body_id 'faq_page';
}
else {
$body_id 'inner_page';
}
?>

<body id="<?php echo $body_id;?>">

*

Оффлайн danik.html

Re: CSS-класс страницы
« Ответ #11 : 10.05.2012, 05:24:45 »
Ох, а я вот такую штуку писал:
Тогда уж лучше брать из активного пункта меню алиас, и использовать его в качестве класса страницы
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: CSS-класс страницы
« Ответ #12 : 11.05.2012, 04:18:39 »
Код: (php-brief) [Выделить]
<body id="<?php echo JMenuSite::getInstance('site')->getActive()->alias?>">из совета danik.html   ^-^

*

Оффлайн xabbep

Re: CSS-класс страницы
« Ответ #13 : 11.05.2012, 05:19:27 »
<div class="item-page<?php echo $this->pageclass_sfx?>">...в самом начале файла components\com_content\views\article\tmpl\default.php
Посмотрите, чтобы в templates\шаблон\html\com_content\article\default.php тоже так было. Дальше просто. Пишете класс "-krevedki", и можете индивидуально оформлять CSS по селектору .item-page-krevedki

А если у меня нет файла default.php по пути templates\шаблон\html\com_content\article\ как быть ? J2.5, нужно изменить фон на нескольких страницах, а как это сделать не могу понять.

*

Оффлайн danik.html

Re: CSS-класс страницы
« Ответ #14 : 11.05.2012, 05:51:24 »
Значит этот файл нужно скопировать из components\com_content\views\article\tmpl\
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

*

Оффлайн xabbep

Re: CSS-класс страницы
« Ответ #15 : 11.05.2012, 19:49:31 »
Значит этот файл нужно скопировать из components\com_content\views\article\tmpl\

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

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: CSS-класс страницы
« Ответ #16 : 11.05.2012, 20:04:53 »
Я ничего не могу понять, скопировал этот файл, добавил недостающий путь. Смысл этого файла, если в шаблоне не был предусмотрен ни путь такой, ни файл, как и чем он будет обрабатываться? Он лежит там мёртвым грузом да и всё. Может кто-то "на пальцах" объяснить по-шагово ?
Переименуйте файл myarticle.php и в опциях материала Article Options нужно выбрать альтернативный шаблон Alternative Layout
Выберите свой файл. В нем и пропишите классы какие вам нужны. Так для разных материалов вы можете задавать свои шаблоны

*

Оффлайн xabbep

Re: CSS-класс страницы
« Ответ #17 : 11.05.2012, 20:13:51 »
Переименуйте файл myarticle.php и в опциях материала Article Options нужно выбрать альтернативный шаблон Alternative Layout
Выберите свой файл. В нем и пропишите классы какие вам нужны. Так для разных материалов вы можете задавать свои шаблоны

Будете смеяться, наверное, но у меня такого файла тоже нет((

*

Оффлайн xabbep

Re: CSS-класс страницы
« Ответ #18 : 11.05.2012, 20:17:08 »
может кто-то за небольшое вознаграждение помочь ? Тема называется veniyard1.7
« Последнее редактирование: 11.05.2012, 20:25:39 от xabbep »

*

Оффлайн danik.html

Re: CSS-класс страницы
« Ответ #19 : 12.05.2012, 09:10:26 »
Я ничего не могу понять, скопировал этот файл, добавил недостающий путь. Смысл этого файла, если в шаблоне не был предусмотрен ни путь такой, ни файл, как и чем он будет обрабатываться? Он лежит там мёртвым грузом да и всё. Может кто-то "на пальцах" объяснить по-шагово ?
Он не мертвым грузом лежит, его подхватит Joomla. Это механизм "переопределения" или "перекрытия" (override) макета (layout). Не знаю где лучше об этом почитать, но можно тут например.
Будете смеяться, наверное, но у меня такого файла тоже нет((
Смеяться не будем, ибо вы неправильно поняли реплику. Нужно переименовать default.php в myarticle.php
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

*

Оффлайн xabbep

Re: CSS-класс страницы
« Ответ #20 : 12.05.2012, 16:53:34 »
Он не мертвым грузом лежит, его подхватит Joomla. Это механизм "переопределения" или "перекрытия" (override) макета (layout). Не знаю где лучше об этом почитать, но можно тут например.Смеяться не будем, ибо вы неправильно поняли реплику. Нужно переименовать default.php в myarticle.php

переименовал файл в myarticle.php а как теперь указать, что мне нужен в определённых пунктах меню другой фон ?

*

Оффлайн art-apple

Re: CSS-класс страницы
« Ответ #21 : 08.10.2012, 21:58:45 »
А как его можна в шаблоне вызвать?
Еще можно вот так
Добавляем в шаблон
<?php
$menuitemid 
JRequest::getInt'Itemid' ); 
if (
$menuitemid) {
    
$menu JSite::getMenu();
    
$bodysuffix $menu->getParams$menuitemid )->get('pageclass_sfx');
}
?>

теперь можем использовать класс
<body class="<?php echo $bodysuffix?>">

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: CSS-класс страницы
« Ответ #22 : 09.10.2012, 00:59:13 »
А если класса нет будем видеть ошибку. Копируем чужие ошибки так это называется

*

Оффлайн art-apple

Re: CSS-класс страницы
« Ответ #23 : 09.10.2012, 06:46:25 »
А если класса нет будем видеть ошибку. Копируем чужие ошибки так это называется
Не будет ошибки

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: CSS-класс страницы
« Ответ #24 : 09.10.2012, 07:00:56 »
Код: (html4strict) [Выделить]
<body class=""> art-apple Это не ошибка по твоему. Из твоего примера где $bodysuffix вернет пустой результат на всех страницах где класс не определен. Глянь выше в постах на примерах. Где при пустых значениях класс подставляется.
Код: (php-brief) [Выделить]
<body class="mybd<?php echo $bodysuffix?>"> //Видиш разницу

*

Оффлайн art-apple

Re: CSS-класс страницы
« Ответ #25 : 09.10.2012, 09:34:20 »
<body class="">Еще раз повторяю, это не является ошибкой! Если вы намекаете на валидность, то подучите HTML. Где он не определен там его и не должно быть, это логично. И к тому же никто не мешает вам дописать условие.

*

Оффлайн Shustry

  • *****
  • 6426
  • [+]736 / [-]3
  • Рисую дизайны
    • Просмотр профиля
    • Примеры работ
Re: CSS-класс страницы
« Ответ #26 : 09.10.2012, 14:00:15 »
art-apple, пустой аттрибут - не ошибка? О_o. Мы с валидатором и Poznakomlus считаем, что да.
Бесплатно консультирую по дизайну и вёрстке (только в icq и личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: CSS-класс страницы
« Ответ #27 : 09.10.2012, 14:17:22 »
http://bytes.com/topic/html-css/answers/435777-class
Еще немножко ошибок
art-apple
<body class="">Еще раз повторяю, это не является ошибкой! Если вы намекаете на валидность, то подучите HTML. Где он не определен там его и не должно быть, это логично. И к тому же никто не мешает вам дописать условие.
Не старайтесь мне говорить, что мне делать и я не скажу куда вам идти.

*

Оффлайн art-apple

Re: CSS-класс страницы
« Ответ #28 : 09.10.2012, 17:03:15 »
art-apple, пустой аттрибут - не ошибка? О_o. Мы с валидатором и Poznakomlus считаем, что да.
Да? а вот теперь проверьте валидатором (http://validator.w3.org) вот такую разметку с пустым атрибутом, я сделал это только что
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body class="">

<div id="wrapper">

<header id="header">
<strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
</header><!-- #header-->

<div id="content">
<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
</div><!-- #content-->

</div><!-- #wrapper -->

<footer id="footer">
<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
</footer><!-- #footer -->

</body>
</html>

*

Оффлайн Fedor Vlasenko

  • ********
  • 3799
  • [+]704 / [-]6
  • Все начинается с Value
    • Просмотр профиля
    • Создание сайтов, поддержка сайтов
Re: CSS-класс страницы
« Ответ #29 : 09.10.2012, 17:19:25 »
art-apple Ну чего вы так уперлись. Еше раз ошибка это. Поменяйте doctype на другой сразу увидите.