У дяди Валеры, эсквайра

А заодно и обои (заливку) и кнопки. Полный редизайн блога, в общем. Речь идет о Вордпресс-блоге, ну типа моего. Мои постоянные читатели наверняка удивились и даже меня сразу и не признали. Вместо серо-коричневой морды блога вовсе другая, более легкая и веселая раскраска.

Виноват, я уже и не только шапку поменял, а поменял уже и тему (шаблон). Речь идет о первоначальном шаблоне после редизайна, даю ниже скриншот его после редизайна — не судите строго за нечеткость и размытость — я его обработал программой Riot для снижения «веса» чтобы не тормозилась загрузка сайта. Картинка кликабельна для просмотра в полном размере. Закрывалка в правом нижнем углу картинки.

Ни на что новое в описании не претендую, просто объясню поподробнее, как это я сделал. Вот мои шаги при смене шапки, заливки(боковых полей) и редизайна кнопок навигации блога. Не думайте что пытаюсь напустить пыль в глаза неприятным словом — редизайн — это мой тактический SEO — ход, мисс Удача меня прекрасно поймет…Итак, поехали!

1. Через FTP-client скачал папку с адреса: public_html/wp-content/themes/моя тема/images. Именно ту тему которую я использую, а не classic и не default. Кстати моя версия Вордпресса — 2.9.2, но на более ранних и более поздних версиях различия будут практически незаметные. Сделал копию этой папки на случай возврата к старому либо неудачи. Скачал всю тему, на всякий случай..

2. Посмотрел размеры, название и расширение рисунка шапки. Оказалось 1004х250px, header.jpg — название файла картинки шапки. Да вот она, старая моя шапка блога, если хотите, правда — мне её пришлось сильно уменьшить:

Мрачноватая шапка блога, думаю согласитесь. Новую видели. Согласитесь таки — это две большие разницы — старая шапка и новая шапка (блога, а не та что на голову надо надевать).

3. Выбрал более-менее то, что нравится из своих Новозеландских фоторафий, обрезал в вышеуказанные размеры, сделал надпись «У дяди Валеры…» в программе Paint.NET — фотошопа я не знаю и она меня всегда выручает ( кстати через нее думаю научиться делать 3D-фотографии, но это попозже). Надписи в шапке пишутся в админке/параметры/общие. Но не на всех шаблонах там особо распишешься. Поэтому можно расписать сам рисунок шапки. Если, как я, не владеете фотошопом, то можете опять же как и я делать надписи в PaintNet.

Сейчас все надписи (кроме коммента к фото) сделаны в админке: параметры/общие, строчки — заголовок сайта и краткое описание. Как назначить этим подписям цвета, размеры и местоположение на шапке? Это довольно кропотливая и нелегкая работа. За эти данные (и очень многие другие параметры) отвечает style.css (список стилей), а именно — часть Logo (на некоторых шаблонах может быть и другое название). Вот я не поленился, сделал выкопировку Logo, где я полностью отредактировал надписи в шапке блога.

/* begin Logo */- начало logo, параметры, закрытые слэшами со звездочкой Вордпресс не читает.
.logo
{
display : block;
position: absolute;
right: 5px;
top: 10px; /*64*/- здесь первоначально было 64рх
width: 800px; /*534*/-здесь первоначально было 534рх

}

h1.logo-name
{
display: block;
text-align: right; /*right*/
}

h1.logo-name, h1.logo-name a, h1.logo-name a:link, h1.logo-name a:visited, h1.logo-name a:hover
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 36px; /*42*/ — это размер названия сайта.
text-decoration: none;
padding:0px 10px 0 0; /*0*/ - это отступ
margin:0px 0 0 0; /*0*/
color: #FFFFFF; !important; /* #EEF7FC */ — здесь я поменял цвет шрифта с помощью определителя цвета.
}

.logo-text
{
display: block;
text-align: right;
}

.logo-text, .logo-text a
{
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 22px; /*17*/
font-style: normal;
font-weight: bold;
padding:0px 0 0 10px; /*0*/
margin:0 10px 0 0; /*0*/
color: #2A7FFF!important; /* #EEF7FC !important;*/
}
/* end Logo */ - конец Logo

Вот так все и подогнал как хотелось!! Ахтунг! Attention! Внимание! Если задача смены шапки или полного редизайна оказалась вам не по силам можете откупиться — присылайте свою тему мне — скачиваете из папки public_html/wp-content/themes. Я ее устанавливаю на свой поддомен и там кромсаю ее по вашим пожеланиям! Оплата — 500…1000 руб. после  проделанной работы и приемки вами обновленной темы (дам ссылку на мой поддомен, где будет ваша тема). Это займет 2….10 дней в зависимости от сложности темы и моей занятости. Кстати о темах — они бывают удачные и не вовсе — поддерживают не все плагины и функции. Многие темы не поддерживаются полно Интернет эксплорером или Оперой. Вот эта моя тема (с надписью «Тихий океан» на шапке) — единственная в мире — произвел полный редизайн бесплатного шаблона, очень удачная на предмет полной функциональности — поддерживает даже комментарии на статичных страницах. И я могу ее продать за 300 руб. с подгонкой под вас!

Вы сможете наблюдать за моей работой — дам вам ссылку на мой поддомен, где и будет происходить моя баталия с вашим шаблоном. Кто еще может предложить такие условия? Не следует думать что я что-нибудь украду с вашего блога — это невозможно в принципе — шаблон содержит стандартный набор файлов, ничего общего не имеющих с содержанием!

