Основной курс по Joomla
0 Пользователей и 1 Гость просматривают эту тему.
  • 14 Ответов
  • 803 Просмотров
*

zeus07

  • Завсегдатай
  • *****
  • 638
  • 8
Здравствуйте!

Верстаю сайт. Суть в том, что по макету у каждого модуля сверху и снизу имеются орнаменты. Сначала хотел их просто впилить в шаблон, но не хочется перегружать шаблон кодом. Решил, что лучше изменить файл modules.php.

В него хочу вставить 2 дива, и для каждого из них прописать фоновое изображения. Один div будет отображаться над модулем, другой под мудулем.
Как правильно и после какой строки нужно вставить эти дивы? В PHP разбираюсь на уровне создания шаблонов всего лишь.

Скриншот дизайна во вложении.

Заранее благодарен за помощь.
*

shurikkan

  • Осваиваюсь на форуме
  • ***
  • 46
  • 0
  • Joomla-support.ru :: Shurikkan
Подобные вещи делаются с помощью псевдоэлеменов CSS before и after.
А modules.php создан совсем для других целей. Да и, по-моему, теперь необходимость его присутствия в приложении под вопросом...

Например:
Код
<div class="module">
    <div class="title">...</div>
    <div class="content">...</div>
</div>

Добавляем псевдо-блоки ДО и ПОСЛЕ блока с модулем:
Код
.module {
    margin: 30px 0;
    position: relative;
    ...
}
.module:before {
    display: block;
    position: absolute;
    top: -30px;
    left: 0px;
    width: {n}; /* задаёшь нужную ширину */
    background: url(../..) no-repeat 0 0;
}
.module:after {
    display: block;
    position: absolute;
    bottom: -30px;
    left: 0px;
    width: {n}; /* задаёшь нужную ширину */
    background: url(../..) no-repeat 0 0;
}

Красивый и кроссбраузерный способ добавления элементов дизайна (и не только) на страницу.

Подробнее о псевдоэлементах before и after можно почитать здесь:
http://htmlbook.ru/css/before
http://htmlbook.ru/css/after
« Последнее редактирование: 02.04.2015, 20:12:44 от shurikkan »
Разработка интернет-магазинов на базе Virtuemart 2.0
Skype: Shurikkan
*

zeus07

  • Завсегдатай
  • *****
  • 638
  • 8
Честно говоря, думал об этом, и почему-то решил, что через шаблон модуля будет удобнее, видимо ошибся
*

zomby6888

  • Живу я здесь
  • ******
  • 1484
  • 167
Подобные вещи делаются с помощью псевдоэлеменов CSS before и after.

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

А modules.php создан совсем для других целей

Для каких таких целей?

Да и, по-моему, теперь необходимость его присутствия в приложении под вопросом...

Даже если так, подскажите же тогда как же мне оборачивать отдельные модули, выводимые в определенных позициях в сложную HTML разметку?

Пример добавления обертки через modules.php
Код: php
...
function modChrome_mychrom($module, &$params, &$attribs)
{
    if ($module->showtitle)  {
        echo '<h2>'.$module->title.'</h2>';
    }
    if ($module->content)  {
        echo '<div class="top-block"></div><div class="content">'. $module->content.'</div><div class="bottom-block"></div>';
    }
}
...
Я добавил метод с именем modChrome_mychrom в modules.php, котрый добавляет произвольные блоки снизу и сверху модуля. Все что остается сделать это в шаблоне прописать стиль style="mychrom" в нужной позиции:

<jdoc:include type="modules" name="yourposition" style="mychrom" />
интернет-блог: http://websiteprog.ru
*

zeus07

  • Завсегдатай
  • *****
  • 638
  • 8
Совершенно необязательно. modChrom_ методы в modules.php как раз таки служат оберткой для модулей, мне так проще добавить пару лишних блоков в шаблон чем морочится с псевдоэлементами. 

Для каких таких целей?

Даже если так, подскажите же тогда как же мне оборачивать отдельные модули, выводимые в определенных позициях в сложную HTML разметку?

