Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Адаптивная вёрстка 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

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

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

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

Log in to comment

Обсуждение этой статьи

ИНФОРМАЦИЯ: Вы оставите комментарий к этой статье как 'Гость'