Caixes de Johnson i com fer-los

per flaminglacer el 23 febrer 2010
Eines

Si ets nou aquí, pot ser que vulgui subscriure's al meu RSS feed. Gràcies per la seva visita!

Caixes de Johnson és una d'aquelles coses que es refereix a tot el món i assumeix que tothom sap d'ells i com fer-ho - però en la meva experiència no ho fan. Arran de l'opció "pàgina en blanc 'la setmana passada que la majoria de la gent va veure com un potencial de vendes / pàgina compressió sembla lògic seguir amb una mica de Caixes de Johnson.

Per a qui no ho sap, que són els quadres de color amb una línia sòlida o trencada al voltant d'ells que algun text èmfasi, en general un benefici del producte, o el preu de venda - tot el que vulguis cridar l'atenció. Es tracta d'un mètode provat per a l'augment de conversions. Llavors, com fan?

En primer lloc es necessita el tros de codi que anar en el seu custom_css.php que especifica l'estil i el tipus de caixa, a continuació, la NED per posar alguna cosa en el text de la seva pàgina en què crida a la casella.

Una versió senzilla es dóna aquí - es pot elaborar-hi el que vulguis, però això li donarà un quadre bàsic

/*--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*/

Això li donarà una caixa centrada amb el text centrat i una línia sòlida al voltant d'ell. La línia contínua no vol ser molt més que 4px i sovint menys. Si voleu una frontera trencada, just substituir "sòlid" amb "guions". Si voleu una alçada de líquid per al seu quadre, simplement et perdis la línia d'alçada.

Per utilitzar el lloc següent en el quadre de text de la seva pàgina (utilitzant l'editor d'HTML, no el visual a WP)

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

Això és el que utilitza per generar el quadre de sota encara que el color més habitual de la frontera és # cc0000

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

i això és el que vaig posar a la meva pàgina: --

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

Es tracta d'un quadre de Johnson

Si voleu més d'un estil de Johnson Caixa llavors només donar a cada un configurar un nom diferent div.

També pot utilitzar un estil en línia, però em sembla la versió de CSS més fàcil quan em la creació de plantilles, però en nom de l'exhaustivitat, aquí està el codi, que es faria servir en l'editor 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>

Això pot ser una mica bàsic perquè alguns de vosaltres, però espero que sigui útil a algú per aquí.

comment } (1 comentari)

Tesis Neteja Page Opció

per flaminglacer el 18 febrer 2010
Eines

Estic Truly, Madly, profundament enamorat de tesi - és el millor tema de wordpress, sense excepció. Val la pena cada cèntim que paga per això. Pagaría molt més. És probablement la inversió més valuós que he mai fet per al meu negoci. Una de les alegries és el fàcil que és fer que es vegi a diferència de si mateix. Necessitava un simple pàgina en blanc per a un client, amb res en ell, pel que podia fer el que voldríem a través del backend de wordpress i amb tota la funcionalitat de SEO Aquesta tesi porta més tota la resta. Tot el que volia era un contenidor de contingut amb una vora fi.

CSS no és un dels meus punts forts, però vaig decidir que havia de fer front a aquest petit problema i arribar a alguna cosa útil. Aquest és el resultat de la meva feina, espero que els resulta tan útil com jo. El meu agraïment als membres de els fòrums DIYthemes la saviesa col.lectiva em va ajudar a aconseguir aquest objectiu.

He marcat cada bit del codi perquè puguis veure el que fa, i fer els seus propis canvis segons sigui necessari per als colors i així successivament.

Això produirà una neta, pàgina en blanc, sense capçalera, navegació, barres laterals o peu de pàgina. H1, H2 i H3 han estat cridat a ser més grans i en un color específic, i els enllaços seran destacats amb un fons de color a hover, però aquests elements pot ser separat si així ho desitja. Així mateix, la mida del recipient i les fronteres es pot canviar. "comentaris de tancament" també ha estat eliminat. Si voleu fer canvis ha de ser bastant simple per veure el que s'ha de treure.

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

. Capçalera # cleanpage (padding: 0; border-bottom: 0em;)
. Capçalera cleanpage # # logotip (display: none;)
. Header # # cleanpage lema (display: none;)
. Cleanpage. Menu (display: none; border: none;)
. Cleanpage # content (margin: 0 auto; float: none;)
. Cleanpage sidebars # (display: none; border: none;)
. Cleanpage # tabs (display: none;)
. Content_box # cleanpage (background: none;)
. Cleanpage. Comments_closed (display: none;)
. Cleanpage # footer (padding-bottom: 0; border-top: 0em;)

