Джонсън кутии и "Как да ги направи

от flaminglacer на 23-ти Февруари 2010
Инструменти

Ако сте нов тук, може да искате да се абонирате за моята RSS емисия. Благодарим за посещение!

Джонсън клетки са едно от тези неща, че се отнася за всички и предполага, че всеки знае всичко за тях и как да ги правим - но в моя опит, те не са. След избор на "чиста страница" миналата седмица, което повечето хора забелязан като потенциален продажби / свиване на страница изглежда логично да го последва с малко за Джонсън кутии.

За всеки, който не знае, те са тези цветни кутии с твърда или начупена линия в близост до тях, че акцент някакъв текст, обикновено полза на продукт или продажната цена - всичко, което искате да привлече вниманието. Те са доказан метод за увеличаване на реализациите. И така, как да ги направиш?

Преди всичко ще ви е необходима малко код, за да отидете в custom_css.php, която задава стил и вид на кутията, тогава Нед пуснати за нещо във Вашата страница текст, който призовава до тази графа.

А просто версия е дадена тук - можете да разработва върху него както ти е угодно, но това ще ви даде основна клетка

/*--Johnson-Box--*/
div#johnson-box{
display: center;
background: #YOUR-COLOR-CHOICE-HERE;
border: YOUR-BORDER-WIDTH-HEREpx solid #YOUR-COLOR-CHOICE-HERE;
width: YOUR-WIDTH-HEREpx;
height:YOUR-HEIGHT-HEREpx;
text-align: center;
}
/*--End Johnson-Box*/

Това ще ви даде една центрирана центрирана кутия с текст и непрекъсната линия го кръг. Твърдият линия не иска да бъде много повече от 4px и често по-малко. Ако искате счупен граница просто заменете "твърди" с "спусна. Ако искате течност височина на кутията, просто пропуснат линията височина.

За да използвате полето следното място във Вашата страница текст (с използване на HTML редактор, не на визуалната един в WP)

<div id="johnson-box">
YOUR TEXT AND IMAGES HERE
</div>

Това е, което се използва за генериране на полето по-долу все пак по-обичайния цвят на границата е # cc0000

/*--Johnson-Box--*/
div#johnson-box{
display: block;
background: #f3edfc;
border: 4px dashed #cc99ff;
width: 600px;
height:60px;
text-align: center;
}
/*--End Johnson-Box*/

и това е, което да включа в моята страница: --

<div id="johnson-box">
This is a Johnson Box
</div>

Това е Джонсън Box

Ако искате повече от един стил на Джонсън Box след това просто да създават различен DIV име.

Можете също така да използвате вградени стил, но да намеря версия CSS-лесно, когато аз съм за създаване на шаблони, но за пълнота тук е кодът, който трябва да използвате в HTML редактор.

<div style="display: center; background: #YOUR-COLOR-CHOICE-HERE; border: 1px solid #YOUR-COLOR-CHOICE-HERE; width: YOUR-WIDTH-HEREpx; height:YOUR-HEIGHT-HEREpx; text-align: center;">
YOUR TEXT AND IMAGES HERE
</div>

Това може да бъде малко основна за някои от вас, но аз се надявам, че е полезно за някого там.

comment } (1 коментар)

Дипломна работа Чисто страница Вариант

от flaminglacer на 18-ти февруари 2010 година
Инструменти

Аз съм истински, лудо, дълбоко влюбен в теза - това е най-добрият WordPress тема, без изключение. Струва си всяка една стотинка Платил съм за него. Аз ще плати много повече. Това е може би най-ценната инвестиция Имам едно правени някога за моя бизнес. Една от радостите е колко лесно е да го гледам за разлика от само себе си. Трябваше ми прости, чиста страница за клиента, с нищо за него, така че бихме могли да направим много сме доволни, както чрез WordPress гръб и с всички SEO функционалност тази теза носи плюс всичко останало. Всичко, което исках беше съдържание контейнер с глоба граница.

CSS не е един от моите много силни, но реших, че трябва да се справи с този малък проблем и излезе с нещо използваемо. Това е резултат от моята работа, надявам се да го намерите като полезна, тъй като имам. Своята благодарност към членовете на на DIYthemes форуми, чиято колективна мъдрост ми помогна да се постигне това.

Имам етикетирани всяко късче на код, така че можете да видите какво прави той, и да направи своя собствена промени, необходими за цветове и така нататък.

Това ще произвежда чиста, празна страница, без хедър, навигация, ленти или долния. Н1, Н2 и h3 е оформена да бъдат по-големи и по-специфичен цвят, както и връзки ще бъдат подчертани с цветен фон на мишката, но тези елементи може да бъде взета предвид, ако желаят това. Също така, размера на контейнера и граници могат да бъдат променяни. The 'коментари затворени "също беше премахнато. Ако искате да направите промени, той трябва да бъде сравнително лесно да видите какво трябва да се предприемат.

/*---[Styling For Clean Page]---*/