Пример добавления обертки через modules.php
Код: php
...
function modChrome_mychrom($module, &$params, &$attribs)
{
    if ($module->showtitle)  {
        echo '<h2>'.$module->title.'</h2>';
    }
    if ($module->content)  {
        echo '<div class="top-block"></div><div class="content">'. $module->content.'</div><div class="bottom-block"></div>';
    }
}
...
Я добавил метод с именем modChrome_mychrom в modules.php, котрый добавляет произвольные блоки снизу и сверху модуля. Все что остается сделать это в шаблоне прописать стиль style="mychrom" в нужной позиции:

<jdoc:include type="modules" name="yourposition" style="mychrom" />

Спасибо за подробный инструктаж, обязательно воспользуюсь. Как по мне, это проще, чем с псевдоклассами возиться.
*

zeus07

  • Завсегдатай
  • *****
  • 638
  • 8
Сделал, в папке с шаблоном сделал папку HTML, и туда закинул этот файл modules.php.

В итоге такая ошибка:
Код
Fatal error: Cannot redeclare modChrome_none() (previously declared in /home/artcolor/artcolorit.com/georg/templates/system/html/modules.php:15) in /home/artcolor/artcolorit.com/georg/templates/georg/html/modules.php on line 18

В чём ошибка?
*

zomby6888

  • Живу я здесь
  • ******
  • 1484
  • 167
Две функции с одинаковыми названиями в одной области видимости. Переименуйте modChrome_none в в какой нибудь другой метод с префиксом modChrome_
« Последнее редактирование: 02.04.2015, 22:07:44 от zomby6888 »
интернет-блог: http://websiteprog.ru
*

zeus07

  • Завсегдатай
  • *****
  • 638
  • 8
Два метода с одинаковыми названиями в одной области видимости. Переименуйте modChrome_none в в какой нибудь другой метод с префиксом modChrome_

Только что попробовал, но по каждому методу такую ошибку выдаёт. Может стоит свой метод перенести в самое начало просто? Или как лучше сделать?
*

zomby6888

  • Живу я здесь
  • ******
  • 1484
  • 167
Убрать все остальные, оставить только свой, они уже определены где то раз ругается на них
интернет-блог: http://websiteprog.ru
*

zeus07

  • Завсегдатай
  • *****
  • 638
  • 8
Убрать все остальные, оставить только свой, они уже определены где то раз ругается на них

В шаблоне system они определены, поэтому и ругается видимо
*

zomby6888

  • Живу я здесь
  • ******
  • 1484
  • 167
Ну, да modules.php из шаблона system подключается в не зависимости от выбранного шаблона
интернет-блог: http://websiteprog.ru
*

zeus07

  • Завсегдатай
  • *****
  • 638
  • 8
Оставил файл в шаблоне system, прописал CSS в своём шаблоне, но что-то не отображается ничего. Style в шаблоне прописал для позиции left и right.

Ссылка: http://georg.artcolorit.com/

UPD. Поправил высоту у блоков, и всё отобразилось.

Вам большое спасибо и плюсик в карму за помощь.
*

shurikkan

  • Осваиваюсь на форуме
  • ***
  • 46
  • 0
  • Joomla-support.ru :: Shurikkan
Совершенно необязательно. modChrom_ методы в modules.php как раз таки служат оберткой для модулей, мне так проще добавить пару лишних блоков в шаблон чем морочится с псевдоэлементами. 
...
Интересное мировоззрение.
И правда - кому нужен "чистый" код.
Разработка интернет-магазинов на базе Virtuemart 2.0
Skype: Shurikkan
*

zomby6888

  • Живу я здесь
  • ******
  • 1484
  • 167
Видимо понятие "чистого кода" для нас несколько отличаются. Я уж не говорю что не все браузеры корректно поддерживают псевдоэлементы, так как сам не оглядываюсь на подобные вещи.
интернет-блог: http://websiteprog.ru
*

shurikkan

  • Осваиваюсь на форуме
  • ***
  • 46
  • 0
  • Joomla-support.ru :: Shurikkan
Я уж не говорю что не все браузеры корректно поддерживают псевдоэлементы.
Before и After близки к абсолютной кроссбраузерности. Я же дал ссылки на htmlbook :)
Я, как параноидальный консерватор, очень долго не хотел переходить на верстку с использованием псевдоклассов... Но пора уже. IE7 умер.
Разработка интернет-магазинов на базе Virtuemart 2.0
Skype: Shurikkan