/ *- [Fons de color per a surar en els enllaços] -* /
. Cleanpage a (color: # SEU COLOR-IN-HERE;)
. Cleanpage a: hover (color:; background: # SEU COLOR-IN-HERE;)

/ *- [Fi de color de fons per a surar en els enllaços] -* /

/ *- [Encapçalaments H1, H2, H3 format] -* /

. # Content cleanpage h3 (font-size: 18pt; font-weight: bold; color: # SEU COLOR EN AQUÍ)
. Cleanpage # content h2 (font-size: 24pt; font-weight: bold; color: # SEU COLOR EN AQUÍ)
. Cleanpage # content h1 (font-size: 30pt; text-align: center; font-weight: bold; color: # SEU COLOR EN AQUÍ)

/ *- [Fi encapçalats H1, H2 format] -* /

/ *- [Container] -* /

. Cleanpage # container (width: EL SEU AMPLE A HEREpx; margin-top: 1em; border: 0.2em solid # SEU COLOR-IN-HERE;)

/ *- [Cap de contenidors] -* /

/ *- [Fi de Disseny Per a la neteja Page] -* /

Per usar-lo, simplement fer els ajustaments en termes de color, etc en el codi indicat per adaptar-se a la sensació del seu lloc web i enganxar-lo a l'arxiu de custom_css. En crear la pàgina en si només ha d'afegir "cleanpage 'en el quadre de la classe CSS a la pàgina.

Thesis Cleam page

Vostè pot veure la pàgina real de la mostra aquí de tesi Neteja Page

Pot ser que no sigui la més elegant de codi - Jo no sóc noi xiular allà, però demostra un cop més el versàtil que el tema fabulós de tesi és. Si no el té, faci's un favor i fer-ho - són diners ben gastat.

comments } (5 comentaris)

Qui és el teu lloc web?

17 gener 2010

Hi ha hagut un munt de redecorar passant en la meva vida en el moment - la sala d'estar i el bloc. El saló està més a prop d'acabat que el bloc i l'últim va acabar em va donar que pensar.
Vaig passar ahir per la presa (es modifiquen per ser exactes) les cortines de la sala d'estar, perquè [...]

Llegir l'article complet →

Delicious Dropbox

13 gener 2010

Un amic em va dir l'altre dia, quan es parla d'alguns nous geek "Estem toolsmiths" i tenia tota la raó. I love New brillants joguines i eines. Estàvem parlant de Google Wave * en el moment de l'eina, però vull assenyalar a la seva atenció avui en dia és Dropbox - una eina fantàstica per a qualsevol que [...]

Llegir l'article complet →

Una cosa petita

8 gener 2010

Estic en una mena d'estat d'ànim filosòfic en l'actualitat. Ha estat una setmana amunt i avall en gran part a causa del clima fred que detesto, però han succeït tres coses avui en dia que em van donar a saber quant petites coses assumpte i em va donar l'avantatge afegit de inspiració.
El primer que va passar va ser el [...]

Llegir l'article complet →

I'm Back!

6 gener 2010

No he publicat res al meu blog per molt de temps. Hi ha moltes raons, cap de les quals vaig a entrar perquè portaria a una llarga i convertit ràpidament en un auto-justificació gemec planyívol. És simplement la forma en què es .
No obstant això, els temps estan canviant, tinc plans i aquest bloc és una part [...]

Llegir l'article complet →

West Midlands Meetup

21 febrer 2009
Imatges en miniatura per West Midlands Meetup

Acabo de tornar de la reunió a West Midlands, a Evesham, cansat però feliç com ells diuen. Va ser una gran tarda i ben val la pena l'esforç d'organització de la mateixa.
Érem un grup selecte amb una gamma molt diferents de l'experiència, i tot tipus de conjunts d'habilitats diferents, però fet per un tot harmònic [...]

Llegir l'article complet →

West Midlands Meetup

10 febrer 2009

He estat amenaçant amb fer-ho per un temps i finalment va aconseguir ordenats! Per a qualsevol persona que ha estat un dels meetups celebren a tot el món, vostè sabrà el beneficiós que són - i també divertida. Tinc records feliços de la reunió a Manchester que va posar en marxa el Dia del Desafiament Trenta [...]

Llegir l'article complet →

Turning the Tables

5 febrer 2009

És un fet ben conegut que he il limitada admiració per Seth Godin, el que probablement no saben és que he passat les últimes setmanes i mesos, cada vegada més virulents en les meves diatribes contra la Numpties que prediquen el càstig, la tristesa i desànim a la diversos mitjans de comunicació - M'estic convertint en la dona que [...]

Llegir l'article complet →

Des de el 14 de gener Feeds de 2009

14 gener 2009

Aquesta és una extensió del Firefox petit i encantador per a tots els constructors de la web per aquí - ColorZilla ofereix tot un seguit d'eines per a l'anàlisi dels colors i així successivament en els llocs web. Molt feliç de tenir aquesta en puntes dels meus dits.
Aquest vi com una sorpresa per a mi - Jo ni tan sols adonar-se d'aquest [...]

Llegir l'article complet →