Латинос Альфредо во главе “Белой Шляпы” благодаря css и html

Ну вот и свершилось то, о чем я думал днями и ночами. Латинос, которого я полюбил за эти месяцы, добрый и романтичный латинос, которого зовут Альфредо, стал зримым “наставником” моего блога.

Мои скромные знания CSS и HTML наконец позволили усадить Альфредо присматривать за “Белой Шляпой” и в награду за работу подать ему сигару и бокал вина.

Вкратце мне удалось описать жизнь Альфредо в моей статейке Логотипы для блога. Оказалось, что он глава обычной гаванской семьи, каких тысячи на Кубе. Живут они со своей старой Хуанитой бедно, но счастливо и никакие невзгоды не могут стать препятствием на пути их тихой стариковской любви. Дети их давно стали взрослыми и разлетелись кто куда, только младшая дочка никак не может найти свою судьбу и после второго развода опять вернулась в отцовский дом. Карьера Альфредо не сложилась, отчасти из-за его вспыльчивости и нетерпимости к несправедливости начальства, отчасти от того, что средний сын пять лет назад сбежал в США, предав «идеалы» Че Гивары и Кастро. Альфредо так и вышел на нищенскую пенсию обычным рабочим на табачной фабрике, не сумев сделать ни одного шага по карьерной лестнице. Сейчас Альфредо со своей Хуанитой собрался к дочке своего старого соседа и друга детства,  на свадьбу и по этому случаю откупорил бутылочку красного вина, которая хранилась у него еще с того времени, как несколько лет назад его племянник Луис вернулся из командировки в Венесуэлу, где он осваивал новую профессию по намотке электродвигателей для глубинных водяных насосов на большом заводе в столице дружественной республики. На торжественные случаи в семье Альфредо все мужчины всегда надевали белые широкополые шляпы и закалывали красный цветок в петлицу. Так было и на этот раз. Вот скоро соберется старая Хуанита и поможет закрепить на пиджаке красную розу, купленную по дешевке у бедной уличной торговки  накануне вечером.

За основу была взята вот эта фотография:

2

Пришлось немного обработать ее в фотошопе и для вставки в «шапку» осталась только ее маленькая часть, а поскольку красного цветка не стало видно я добавил еще и розу, а для завершения картины еще и бокал с вином. И вот что получилось:

Но где же сигара?! Как может быть кубинец без сигары?! Никак! Вот я и добавил вот из этого исходника:

Вот такую вот руку с сигарой и подрисовал немножко дыма:

Потом в файле темы style.css два класса и назначил им фон соответственно латиноса с розой и руку с сигарой. Код выглядит так:

[sourcecode language='css']
.sigar {
background: url (images/sigar.png);
width: 98px;
height: 122px;
position: absolute;
display: block;
top:32px;
left:80px;
z-index:100;
}
[/sourcecode]

И следующий

[sourcecode language='css']
.rose {
background: url (images/rose.png);
width: 370px;
height: 120px;
position: absolute;
display: block;
top:5px;
left:175px;
z-index:100;
}
[/sourcecode]
А в файле header.php просто прописываем две простые строчки:
[sourcecode language='html']

[/sourcecode]
Стоит ли говорить, что если кто-то из моих читателей возьмется делать дополнительные слои к своей теме, то приведенные коды не подойдут ему по некоторым, а скорее всего, по всем параметрам. Но как шаблон их можно использовать, а значения подставлять свои. Повторим, что же самое главное в создании дополнительного слоя в теме для WordPress.

1. Создать в файле *.css темы класс с абсолютным позиционированием (position: absolute) и отображением в виде блока (display: block).

2. Не забыть задать для созданного блока значение по оси Z, иначе он не будет виден совсем или будет видна только его часть

3. Создать прозрачную картинку *.png и загрузить ее на сервер

4. Задать созданную в п.3 картинку фоном ранее созданному блоку, указав относительный путь к ней

5. В месте куда мы помещаем блок присвоить стиль созданного класса (

<div class="newblock"></div>)

Не знаю стоит ли, но теперь мне с моим Альфредо хочется попробовать записаться в какой нибудь рейтинг блогов с оригинальным оформлением. Хотя, для этого еще многое не сделано.

