Websovet | Полезные советы по созданию веб сайтов

Уплывающий фон поисковой формы в шаблоне Wordpress

Дата: 12.01.2010 | Рубрики: WordPress | Оставить комментарий

Тэги: IE, WordPress, темы Wordpress, шаблон вордпресс

Спасибо за наводящий вопрос одному из читателей блога Вебсовет. Суть вопроса такова: в созданном по книге “3-х колоночный шаблон для Вордпресс” шаблоне ice pepper есть любопытный глюк, который проявляется только в браузере IE. Поисковая форма в данном шаблоне выполнена с применением фонового рисунка. Это довольно распространенный прием в шаблонах ВП, да и не только в них. И вот когда в поле ввода пишется достаточно длинный текст, превышающий размер самого поля, то фон съезжает влево, пока не исчезнет весь.

Выглядит довольно забавно, но впечатление от сайта портит конкретно. В чем же причина? Если посмотреть набор правил в файле css для формы поиска, то можно заметить, что фон прописан не для самой формы, а лишь для ее внутреннего элемента input с идентификатором #s. Это так же часто повторяющийся прием в шаблонах ВП:

#searchform { overflow: hidden; } #s { background: url(images/search.gif) no-repeat; width: 131px; height: 21px; padding: 2px 5px; margin: 10px 0 0 15px; }

Чтобы избавиться от проблемы, нужно несколько видоизменить эти два набора правил. Например, вот таким образом:

#searchform { background: url(images/search.gif) no-repeat; width: 131px; height: 21px; } #s { background: transparent; width: 120px; margin: 3px 0 0 5px; }

Что мы сделали. Во-первых, перенесли фон и размеры используемой картинки непосредственно к идентификатору формы (#searchform). Во-вторых, у идентификатора #s фон сделали прозрачным (transparent), убрали поля (padding), и поправили значения отступов (margin), добавив при этом размер элемента по ширине. Напомню, что этот идентификатор принадлежит элементу input формы. По ширине он должен быть чуть меньше, чем сама картинка фона. Например, 120px. Последнее телодвижение нужно для того, чтобы вводимый текст не вылезал за пределы фона вправо и, кроме того, он избавил нас от используемого ранее правила overflow:hidden; Значениями отступов (margin) можно регулировать взаимное расположение фона и вводимого текста.

Небольшой хинт: если в вашем листе стилей все еще не прописан общий сброс для рамок, отступов и полей (что я настоятельно рекомендую сделать), то для элемента input с идентификатором #s необходимо добавить правило border: 0; Иначе вы получите некрасивую рамку внутри вашей красивой картинки. Напомню, общий сброс пишется в самом начале листа стилей css таким вот образом:

* {border: 0; margin: 0; padding: 0;}

Добавление twitter-ленты на блог

Дата: 11.01.2010 | Рубрики: Twitter | Комментарии (10)

Тэги: javascript, Twitter, twitter-лента

Как и обещал, начинаю новую рубрику о популярном сервисе микро-блогов Twitter. Полезняшки будут нацелены в первую очередь не на тусовочные моменты, а на всевозможные фишки практического характера: от добавления ленты твитов к себе на блог и до различных сторонних программных и пр. фенечек.

Enjoy!

Twitter победоносно шагает по ~~стране~~ миру. Если вы еще не там, то поспешайте, пока бесплатно. Те, кто уже в теме, возможно, захотят добавить на свой сайт (блог) небольшой список последних твитов со своего аккаунта. Сделать это можно различными способами. Есть масса готовых плагинов. Есть даже симпатичные варианты на современном jQuery.

Однако самый простой способ, на мой взгляд, это добавить прямо в шаблон сайта (в подвал) парочку ссылок на javascript, лежащих на самом twitter.com. А в сайдбаре разместить заголовок и список ul с соответствующим идентификатором.

Рассмотрим подробнее.

В подвале сайта (файл footer.php, если ваш сайт на Wordpress), прямо перед закрывающим тэгом </body> поместим следующее:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ваше-имя-в-твиттере.json?callback=twitterCallback2&count=5"></script>

Эта пара ссылок подключает файлы javascript, лежащие непосредственно на сайте twitter.com. Во второй из них есть собственная настройка на количество выводимых твитов — count=5. Вы можете менять это число по своему усмотрению. И не забудьте вместо слов “ваше-имя-в-твиттере” вставить собственный логин.

Но где и как будут выводиться эти твиты? Чаще всего в блогах их размещают в сайдбаре. Поступим так же. Для этого в файле sidebar.php находим удобное место и добавляем следующий код:

<h3>Twitter</h3> <ul id="twitter_update_list"> </ul>

Список с идентификатором twitter_update_list и есть тот якорь, что указывает javascript-у где прицепить твиты. Все просто и доступно. Единственный минус данного подхода — невалидный код. Валидатор W3C будет ругаться на недопустимость использования пустого списка. По сути он прав, так как список ul нельзя использовать без вложенных тэгов li. На самом деле список в итоге будет верным, так как скрипт сам добавит пункты списка вместе со ссылками. В общем, если вас это не пугает, то можете пользовать фишку в таком виде. Лично я себе ее так и прикрутил.

Простой ролловер

Дата: 06.01.2010 | Рубрики: Верстка | Комментарии (14)

Тэги: css, hover, html, Верстка, Простой ролловер

Возвращаясь к теме ролловеров, хочу показать простейший из его примеров. Напомню, что ролловером в верстке называется картинка, которая меняется при наведении на нее указателя мыши. Для работы данного эффекта необходимо использовать известное свойство ссылки под названием hover. А как быть, если нам, к примеру, нужно сделать лишь саму картинку в виде ссылки, но без всякого текста. Например, лого. Есть красивый рисунок, и нам вовсе ни к чему на нем сверху накладывать текст ссылки. А делать “пустую” ссылку валидатор не позволяет.

Для решения этой задачи можно применить свойство текста, называемое text-indent, которое обычно применяется для “красной строки”. Но только задать ему отрицательное значение, причем достаточно большое. Тогда текст будет прятаться далеко за границей страницы сайта. Таким способом поступают довольно часто, особенно при использовании рисованных логотипов.

Но вернемся к нашим баранам, сиречь ролловеру. Принцип работы такой меняющейся картинки весьма прост: рисуется двойное изображение, одно строго под другим: