Представляю вашему вниманию простой, но в то же время универсальный способ вывода материала модулей в две колонки с помощью CSS и jQuery. Использование данного метода не требует модификации PHP файлов и приемлем для всех модулей системы как стандартных так и не стандартных.
Пример использования в модуле новостей
Реализация для версии SLAED CMS 5.* Pro
Открываем файл: plugins/jquery/jquery.slaed.js
В нижней части вставляем:
Открываем файл: templates/celestial/css/main.css
Для не стандартной темы оформления используйте свой CSS файл.
В нижней части вставляем:
Открываем файл: templates/celestial/basic.html
Для не стандартной темы оформления используйте свой HTML файл.
В начале кода указываем:
В конце кода указываем:
Получаем примерно такой вид:
Учитывайте что при модификации файла: templates/celestial/basic.html материал будет отображаться в две колонке, во всех модулях которые используют данный шаблон. Если необходимо модифицировать отображения материала в две колонки, например только для модуля магазина потребуется модифицировать стандартный шаблон оформления: basic-shop.html и т.д. для каждого модуля. Как создать шаблон персонально для определённого модуля читайте в данной теме.
Реализация для версии Open SLAED 1.3
Открываем файл: templates/paradise/index.html
Для не стандартной темы оформления используйте свой HTML файл.
Перед </head> вставляем:
Открываем файл: templates/paradise/css/theme.css
Для не стандартной темы оформления используйте свой CSS файл.
В нижней части вставляем:
Открываем файл: templates/paradise/basic.html
Для не стандартной темы оформления используйте свой HTML файл.
В начале кода указываем:
В конце кода указываем:
Получаем примерно такой вид:
Учитывайте что при модификации файла: templates/paradise/basic.html материал будет отображаться в две колонке, во всех модулях которые используют данный шаблон. Если необходимо модифицировать отображения материала в две колонки, например только для модуля файлов потребуется создать шаблон оформления: basic-files.html скопировав содержания из basic.html и т.д. для каждого модуля. Как создать шаблон персонально для определённого модуля читайте в данной теме.
Реализация для всех более ранних версий SLAED
Для пользователей более ранних версий системы метод подключения практически не меняется, единственное что потребуется, это подключение библиотеки jQuery.
Для этого в файле index.html вашей темы оформления, перед </head> укажите следующий код:
Как вариант, вы можете загрузить актуальную версию jQuery в директорию вашего сайта и указать ссылку на него.
Пример использования в модуле новостей
Реализация для версии SLAED CMS 5.* Pro
Открываем файл: plugins/jquery/jquery.slaed.js
В нижней части вставляем:
// Two columns
$(document).ready(function() {
$("div.sl_news").addClass("alt");
$("div.sl_news_clr:even").addClass("alt");
});
$(document).ready(function() {
$("div.sl_news").addClass("alt");
$("div.sl_news_clr:even").addClass("alt");
});
Открываем файл: templates/celestial/css/main.css
Для не стандартной темы оформления используйте свой CSS файл.
В нижней части вставляем:
/* Материал в две колонки */
.sl_news.alt {
float: left;
width: 50%; /* Данное значение подбирается индивидуально */
}
.sl_news_clr {
height: 0;
clear: both;
}
.sl_news_clr.alt {
clear: none;
}
.sl_news.alt {
float: left;
width: 50%; /* Данное значение подбирается индивидуально */
}
.sl_news_clr {
height: 0;
clear: both;
}
.sl_news_clr.alt {
clear: none;
}
Открываем файл: templates/celestial/basic.html
Для не стандартной темы оформления используйте свой HTML файл.
В начале кода указываем:
<div class="sl_news">
В конце кода указываем:
</div>
<div class="sl_news_clr"></div>
<div class="sl_news_clr"></div>
Получаем примерно такой вид:
<div class="sl_news">
Содержание и различные теги...
</div>
<div class="sl_news_clr"></div>
Содержание и различные теги...
</div>
<div class="sl_news_clr"></div>
Учитывайте что при модификации файла: templates/celestial/basic.html материал будет отображаться в две колонке, во всех модулях которые используют данный шаблон. Если необходимо модифицировать отображения материала в две колонки, например только для модуля магазина потребуется модифицировать стандартный шаблон оформления: basic-shop.html и т.д. для каждого модуля. Как создать шаблон персонально для определённого модуля читайте в данной теме.
Реализация для версии Open SLAED 1.3
Открываем файл: templates/paradise/index.html
Для не стандартной темы оформления используйте свой HTML файл.
Перед </head> вставляем:
<script type="text/javascript">
$(document).ready(function() {
$("div.sl_news").addClass("alt");
$("div.sl_news_clr:even").addClass("alt");
});
</script>
$(document).ready(function() {
$("div.sl_news").addClass("alt");
$("div.sl_news_clr:even").addClass("alt");
});
</script>
Открываем файл: templates/paradise/css/theme.css
Для не стандартной темы оформления используйте свой CSS файл.
В нижней части вставляем:
/* Материал в две колонки */
.sl_news.alt {
float: left;
width: 50%; /* Данное значение подбирается индивидуально */
}
.sl_news_clr {
height: 0;
clear: both;
}
.sl_news_clr.alt {
clear: none;
}
.sl_news.alt {
float: left;
width: 50%; /* Данное значение подбирается индивидуально */
}
.sl_news_clr {
height: 0;
clear: both;
}
.sl_news_clr.alt {
clear: none;
}
Открываем файл: templates/paradise/basic.html
Для не стандартной темы оформления используйте свой HTML файл.
В начале кода указываем:
<div class="sl_news">
В конце кода указываем:
</div>
<div class="sl_news_clr"></div>
<div class="sl_news_clr"></div>
Получаем примерно такой вид:
<div class="sl_news">
Содержание и различные теги...
</div>
<div class="sl_news_clr"></div>
Содержание и различные теги...
</div>
<div class="sl_news_clr"></div>
Учитывайте что при модификации файла: templates/paradise/basic.html материал будет отображаться в две колонке, во всех модулях которые используют данный шаблон. Если необходимо модифицировать отображения материала в две колонки, например только для модуля файлов потребуется создать шаблон оформления: basic-files.html скопировав содержания из basic.html и т.д. для каждого модуля. Как создать шаблон персонально для определённого модуля читайте в данной теме.
Реализация для всех более ранних версий SLAED
Для пользователей более ранних версий системы метод подключения практически не меняется, единственное что потребуется, это подключение библиотеки jQuery.
Для этого в файле index.html вашей темы оформления, перед </head> укажите следующий код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Как вариант, вы можете загрузить актуальную версию jQuery в директорию вашего сайта и указать ссылку на него.
О сколько нам открытий чудных,
Готовит просвещенья дух,
И опыт, сын ошибок трудных,
И гений, парадоксов друг...
