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

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

Честный VDS/VPS, на котором «Лунная База» живет уже 20+ лет

Задумываетесь о том, чтобы поднять свой pet-проект, сайт клиента или настроить окружение для разработки? Уже пора подумать, где арендовать железо.

Лунная База хостится на FirstVDS более 20 лет. Мыслей о том, чтобы перебраться на другой хостинг, не было ни разу (хотя опыт работы с другими вариантами, конечно, есть).

Бывали разные ситуации, но они бывают на любом железе. Главное, что нужно понять: здесь нет маркетинговой шелухи и сказок про «мы всё сделаем за вас». Если вы берете VDS — вам дают полный root, возможность накатить любую ОС и не лезут в ваши конфиги.

Если в саппорт написать с вопросом по вашему коду и получить ответ: «Читайте документацию и разбирайтесь сами» или «Обратитесь к профильному специалисту» — это не повод обижаться. Это повод углубить свои знания в DevOps и сайтостроении! Бегите от тех, кто пообещает: «Мы всё чиним и настраиваем абсолютно бесплатно!». Никто никогда не работает «по доброте душевной» в ущерб себе, а бесплатный сыр в администрировании обычно заканчивается сломанной базой данных.

Что по факту: Гибкое масштабирование ядер и RAM, экономия по сравнению с физическими серверами и адекватная панель ispmanager, если она вам нужна.

Посмотреть тарифы VDS/VPS

В этой статье полностью опишу, как реализовать адаптивную вёрстку 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

Самый честный хостинг за 20+ лет существования Лунной Базы

Задумываешься о том, чтобы поднять свой сайт в Интернете? Уже пора подумать о том, какой хостинг выбрать?

Лунная База хостится 20+ лет на firstDVS. При этом, мыслей о том, чтобы перебраться на другой хостинг не было. (Но, при этом есть опыт работы с другими вариантами.)

Бывали с firstDVS разные ситуации, но, они бывают на всех хостингах. Единственное, что тут важно понять, - это то, что никто ничего тебе не будет впаривать... Но, и работать за тебя тоже никто не станет. Если в саппорт ответили: «Читайте по ссылке и разбирайтесь сами...» или вообще «Обратитесь за помощью к специалисту», - это повод углубить свои знания в области сайтостроения, а не бежать к тем, что пообещают: «Мы всё чиним и всё делаем за своих клиентов абсолютно бесплатно!» Никто никогда ничего ни за кого "по доброте душевной" не делал, не делает и не будет делать!

Выбрать