Просмотр архивов по тагу: ‘CSS’
Сегодня в время верстки одного симпатичного шаблона для WordPress я столкнулся с одной шокирующей (для меня) фигней. В CSS есть такое замечательное свойство как @font-face, которое позволяет загружать нестандартные шрифты. Свойство замечательное, хотя мало кто его использует.
Вообщем, в шок меня повергло, когда я открыл свой шаблон в Safari 3 в Mac OS X. Посмотрите на скрин ниже, так «оно» не должно было выглядить:
По идее подключается симпатичный прописной шрифт «Monotype Corsiva», который прекрасно отображается в Windows в любом броузере, даже в том же Safari для винды. Поэтому я даже не мог представить, что столкнусь с таким глюком в Mac OS X. При этом гнать на кириллицу не стоит, потому что шрифт ее поддерживает.
Я отложил верстку на некоторое время и полез почитать фиды и буквально сразу же мне попадается интересная ссылка по теме. Последний nightly build WebKit'а (Сафари на нем и работает) поддерживает это самое свойство на 100%. Вот тот же файл верстки с тем же шрифтом, как оно должно было быть:
Вообщем, нет ничего совершенного. Ждем обновления Safari в ближайшее время. А пока линки для ознакомления:
В Google группах прозвучал вопрос по сабжу. CSS для пары таких классов очень простой:
.right, .left { display: inline; }
.left { float: left; padding: 5px; margin: 5px 15px 5px 0; }
.right { float: right; padding: 5px; margin: 5px 0 5px 15px; }
В WordPress можно еще quicktags-кнопочки использовать, чтобы вставлять картинки легко было. Я предпочитаю классы и избегать лишней писанины. Кстати, где-то в Google группах проскакивал вопрос недавно о том, как добавить такие кнопочки в quicktags. Вообщем, объяснять как и где редактировать js мне лень, поэтому просто выкладываю его на всеобщий доступ. Если будут ошибки в IE, то сообщите и я исправлю код.
Скачать файл quicktags.js с кнопками IMG-ALIGN, PRE, CODE, SMALL, ALERT. Для использования поместить в папку «wp-includes/js», переписав уже существующий. Разумеется, что css-код нужно добавить тоже в Ваш шаблон.
Прочитал две статьи на тему «Как создать шаблон для WordPress» и был крайне удивлен подходу создавания шаблона. На мой взгляд, оба описания предлагают более трудоемкий и непрактичный подход. Я не люблю долго возиться с шаблонами и предпочитаю группировать все элементы как можно плотнее, избегая при этом лишнего кода. Отчего мои верстки для WP не страдают насыщенностью запросов.
В связи с этим я тоже решил поделиться своим опытом и предложить свой метод создания шаблона с нуля, который, на мой взгляд, практичнее и удобнее. Хочу отметить, что данный ebook — это мой личный опыт и я постарался наиболее просто показаться свой метод создания шаблона для WordPress.
Особенности моего метода — это компактность, практичность, удобство и универсальность. В ebook'е приведены полные листинги кода, этот же код я использую как базовый в шаблоне Slaff @ Reworked и других свох блогах. Я намерянно опустил ту часть, в которой следовало бы рассказать о CSS, потому что это несколько другая тема.
Скачайте и прочитайте ebook «WordPress Cookbook. Создание шаблона с нуля.» Распространяйте эту книжку в любом виде.
На редкость сегодняшним вечером я никуда не пошел гулять и провожу его со своим любимым iBook'ом, отвалившись на любимом диване и верстая один сайтец.
Рабочие инструменты: Textmate, Safari, Firefox, Shell.
Под сопровождение Late Night Alumni в iTunes и чаты в разных мессенджерах, параллельно общаясь с flickr freaks.
Столкнулся с тем, что в highlight.js текст не переноситься, а скролиться в блоке PRE. Я предпочитаю, чтобы текст переносился автоматом. Для этого существуют специальные css-свойства. Ниже привожу универсальный метод для всех броузеров и версий css, которым собственно и пользуюсь сам:
pre {
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 2.1/3 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
word-wrap: break-word; /* Только для динозавра IE */
}
Для скролинга же блока используется «overflow: auto», чтобы отключить скроллинг и обрезать линию «overflow: hidden», а чтобы без скроллинга и полной линией текста «overflow: off;».
За всё время существования S@R для подсветки синтаксиса разного кода в постах я перепробовал огромную кучу самых разных плагинов. Среди всего прочего особо долго продержались Code Markup и iG:Syntax Hiliter. В последнем очень хорошо сделана подсветка разных языков, но все равно он мне показался несколько громоздким и не совсем удобным (зачем использовать BB-код, когда есть теги pre и code?).
Сегодня наконец-то руки дошли до javascript'а, сделанного Иваном Сагалаевым highlight.js (Syntax highlighting with language autodetection.) — подсветка синтаксиса с автоопределением языка. Замечательных 28 килобайт, несколько минут на подключение (никаких плагинов) и вууаля.
О том какой он удобный и простой в использовании я рассказывать не буду, сходите на офф.сайт для полного ознакомления. Но я однозначно рекомендую его всем, кому нужно что-то подобное.
PS. Прошу прощения, Иван, за то что выдрал CSS и иконки. Просто любопытсво быстрого тест-драйва. В любом случае, в ближайшее время исправлюсь :).
Мой нерусский блог сегодня подвергся css-ребуту, с чем и поздравляю себя :). Это вообще мой первый css reboot, что собственно приятно осозновать как факт. Дизайн и шаблоны были сделаны буквально за 3 дня до ребута, но получилось как всегда симпотично и валидно. Заценить новое оформление можно, пройдя по этой ссылке или кликнув по скриншоту:
И кто сказал, что темное не может быть ненапряжным? В этот раз дал себе волю и оформил так, как уже давно хотел оформить . Оформление в темных тонах, читабельные места по возможности минимально напрягающие глаз, и контраст в цветах только там, где нужно. Только одна картинка в «шапке».
В общем получилось даже более минималистично вроде, чем S@R. А вы как думаете?
Проголосовать за мой диз и блог можно, оставив коммент на блоге CSS REBOOT
Вы это можете увидеть на моей странице архивов в боковой панели. Для этого нам понадобиться плагин Ultimate Tag Warrior. Сначала мы его установим, активируем, поднастроем в адмике WP. Всё остальное — дело 2х минут. Нужно только не забывать про RTFM — в мануалах и readme плагинов всё написано.
Итак, всё очень просто. Вывести такой своеобразный ТОП можно встроенной в UTW функцией:
< ?php if (function_exists(UTW_ShowWeightedTagSet)) { ?>
<div class="sidebox">
<h2>Топ 15 тагов</h2>
<div class="verticaltags">
< ?php UTW_ShowWeightedTagSet("weightedlongtailvertical","",15); ?>
</div>
</div>
< ?php } ?>
В середине, в строке UTW_ShowWeightedTagSet («weightedlongtailvertical»,"",15) число 15 меняем на любое какое хотим, чтобы было в нашем ТОПе.
Но это не всё. Без нормального CSS, у Вас ничего не получиться красиво. Вот такой css вам сделает всё красиво:
/* TOP 15 TAGS */
.verticaltags div {
margin: 0 !important;
text-transform: lowercase;
font-weight: bold !important;
}
/* Обычная ссылка */
.verticaltags div a {
color: #fff !important;
border: 0;
padding: 3px;
}
/* Ссылка при наведении мышки */
.verticaltags div:hover, .verticaltags div a:hover {
color: #437295 !important;
background: transparent !important;
}
В Google группе «Вэб-мастер Клуб» проскочила ссылка на новый IDE для разработки вэб приложений на основе AJAX под названием «Aptana». Не поленился, скачал и попробовал.
Глубоко не стал копать, т.к. меня заинтересовало насколько в нём было бы удобно кодить, работать с html и css, ну и главное — посмотреть как работает этот IDE c различными js-библиотеками.
Для себя отметил следующие моменты:
1) Очень легко и понятно организована работа с библиотеками. Я еще не встречал таких редакторов, чтобы автоматически дополняли код функциями прямо из подключенной библиотеки.
2) Автодополнение html, css и js кода. Очень хорошо сделано — вот этого очень не хватает Dreamweaver'у, да и многим другим редакторам.
3) Помимо автодополнения еще хорошо разбивает код на отступы между тагами. Удобная, на мой взгляд, табуляция, оптимальная я бы сказал.
4) Подсветка ошибок. Не знаю, не очень что-то там подсвечивает ошибки.
Aptana кроссплатформенный редактор (Win, Linux, Mac) работает на Java JRE, т.е. жрёт память и нагружает процессор только в путь. Мне вообще не нравятся такие редакторы на Java. Считаю, что есть лучше и намного удобнее. Но, думаю, при наличии хорошего железа (1Gb Ram & P4 и выше) для начинающих в AJAX будет весьма полезным софтом.
Кстати, на оффсайте есть много скринкастов. Посмотрите, это любопытно.
Решился собрать все глюки в оформлении, вёрстке шаблона и пофиксить немного всё это дело. Конечно же, с учетом всех оставленных ранее комментариев и пожеланий (спасибо читателям ;) ). Ну и добавлю кое-какие новшества и мелкие изменения в само оформление. Итого у нас получается:
Внешнее:
- Баг в ширине «подвала» на 100%.
- Баг с отступами параграфов в комментариях.
- Баг с отступами в формуляре комментариев.
- Добавить дату создания поста в цикле.
- Баг в отображении списка блогролла.
- Профиксить цвета в двух css классах.
Внутренее:
- Поставить ссылку «Редактировать комментарий» на своё место.
Улучшения, новое:
- Прикрутить плагин «Цитировать выделенное»
Добавить прозрачный псевдно-стеклянный фон для контента.- Вернуть del.icio.us.
- Новый формуляр для контактов. (Пока отменяется)
- Новый Colophon.
- Новая страница архивов.
- Иконка для RSS (классная 3D иконка (от 16 до 128 пикселей в комплекте))
Эта запись постоянно обновляется по мере продвижения по списку. Комментарии и пожелания привествуются.
Красным жирным помечены пункты, которые нужно сделать. Остальное уже сделано.
