Где скачать Kunena форум. Официальный сайт Kunena.
Где скачать Kunena Discuss. Официальный сайт Kunena.
Как сменить кодировку в Блокноте по умолчанию с ANSI на другую
Как войти в Instagram с телефона или планшета
Как сменить кодировку текстового файла с помощью Блокнота в Windows
Как получить HTML-код для вставки на сайт видео с YouTube
Как открыть YouTube. Официальный сайт
Где находится файл index.php шаблона сайта на Joomla
ArrowArrow
ArrowArrow
ArrowArrow
ArrowArrow
ArrowArrow
Slider
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Адаптивная вёрстка HTML+CSS двух столбцов в шаблоне Protostar Joomla 3

При публикации статьи с примерами моих работ создания сайтов столкнутся с тем, что рука уже не поднимается верстать в таблицу то, что можно сверстать с помощью div'ов. Однако, почитав статьи и посмотрев примеры, как верстать адаптивную вёрстку так, чтобы на мобильных телефонах блоки вставали один под другой при маленькой ширине экрана, наткнулся на то, что ничего из предлагаемого не работает. А всё, что может быть работает, сложно для публикации статей в Joomla. Однако, меня это не остановило. Вспомнив, что в шаблоне шаблоне Protostar для Joomla 3 такая вёрстка предусмотрена при публикации статей в виде блога, а значит будет работать и в статьях, так как требуемые стили уже подключены! Так и сделал и всё получилось! =)



В этой статье полностью опишу, как реализовать адаптивную вёрстку HTML+CSS двух столбцов в шаблоне Protostar для Joomla 3. Для тех, кто использует другие шаблоны, имеет смысл посмотреть, как реализована адаптивная вёрстка столбцов в их шаблонах, либо утянуть стили этой статьи к себе в вёрстку.

Итак, в шаблоне Protostar адаптивная вёрстка двух столбцов реализована примерно так, как указано в коде ниже. Хотя я в него внёс, кое-какие модификации, выкинув один атрибут, который не используется и вставив ширину для первого столбца, чтобы сделать его нужной мне ширины, так как в нём у меня располагается картинка с превьюшкой и его ширина не должна быть равна ширине второго столбца. В итоге получился такой вот HTML-код с классами CSS, которые, как я указал выше, присутствуют на странице сайта с шаблоном Protostar:

<div class="items-row cols-2 row-0 row-fluid">
 <div class="item column-1 span6" itemprop="blogPost" style="width: 330px;" itemtype="https://schema.org/BlogPosting">
  левый столбец
 </div>
 <div class="item column-2 span6" itemprop="blogPost" itemtype="https://schema.org/BlogPosting">
  правый столбец
 </div>
</div>

На этом можно было бы закончить, НО (!) текстовый редактор TinyMCE вырезает все атрибуты и получается совсем не то, что нужно.

Как обойти вырезку атрибутов в TinyMCE

Можно конечно залезть в базу данных в таблицу content и там ручками всё поправить, но мы не ищем лёгких путей, поэтому откроем настройки плагина TinyMCE в «Менеджере плагинов» Joomla 3. И вот тут Ахтунг! =)

  • Переходим на вкладку «Набор 0». Это вкладка с настройками для админов и супер-юзверей =)
  • Находим поле «Дополнительные валидные элементы» и в него вставляем
    • div[*] — это позволит разрешить абсолютно все атрибуты тегу div, или
    • div[атрибут1|атрибут2|атрибут3|атрибутN] — это позволит разрешить только указанные атрибуты (остальные будут беспощадно вырезаться редактором TinyMCE) в теге div.
  • Сохраняем изменения в настройках плагина текстового редактора TinyMCE

Вот и всё! Теперь можно в HTML-код материала вставлять нашу разметку с адаптивной вёрсткой HTML+CSS двух столбцов, используя стили шаблона Protostar и текстовый редактор TinyMCE не будет её вырезать. =D

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )


Обсудить эту статью

INFO: Вы отправляете сообщение как 'Гость'