Эх — пошла такая пьянка — режь последний огурец! За эти же деньги еще очищу шаблон от лишних явных и скрытых(base-64) ссылок!

4. Вместо серых обоев (заливки) аналогично подобрал другие в тему к шапке блога — просто вырезал кусок неба с того же фото, которое употребил на шапку. Слегка осветлил его — здесь годится любой фоторедактор. Размеры, расширение и название взял с исходного файла.

5. Кнопки..с ними получилось немного сложнее — в папке темы оказалось два одинаковых рисунка с разными названиями, вот тот рисунок, в первозданном виде, который я загрузил после копирования и  переделки:

Несомненно, эти кнопки как нельзя лучше подходили к старой шапке блога, но к новой…Почему рисунок тройной? Одна в отжатом состоянии, другая при наведении курсора (стрелки), третья в нажатом состоянии. Я все три кнопки перекрасил в Paint NET. В разные цвета, сохранив текстуру… Да эти кнопки назывались menuitem.png ( здесь у меня вышла промашка — у меня есть вторая тройка кнопок с этим же рисунком, но названием button.png — переводится «кнопка», но оказалось, что эта тройка нигде у меня не задействована и я напрасно поработал с ними, потом я их вовсе удалил с сервера — зачем таскать ненужный груз).

6. Просто перекрасил подложку под кнопки — nav.png — ну панель навигации, получается; ее у меня не видно я взял на нее цвет моря по определителю цвета.

7. Залил (закачал) на сервер в ту же папку откуда и скачивал свою тему последовательно (с заменой имеющихся) все эти элементы — вот вам и полный редизайн моего блога!.

Должен признать, что попытка сузить шапку не увенчалась успехом. Простое сужение рисунка привело к белым щелям сверху и снизу от рисунка. Изменение размера рисунка в файле редактора style.css привело к смещению рисунка вниз и щели сверху — ума у дяди Валеры пока не хватило как с этим разобраться (сейчас понял — надо было заменить размеры в нескольких местах), но замена рисунка шапки в точь по предыдущим размерам — сплошное удовольствие.

В дальнейшем хочу по боковинам пустить белокрылых чаек! Запустил было, но не понравилось — кусочек неба с чайкой многократно ступенчато повторяется — некрасиво. Это оказывается большая работа…как-нибудь потом, может быть... - уже и чаек пририсовал, клево, по-моему!

Как мне это удалось? Нашел подходящий «портрет» чайки, уменьшил его, очистил всё прилегающее к ней, скопировал и еще раз уменьшил, отразил зеркально (относительно вертикальной оси). В Paint NET выделил длинную по высоте прямоугольную область, залил ее в цвет неба, импортировал в верхнюю ее часть большую чайку, пониже — отраженную уменьшенную..и с третьей попытки заливки на сервер получил то, что хотел …

Изменил еще цвет счетчика LiveInternet, он тоже не вписывался в дизайн был густо-серого цвета, сделал его прозрачным. Как это я проделал? Открыл виджет в котором он у меня сидит, там есть строчка

<img src=»//counter.yadro.ru/logo?27.01« , так вот, цифра 01 — это прозрачный цвет как у меня (раньше был 4), если изменить на 09 — будет в тему со счетчиком Яндекс — метрики, который под ним. Просто перебираете цвета, пока не найдете нужный (01, 02, 03……11….). Надеюсь, не надо подсказывать, что при переборе вариантов надо работать в двух окнах — в одном редактируете, в другом просматриваете результаты, обновляя страницу? Понял, понял, знаете, ладно молчу.

Как я настраивал шрифты рассказано здесь:  Настройка шрифтов WordPress , как я анимировал смайлы — рассказ здесь: Анимированные смайлы на WordPress

Пока суть да дело — я уже и шаблон поменял — тот после редизайна нравился мне, но с IE были сплошные нелады.

Часто на эту мою запись заходят в поисках как делать анимированную шапку блога. В моем понимании — анимированная шапка — это картинка в формате.gif. А это значит шапка ваша во много раз будет тяжелее и блог в браузере будет прогружаться намного дольше и, как результат, вы растеряете большую часть ваших читателей.

Другое дело, если в тему встроить сладшоу из трех-пяти картинок или более картинок. Искать надо по фразе «Слайдшоу в шапке блога»

PS. Бедные, бедные японцы — я имею ввиду последствия катастрофического землетрясения…Я бы на месте нашего правительства объявил наши Южные Курилы свободной экономической зоной с правом заселения их представителями Японской нации с тем, чтобы вновь прибывающие вносили посильную лепту в передислокацию оттуда наших воинских частей…Они бы мигом построили там рай на земле…была бы обоюдная большая польза, да вот жаль — бодливой корове бог рогов не дает. Имею ввиду что мои эти слова власть имущие не услышат.

PPS. Сегодня, 16.03.2011 Артем Беляйкин с утра прислал письмо с призывом помочь Японии всвязи с катастрофическими там событиями, пожертвование весьма скромное — 50 руб, на всякий случай отправил, вдруг действительно дойдет по назначению, а ведь поговорку «С мира по нитке — голому рубашка» еще никто не отменял….

Анекдоты от iGoogle:

Кто-нибудь знает, почему шмотки, которые как раз впору, после стирки садятся, а те, которые чуть великоваты, сука, РАСТЯГИВАЮТСЯ?!?!

……………………………………………………………………………………………………………..

- Мистер Медведев, почему в вашей стране стало так много миллиардеров?
- Видите ли, в прошлом году мы дважды проиндексировали пенсии.