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

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

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

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

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

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

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

<h4>Flickr Photos</h2></h4>
<h4>< ?php if (function_exists('get_flickrRSS')) get_flickrRSS(); ?></h4>

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

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

 #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; }
 

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

 #sidebar .flickr {
 text-align: center;
 }
 #sidebar .flickr img {
 margin: 2px;
 }
 

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

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

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

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

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

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