Хоть я и говорил, что не буду делать вкладки в сайдбаре, все таки я, скорее всего, передумаю и один или больше блоков на jquery, все таки сделаю, по крайней мере, посмотрю и попробую, что же из этого получится.

  1. alekssad

    Думаю, что в следующий раз мы сможем увидеть невесту, у которой Альфредо был на свадьбе. 😆

  2. alekssad

    Думаю, что в следующий раз мы сможем увидеть невесту, у которой Альфредо был на свадьбе. 😆

  3. Марина

    Романтичная история и прекрасное оригинальное оформление. У меня пока ничего не получается с дизайном, чтобы придумать что-то стоящее. Завидую белой завистью. Здорово придумано!

    1. eavasi

      Спасибо Марина, мне и самому эта идея очень нравится. Жаль только, что подобные идеи у меня рождаются очень редко и крайне долго вынашиваются. А для того, чтобы изучить основы css и html надо отвлечся от чего то другого и тогда все точно получится. Марина, поверь, что там нет ничего сложного. Все элементарно.

  4. Марина

    Романтичная история и прекрасное оригинальное оформление. У меня пока ничего не получается с дизайном, чтобы придумать что-то стоящее. Завидую белой завистью. Здорово придумано!

    1. eavasi Автор записи

      Спасибо Марина, мне и самому эта идея очень нравится. Жаль только, что подобные идеи у меня рождаются очень редко и крайне долго вынашиваются. А для того, чтобы изучить основы css и html надо отвлечся от чего то другого и тогда все точно получится. Марина, поверь, что там нет ничего сложного. Все элементарно.

    1. eavasi

      Олли, ты второй раз хвалишь меня за моего Альфредо, ты к нему не равнодушна, он тебе симпатичен. )))

    1. eavasi Автор записи

      Олли, ты второй раз хвалишь меня за моего Альфредо, ты к нему не равнодушна, он тебе симпатичен. )))

  5. Зайва Игорь Леонидович

    Все никак к твоему блогу не привыкну, постоянно себя чувствую «как в гостях» на официальном собрании... 🙂 Как ни зайду, постоянно что-то изменено...

    Кстати, CSS2 просто супер, а 3.0 позволяет вообще чуть ли не мультяшную супер-мега анимацию лепить... Всё на грани фантастики... Посмотрел примеры и замер... Эх, жаль CSS3.0 пока только один Хром поддерживает, а то б я уже лепить его начал на свой блог. 🙂 Эх, вспупаем в новую эру программирования... 🙄

    1. eavasi

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

      Твоя реакция на изменение вида Белой Шляпы вызвана двумя маленькими изменениями, я взял анонсы записей на главной и в архивах в рамочки и на один тон сделал темнее все используемые в css цвета, только и всего, а вид уже совсем другой. ))

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

      Если говорить о css3 то я уверен, что мозилла не на много отстанет от Хрома и скоро выйдет плагин, который даст возможность поддерживать этот новый формат стилей.

  6. Зайва Игорь Леонидович

    Все никак к твоему блогу не привыкну, постоянно себя чувствую «как в гостях» на официальном собрании... 🙂 Как ни зайду, постоянно что-то изменено...

    Кстати, CSS2 просто супер, а 3.0 позволяет вообще чуть ли не мультяшную супер-мега анимацию лепить... Всё на грани фантастики... Посмотрел примеры и замер... Эх, жаль CSS3.0 пока только один Хром поддерживает, а то б я уже лепить его начал на свой блог. 🙂 Эх, вспупаем в новую эру программирования... 🙄

    1. eavasi Автор записи

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

      Твоя реакция на изменение вида Белой Шляпы вызвана двумя маленькими изменениями, я взял анонсы записей на главной и в архивах в рамочки и на один тон сделал темнее все используемые в css цвета, только и всего, а вид уже совсем другой. ))

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

      Если говорить о css3 то я уверен, что мозилла не на много отстанет от Хрома и скоро выйдет плагин, который даст возможность поддерживать этот новый формат стилей.

  7. Уведомление: Посвящение моему блогу | БЕЛАЯ ШЛЯПА

Добавить комментарий

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.