Главная - Без рубрики - Делаем красивый блок на главной

Делаем красивый блок на главной

Работая над адаптацией шаблонов от китаянки, обратил внимание, что в некоторых из шаблонов блок вывода фотографий из каталога FlickR сделан кое-как, а именно: если фото у вас лежат в каталоге разного размера, то в некоторых шаблонах они выглядят не очень красиво, как например в сегодняшнем шаблоне до моего вмешательства в файл стилей, смотрите на картинке ниже:

flickr И так они выглядели в некоторых шаблонах тоже. Нет рамки вокруг фотографий, фотографии разного размера и т.д.

А в ряде других шаблонов автор не поленился сделать красиво. Создал симпатичную рамку, цвет которой подобран под общий стиль шаблона.

Допустим, вам понравился шаблон Bento, который я сегодня выложил, но в нем некрасиво стоят фотографии из FlickR. Как исправить, чтобы было красиво? я расскажу вам, а вы внимательно читайте и делайте как я.

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

А вы себе поставили шаблон Bento Magazine (или другой), в котором картинки как на снимке выше. Что делать?

Для начала, открываем шаблон Centric2, открываем в редакторе UnicEdit файл sidebar.php, в котором расположен код вывода блока фотографий Flickr. Ищем этот код и видим, что он выглядит вот так:

[php] <!— begin flickr photos —>
<div>
<h2>Фото на FlickR</h2>
<div class="flickr"></div>
</div>
<!— end flickr photos —>
[/php]

Надеюсь, многие из вас знают, а кто не знает, скажу два слова, о том, что шаблоны WordPress верстаются по принципу «блочной верстки». Блочная верста — это термин, который подразумевает, что все основные свойства (дизайн, макетирование данных) оформляются с помощью файла стилей — style.css, а код вывода свойств, информации, обработка запросов пользователей и обращений к БД — в файлах формата .php. Каждое свойство наших блоков прописано в так называемом диве: <div>. Если стоит тег id=»имя» — значит, это свойство. Если стоит class=»имя» — это класс определенного свойства стиля. Смотрим выше код и видим, что нашему блоку Фотогалерея Flickr присвоен класс «flickr». Затем выводится запрос к функции (которую обрабатывает плагин Flickr-RSS), и мы получаем наши фотографии в красивых рамках. Рамки — это работа нашего дива, который описан в файле стилей. Надеюсь, объяснил достаточно понятно, как говорят — для блондинки :))))

Открываем фал стилей шаблона и ищем класс «flickr»:

[php]

#sidebar .flickr { display:inline; }

#sidebar .flickr a img { margin:2px; border:4px solid #fff; width:65px!important; height:65px!important; }

#sidebar .flickr a:hover img { border:4px solid #EACACA; }

[/php]

В свойстве «sidebar» есть три класса «flickr», из них 2 — отвечают за наши фотографии. А теперь смотрим тот же класс в нашем шаблоне Bento, в котором рамок нет:

[php]

#sidebar .flickr { text-align: center; }

#sidebar .flickr img { margin: 2px; }

[/php]

Видите разницу? Картинка (img) имеет только отступ 2 пикселя от края блока — и все, никаких рамочек и условий для вывода фото одинакового размера. А в верхнем свойстве — все это есть: и цвет рамки (#EACACA), и ее размер (border: 4px), и другие свойства…

А знаете, какой самый распространенный режим у всех без исключения пользователей компьютера, и не важно — в какой программе он сидит? Правильно — копипаст. Скопировать и вставить. Это как изобретение колеса когда-то. Самое ценное из всего, что человек придумал в работе с компьютером.

Теперь нам надо просто аккуратно перенести код свойства стилей для рамок фотографий в наш шаблон Bento. Копируем из шаблона Centric2 все, что касается свойства «flickr img»:

[php]

#sidebar .flickr img { margin:2px; border:4px solid #a2cdbb; width:65px!important; height:65px!important;

[/php]

Вот только меняем цвет — #EACACA на нужный. Я взял цвет из заголовка. Как подобрал? Я писал уже об этом.

Что получилось в итоге? Откройте шаблон Bento в режиме Демонстрация и вы увидите: рамки вокруг фото и все 6 фотографий одинакового размера: 65 на 65 пикселей:

Информационный партнер: www.medbeauty.ru — стоматологическая клиника. Ваши зубы — это их дело.

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*