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

Правильная нумерация списков в Joomla 3

После решения задачи правильной нумерации в смешанных нумерованных и маркированных списках 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.

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

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

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


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

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