. cleanpage # Header (подложка: 0; гранично-отдолу: 0em;)
. cleanpage # Header # лого (дисплей: няма;)
. cleanpage # Header # Лозунгът (дисплей: няма;)
. cleanpage. менюто (дисплей: няма; граница: няма;)
. cleanpage # съдържанието (граница: 0 автомобил; поплавъка: няма;)
. cleanpage ленти (# дисплей: няма; граница: няма;)
. cleanpage разделите (# дисплей: няма;)
. cleanpage # content_box (фон: няма;)
. cleanpage. comments_closed (дисплей: няма;)
. cleanpage # Footer (подложка-отдолу: 0; гранично-нагоре: 0em;)

/ *- [Цветния фон на мишката върху връзки] -* /
. cleanpage A (цвят: # Your-ЦВЯТ-В-тук;)
. cleanpage а: навъртам (цвят:; фон: # Your-ЦВЯТ-В-тук;)

/ *- [Край цветния фон на мишката върху връзки] -* /

/ *- [Заглавия h1, H2, H3 форматиране] -* /

. cleanpage # съдържанието h3 (шрифт-размер: 18pt; шрифта тегло: Bold; цвят: # Your-ЦВЯТ-В-тук)
. cleanpage # съдържанието h2 (шрифт-размер: 24pt; шрифта тегло: Bold; цвят: # Your-ЦВЯТ-В-тук)
. cleanpage # съдържанието H1 (шрифт-размер: 30pt; текст изравни: център; шрифта тегло: Bold; цвят: # Your-ЦВЯТ-В-тук)

/ *- [Край заглавия Н1, Н2 форматиране] -* /

/ *- [Контейнер] -* /

. cleanpage # контейнер (ширина: ВАШИЯТ-ширина-IN-HEREpx; марж-нагоре: 1em; граница: 0.2em твърди # Your-ЦВЯТ-В-тук;)

/ *- [Край Контейнер] -* /

/ *- [Край Стайлинг за чиста страница] -* /

За да го използвате, просто да промените по отношение на цвят и т.н. в кода на дадена за да отговарят на облика на вашия сайт и поставете в custom_css файл. При създаването на самата страница просто добавете "cleanpage" в CSS полето клас на страницата.

Thesis Cleam page

Можете да видите действителната страница проба тук теза Чисто страница

Той не може да бъде от най-елегантните на код - Аз не съм фуча хлапе там, но тя показва още веднъж показва колко многостранен на баснословен теза тема е. Ако не сте го, направи си услуга и го - това е добре похарчени пари.

comments } (5 коментара)

Кой е вашия уебсайт За какво?

17-ти януари 2010 г

Има е много redecorating се случва в живота ми в момента - в хола и в блога. Холът е завършен по-близо, отколкото в блога и последното нещо, което приключи ми даде пауза за размисъл.
Прекарах вчера на решения (промяна да бъдем точни) на пердета за хола, защото те [...]

Прочети цялата статия →

Вкусни Dropbox

13-ти януари 2010 година

Един приятел ми каза онзи ден, когато се обсъждат някои нови geekery "Ние сме toolsmiths" и той е напълно прав. Обичам нови блестящи играчки и инструменти. Бяхме обсъждане на Google вълна * в момента, но инструмент Искам да се доведе до вниманието ви днес е Dropbox - фантастично средство за всеки, [...]

Прочети цялата статия →

Малко ли

8-ми януари 2010 г

Аз съм в нещо като философско настроение днес. Той е бил един нагоре и надолу седмица до голяма степен се дължи на студеното време, което аз мразя, но три неща се случиха днес, които доведоха до дома ми колко малки неща въпрос и ми даде на допълнителен бонус от вдъхновение.
Първото нещо, което се случи е [...]

Прочети цялата статия →

Върнах се!

6-ти януари 2010

Не са написали нещо в моя блог за дълго време. Има много причини, нито един от които аз ще отида, защото ще се предприемат за дълго и бързо се превърна в жален самостоятелно, обосноваващи плача. Това е просто начина, по който е .
Въпреки това, времето се променят, имам планове и този блог е част [...]

Прочети цялата статия →

Уест Мидландс Meetup

21-ви февруари 2009
Миниатюрно изображение за Уест Мидландс Meetup

Току-що се върнах от Уест Мидландс Meetup в Evesham, уморени, но щастливи, както казват. Той беше страхотен следобед и напълно си заслужава усилието да го организират.
Ние бяхме една изберете лента с много различни обхват на опит, както и всички видове различни набори от умения, но се предвиди хармонично цяло [...]

Прочети цялата статия →

Уест Мидландс Meetup

10-ти февруари 2009

Аз бях заплашва да направи това за известно време и да имат най-после се оправиш! За всеки, който е един от MeetUps проведе по цялото земно кълбо, ще знаеш как те са от полза - и забавно. Имам щастливи спомени от Манчестър Meetup, че стартира Тридесет Ден Предизвикателство [...]

Прочети цялата статия →

Завъртането на таблици

5-ти февруари 2009

Това е добре известен фактът, че съм безкраен възхищение от Сет Годин, това, което вероятно не знаете е, че са прекарали последните няколко седмици и месеци, става все по-язвителен в моята tirades срещу Numpties, които проповядват гибел, мрак и униние в различни медии - Аз съм жена, която става [...]

Прочети цялата статия →

От Feeds 14-ти януари 2009 година

14-ти януари 2009 год.

Това е прекрасно малко разширение за Firefox за всички тези уеб строители там - ColorZilla предвижда от цяла поредица от инструменти за анализ на цветове и т.н. на уеб сайтове. Много доволни, че това на пръста ми съвети.
Това дойде като нещо като изненада за мен - аз дори не усетиха това [...]

Прочети цялата статия →