Режим работы:
пн-пт 9:00-18:00, сб-вс выходной
Купить лицензию
Техподдержка
Хорошие новости!

Индивидуальные стили (CSS)

Подбор цвета:

Читать далее...

Изменение отступов в тексте:

В 5CMS уже прописаны оптимальные стили для оформления текстов.

Но в некоторых случаях может появиться потребность увеличить или уменьшить отступы между элементами текста.

Для этого необходимо в визуальном редакторе (в админке) выбрать редактирование исходного кода (<> или HTML  в зависимости от версии редактора):

Редактирование CSS

У вас откроется окно с HTML-кодом

Изменение стилей CSS

И все, что от вас теперь требуется - это у соответствующего html-тега прописать стили:

За отступы в CSS отвечают:

  • margin - внешний отступ
  • padding - внутренний отступ
  • и в отдельных случаях используется line-height - высота строки

Отступы в CSS

Пример 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-height17px;}

  • любой другой элемент можно вычислить с помощью инспектора кода, встроенного в браузере Хром

Для вызова консоли инспектора нужно кликнуть правой кнопкой мыши на нужный элемент и выбрать "Просмотреть код":

Инспектор кода

Например, "просмотрим код" выше по тексту у маркированного списка "Пункт 1, Пункт 2" и увидим в панели инспектора кода:

Инспектор кода в Хроме

Обратите внимание, двойным кликом на параметрах CSS вы можете менять значения отступов прямо в браузере, тем самым подбирая наиболее подходящий вариант:

Правка CSS

В правом углу выводится название файла стилей и номер строки где это находится, в нашем случае - это файл style.css

Но в любом случае, чтобы изменения сохранились на сайте - их нужно внести в файле style.css и записать.

Теги: изменение стилей (css) в визуальном редакторе и файле стилей, изменение отступов в тексте, инспектор кода

UPD: описание обновлено 30.01.2022

Еще нет своего сайта? Запустите интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать
Запрос в техподдержку

Предоставив исчерпывающее описание задачи/проблемы, вы существенно сократите время на уточнение вашего вопроса.

Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Я нe рoбoт
Отправить запрос
Сотрудничество
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Я нe рoбoт
Отправить запрос
Дополнительные услуги
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Я нe рoбoт
Отправить запрос
Комьюнити разработчиков
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Я нe рoбoт
Отправить заявку
Задайте ваш вопрос

Мы используем файлы cookie для функционирования сайта. Подробнее...

ОК