Подбор цвета:
Изменение отступов в тексте:
В 5CMS уже прописаны оптимальные стили для оформления текстов.
Но в некоторых случаях может появиться потребность увеличить или уменьшить отступы между элементами текста.
Для этого необходимо в визуальном редакторе (в админке) выбрать редактирование исходного кода (<> или HTML в зависимости от версии редактора):
У вас откроется окно с HTML-кодом
И все, что от вас теперь требуется - это у соответствующего html-тега прописать стили:
За отступы в CSS отвечают:
- margin - внешний отступ
- padding - внутренний отступ
- и в отдельных случаях используется line-height - высота строки
Пример 1:
<p style="margin:1px 2px 3px 4px;">Hello World</p>
добавит абзацу с текстом "Hello World" внешний отступ сверху 1px, справа 2px, снизу 3px, слева 4px.
margin:1px 2px 3px 4px;
можно заменить на:
margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px;
аналогично работает и для padding
Пример 2:
<ul style="padding: 0 0 0 20px;">
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
добавит маркированному списку внутренний отступ слева в 20px.
Вот как это выглядит на сайте:
- Пункт 1
- Пункт 2
А если нужно поменять стили на всем сайте сразу?
Для следующих манипуляций рекомендуется наличие знаний CSS!
Важно! Вносимые изменения необратимы, поэтому не забывайте делать резервную копию содержимого изменяемых файлов.
Через файловый менеджер заходим в design/ваша тема/css/ либо Админка > Дизайн > Шаблоны и стили
и находим файл style.css, в нем правим содержимое в {...}:
- для маркированных списков у:
.blog_annotation li, .comment_list li ul li, ul.stars li, #annot ul li, .description ul li, #tab1 ul li, .annotation ul li, .box .main-text ul li, #content .post-pg ul li, #content .page-pg ul li
- для абзацев у:
p { margin-bottom: 7px; line-height: 17px; }
- дополнительно для абзацев в описании категории у:
.catdescription p { line-height: 17px;}
- любой другой элемент можно вычислить с помощью инспектора кода, встроенного в браузере Хром
Для вызова консоли инспектора нужно кликнуть правой кнопкой мыши на нужный элемент и выбрать "Просмотреть код":
Например, "просмотрим код" выше по тексту у маркированного списка "Пункт 1, Пункт 2" и увидим в панели инспектора кода:
Обратите внимание, двойным кликом на параметрах CSS вы можете менять значения отступов прямо в браузере, тем самым подбирая наиболее подходящий вариант:
В правом углу выводится название файла стилей и номер строки где это находится, в нашем случае - это файл style.css
Но в любом случае, чтобы изменения сохранились на сайте - их нужно внести в файле style.css и записать.
UPD: описание обновлено 30.01.2022