Как поднять виджет поиск по блоку выше сайдбара

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

Посмотрите, как это вписывается в строку вкладок

Для этого нам необходимо сделать небольшие изменения в шаблоне блога.  Для тех, кто пока не совсем уверен в своих действиях, сделайте резервное копирование шаблона. Нажимаем изменить HTML и в строке список виджетов выбираем CustomSearch1'.

Нас тут же перебросит в то место, где расположен код виджета. Нажимаем на 2 чёрные стрелочки слева и  находим такую строчку

<h2 class='title'><data:title/></h2>. Аккуратно её удаляем.

Затем с помощью горячих клавиш Ctrl+F находим заветную и всеми любимую строчку  ]]></b:skin> и сразу над ней вставляем следующие.

#sidebar-right-1{

position: relative;

top: -65px;

display: inline-block;

}

Небольшое пояснение. Мы задали  позиционирование нашему элементу position: relative; и
и значение top: -65px; - эта величина и будет поднимать или опускать наше окно поиска  на нужную высоту. Так что уменьшая её или увеличивая мы сможем добиться нужного результата. В моём случае в строку вкладок окно поиска встало при значении -65px.

При изменении этой цифры тут же в шаблоне можно просмотреть устраивает ли вас результат. Нажимаете предварительные просмотр и если что-то не так, как хотели, жмём изменить и правим снова. Пока не добьётесь нужного. В итоге не забудьте сохранить шаблон.

Так как вопросы о том где эта строка опять перенаправлю вас на этот пост. И пожелаю вам удачи во вех делах.

У меня на сегодня всё. Спасибо, что читаете мой блог.

оформите подписку на новые шпаргалки

Введите Ваш email ...: