Невозможно установить пользовательский CSS в теме WordPress

Question

Я использую тему Двадцать четырнадцать на моем веб-сайте WordPress. On one of the pages Я хочу добавить изображения в левой части области содержимого (боковая панель меню слева от нее), так что текст обтекает изображение.

Я добавил два изображения (рядом с третьим и четвертым тегами H4, если вы посмотрите на страницу), и оба изображения заставляют за левой боковой панелью из-за границы поля -168px на левой элемент родительской фигуры изображения.

На странице, если вы используете Element Inspector/FireBug/whatever, вы увидите изображения, вложенные в фигурные элементы в коде, и что он находится влево позади боковой панели. В окне просмотра правил, это показывая margin-left: -168px на классах ".full-width .site-content .wp-caption.alignleft"

я добавил свой собственный класс изображений, чтобы попытаться компенсировать разницу с помощью margin-right: 168px, но это не оказывает воздействие, по-видимому, потому что установка левого поля -168 является на элемент, который является родителем изображения.

Я не хочу выбирать все фигурные элементы, чтобы компенсировать это -168px. Возможно, это понадобится для других фигур - я не знаю. WP добавляет идентификатор для каждого изображения, но я не хочу выбирать каждый идентификатор изображения (если только это не единственный способ), так как я могу справиться с этим?

Спасибо за помощь.

Answer 1

После того, как вы немного поглядывали на CSS и пытались выполнить некоторые настройки, я понял, что я ответил на свой вопрос. Я сказал, что элемент фигуры, в котором находится изображение, имеет значение margin-left: -186px;. Все, что мне нужно было сделать, это добавить мой собственный CSS: figure { margin-left: 0px; }. Почему я не видел этого раньше, я не знаю ...

Answer 2

Удалить .alignleft класс от HTML В figure «s.

Это позволит удалить маржу.

Чтобы текст текли вокруг фигуры, нужно придать ему свойство float: left и добавить правое и левое поле, чтобы оно выглядело немного красивее.

HTML для фигуры (ваш образ) следует читать:

<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption"> 

Я бы сказал, что вы должны смотреть на стилизации элементов в CSS стилей, в отличие от определения стилей в HTML.

Книга для вас будет:

HTML & CSS: Проектирование и строительство веб-сайтов Джон Duckett

Сво, что я использовал, когда я первый начал CSS. Его получили все, что вам, скорее всего, понадобится некоторое время, и очень дружелюбный к новичкам ...