Просмотр архивов по тагу: ‘CSS, HTML, xHtml’
В 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 пикселей в комплекте))
Эта запись постоянно обновляется по мере продвижения по списку. Комментарии и пожелания привествуются.
Красным жирным помечены пункты, которые нужно сделать. Остальное уже сделано.
Вчера при попытке валидации одного «моего» сайта получил такую ошибку (это в первый раз я с подобным сталкиваюсь):
Sorry, I am unable to validate this document because on line 238, 243 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.
Смысл ошибки понятен, но я реально встал в тупик. Файлы сохранены нормально, без метки BOM, кодировка указана нормально (utf-8). Сам сайт обновлен до последней версии WordPress 2.0.4 (на нём любом работаем). Контент русский, при этом его там очень мало.
А в строках с ошибкой закрывающий тег DIV. Я вообще в недоумении, что может быть. Не подскажите, может кто-то уже сталкивался с таким?
