понедельник, 15 февраля 2016 г.

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

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



И так, нам придется менять коды 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;
Вот и всё. Удачи вам в создании ваших блогов!

Комментариев нет:

Отправить комментарий