Създаване на красив блок върху основната колекция на Wordpress
Създаване на красив блок на главната страница
Докато работех по адаптирането на шаблоните от китайката, забелязах, че в някои от шаблоните блокът за извеждане на снимки от каталога на FlickR беше направен по някакъв начин, а именно: ако снимките, които имате в каталога, са с различни размери, тогава в някои шаблони те не изглеждат много добре, както в днешния шаблон преди моята намеса в стиловия файл, вижте снимката по-долу:
Да приемем, че сте разглеждали няколко шаблона за китайски дами и в един от тях сте видели, че блокът FlickR се изобразява прекрасно. Да кажем, че това е шаблон Centric2, който не съм превел, но има просто блок от снимки, показани в рамки и в един размер.
И вие си задавате шаблон на Bento Magazine (или друг), в който снимките са като на снимката по-горе. Какво да правя?
Надявам се, че много от вас знаят и ще кажа няколко думи за тези, които не знаят, че WordPress шаблоните са изградени според принципа на „блоково оформление“. Block verst е термин, който означава, че всички основни свойства (дизайн, оформление на данни) се изготвят с помощта на стилов файл - style.css, а кодът за показване на свойства, информация, обработка на потребителски заявки и достъп до базата данни - в .php файлове. Всяко свойство на нашите блокове е записано в така наречения div:
Отворете стиловия файл на шаблона и потърсете класа "flickr":
Свойството "sidebar" има три класа "flickr", 2 от които отговарят за нашите снимки. И сега разглеждаме същия клас в нашия шаблон Bento, в който няма рамки:
Виждате ли разликата? Изображението (img) има само отстъп от 2 пиксела от ръба на блока - и това е, без рамки и условия за показване на снимки със същия размер. И в горния имот -всичко това е там: цветът на рамката (#EACACA), нейният размер (рамка: 4px) и други свойства...
Знаете ли кой е най-често срещаният режим за всички компютърни потребители без изключение и няма значение в коя програма е? Точно така - копи-пейст. Копиране и поставяне. Това е като изобретяването на колелото. Най-ценното от всичко, което човек е измислил при работа с компютър.
Сега просто трябва внимателно да преместим кода на свойствата на стила за фоторамките в нашия шаблон Bento. Копирайте от шаблона Centric2 всичко, свързано със свойството "flickr img":
Просто сменяме цвета - #EACACA на желания. Взех цвета от заглавието. Как избрахте? Вече писах за това.
Какво стана накрая? Отворете шаблона Bento в режим Демо и ще видите: рамки около снимката и всичките 6 снимки са с еднакъв размер: 65 на 65 пиксела:
Създаване на красив блок на главната страница
Докато работех по адаптирането на шаблоните от китайката, забелязах, че в някои от шаблоните блокът за извеждане на снимки от каталога на FlickR беше направен по някакъв начин, а именно: ако снимките, които имате в каталога, са с различни размери, тогава в някои шаблони те не изглеждат много добре, както в днешния шаблон преди моята намеса в стиловия файл, вижте снимката по-долу:
Да приемем, че сте разглеждали няколко шаблона за китайски дами и в един от тях сте видели, че блокът FlickR се изобразява прекрасно. Да кажем, че това е шаблон Centric2, който не съм превел, но има просто блок от снимки, показани в рамки и в един размер.
И вие си задавате шаблон на Bento Magazine (или друг), в който снимките са като на снимката по-горе. Какво да правя?
Надявам се, че много от вас знаят, а тези, които не знаят, ще кажа дведуми, че шаблоните на WordPress са изложени на принципа на "блоково оформление". Block verst е термин, който означава, че всички основни свойства (дизайн, оформление на данни) се изготвят с помощта на стилов файл - style.css, а кодът за показване на свойства, информация, обработка на потребителски заявки и достъп до базата данни - в .php файлове. Всяко свойство на нашите блокове е записано в така наречения div:
Отворете стиловия файл на шаблона и потърсете класа "flickr":
Свойството "sidebar" има три класа "flickr", 2 от които отговарят за нашите снимки. И сега разглеждаме същия клас в нашия шаблон Bento, в който няма рамки:
Виждате ли разликата? Изображението (img) има само отстъп от 2 пиксела от ръба на блока - и това е, без рамки и условия за показване на снимки със същия размер. И горното свойство има всичко: цвят на границата (#EACACA), неговия размер (граница: 4px) и други свойства...
Знаете ли кой е най-често срещаният режим за всички компютърни потребители без изключение и няма значение в коя програма е? Точно така - копи-пейст. Копиране и поставяне. Това е като изобретяването на колелото. Най-ценното от всичко, което човек е измислил при работа с компютър.
Сега просто трябва внимателно да преместим кода на свойствата на стила за фоторамките в нашия шаблон Bento. Копирайте от шаблона Centric2 всичко, свързано със свойството "flickr img":
Просто сменяме цвета - #EACACA на желания. Взех цвета от заглавието. Как избрахте? Вече писах за това.
Какво стана накрая? Отворете шаблона Bento в режим Демо и ще видите: рамки около снимката и всичките 6 снимки са с еднакъв размер: 65 на 65 пиксела: