Как убрать или изменить лишние линии в дизайне блога

Создавая свой блог, я столкнулась с подобной проблемой. В дизайне шаблона были вот такие линии-разделители.

(на боковой панели были такие же как и в сообщениях - простые линии. Здесь на боковой панели уже новые разделители, которые я сделала сама в фотошопе и заменила.)
В общем стандартный вариант шаблона мне был не удобен да и по дизайну хотелось что-то более подходящее. Я перерыла весь интернет, но так и не нашла, как это сделать. Пришлось самой сидеть и весь вечер ковырять коды. Но я это сделала! Хочу теперь поделиться с вами этой информацией. Возможно кому-то очень пригодится.



И так, нам придется менять коды HTML. Перед любыми его изменениями нужно сделать копию вашего шаблона. Если вы вдруг сделаете что-то не так, всегда можно быстро восстановить то, что было. Для этого во вкладке Шаблон  нужно нажать Резервное копирование и восстановление в правом верхнем углу.

В появившемся диалоговом окне выбрать Загрузить полностью. Когда вам понадобиться воспользоваться этой функцией, в этом диалоговом окне нужно нужно выбрать Загрузите фаил.

Убираем полосу-разделитель в сообщениях. 

Во вкладке Шаблон нажимаем Изменить HTML. В окне кодов ставим курсор в любое место поля с кодами и нажимаем CTRL+F. Вверху справа появится строка поиска

Вставляем в неё следующий код, вернее это его часть 

main-inner .widget h2.date-header

и нажимаем ENTER . То, что мы искали будет выделено другим цветом

Вот он искомый код поближе

В нем нас интересует словосочетание   border-bottom и следующее за ним числовое значение. На фото выше подчеркнуто красным. У меня это числовое значение 0рх (потому что я его уже заменила, изначально там было 1рх) у вас там будет другое значение, которое вам нужно заменить на 0. Вот и всё! 

Нажимаем Посмотреть шаблон

Если вы сделали всё правильно, то ваша линия исчезнет. Если вас всё устраивает, возвращаемся из режима просмотра (Изменить шаблон) и сохраняем шаблон. Если хотите вернуть линию обратно, просто исправьте значение на начальное (из режима просмотра вы вернетесь в ту же строку кода). Аналогично можно увечить ширину этой линии, увеличив значение border-bottom.

Если через строку поиска вы не можете найти нужный код, его можно найти вручную. В кодах HTML нужно найти раздел Posts. В нём найти код main-inner .widget h2.date-header {

  border-bottom: 1рх

Теперь разберемся с линиями на боковой панели. 

Они есть между гаджетами и под названием гаджета. Для меня линии под названием гаджета были лишними, поэтому я их решила убрать. Для этого также заходим в коды и через строку поиска ищем 

main-inner .sidebar .widget h2

 То, что мы искали будет выделено другим цветом. Код поближе

В нем нас интересует словосочетание   border-bottom и следующее за ним числовое значение (подчеркнуто красным на фото выше). Меняем 1 на 0. Должно получиться border-bottom: 0рх

Если нужно искать вручную, в кодах HTML нужно найти раздел Widgets, в нём найти код main-inner .sidebar .widget h2 { border-bottom: 1px 

Линии между гаджетами я захотела заменить на боле подходящие мне по дизайну. Для начала их нужно сделать в фотошопе или найти готовые в интернете. Когда всё готово, ищем в кодах HTML 

main-inner .widget. 

Весь код выглядит вот так:

.main-inner .widget {

  padding: 0 0 15px;

  margin: 20px 0;

  border-bottom: 1px solid $(widget.border.bevel.color);

Если в выделенном красным кусочке единицу заменить на ноль, то линии исчезнут совсем. Мы вставляем свой разделитель, для этого в данном коде всю часть, которая находится между фигурных скобок заменяем на следующий код 

background: url(ссылка на изображение разделителя);background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em; padding-bottom:1.5em;

Вот и всё. Удачи вам в создании ваших блогов!