После решения задачи правильной нумерации в смешанных нумерованных и маркированных списках HTML с помощью CSS это решение можно применить в шаблоне Protostar в Joomla 3, на котором работают большинство моих проектов. Для других шаблонов решение, я думаю, будет сходное. Главное — это перепрописать (или изменить) свойства элементов списков так, чтобы они выдавались согласно найденному и описанному по ссылке выше способу.
Изменение css-кода шаблона Joomla 3 для правильной нумерации смешанных нумерованных и маркированных списках HTML с помощью CSS
Итак, всё что требуется для того, чтобы смешанные нумерованные и маркированные списки имели правильную нумерацию, нужно применить несколько свойств для двух элементов:
ol {
list-style: none;
counter-reset: li;
}
ol > li:before {
counter-increment: li;
content: counters(li,".") ". ";
}Этого будет достаточно, чтобы получить нумерацию списков, как в договорах, на всех страницах сайта на CMS Joomla, где применяются вложенные списки. Например, можно посмотреть, как это всё выглядит на странице списка статей, посвящённых работе с Joomla.
Модификация исходного css-кода для правильной нумерации смешанных нумерованных и маркированных списках HTML для красоты отображения списков
Для того, чтобы списки выглядели ещё более наглядно и были ещё более доступны для восприятия, я добавил ещё пару свойств в этот css-код. В итоге получился код, который можно вставить в css-файл шаблона сайта:
ol {
list-style: none;
counter-reset: li;
}
ol > li:before {
counter-increment: li;
content: counters(li,".") ". ";
color: #d14;
font-weight: 900;
}Свойство color: #d14; задаёт цвет нумерации, а свойство font-weight: 900; делает нумерацию жирной, что, (на мой взгляд), улучшает общее восприятие упорядоченной структуры списка. С этим вариантом можно ещё поработать, например, задав свойство font-family и/или font-size, но это уже каждый решает сам. Лучшее — враг хорошего. Я, пожалуй, остановлюсь именно на этом варианте. =)
Куда прописать изменённый css-код для того, чтобы изменения применились на всех страницах сайта на Joomla 3?
Ну и кого-то может возникнуть вопрос: «И куда всё это дело вставлять?»
Ответ прост - в css-файл шаблона Joomla 3 или же в сам шаблон сайта. Я предпочитаю хранить всё в одном файле. Основным файлом css шаблона сайта Joomla 3 обычно является templates/название_шаблона/css/template.css
И этот код я вставляю в районе 7470-й строки этого файла шаблона Protostar.
