En ungefärlig lösning, efter lite googlande, hittades på CSS-Tricks. En snabb modifikation senare så var det löst.

Så här gör du Facebooks Like Box och Twitter Follow Button responsive:

.fb_iframe_widget iframe[style], iframe[style].twitter-follow-button { width: 100% !important; }

Håll till godo.

(Förresten, responsive på svenska – vad säger ni? Använda responsivt(?)/tillgängligt/mottagligt eller vad? Svårt att hitta ett bra ord…)

Well, så tänkte i alla fall jag.

Körde igång Proversionen och började knacka upp ett par databaser, körde in lite installationer och förberedde ett par demon. Efter en helg kom jag tillbaka och såg att Pro-versionen gått ut, nåväl – inte så stor sak, basversionen fungerar ju fortfarande alldeles ypperligt.

Nej det gör den inte. Basversionen använder inte samma filer som Proversionen. Tydligen så kan du uppgradera till Pro men inte nedgradera till Basic.

Alltså, om du inte planerar att köpa loss mjukvaran, testa och utveckla inte på med Proversionen. Du sparar dig många timmars dubbelarbete på detta.

I övrigt är MAMP en fin-fin liten webbserver vilken alltid fungerar bra utan krångliga konfigurationsfiler.

Länge sedan ett lördagsprojekt kördes igång, nu vart det dags igen. Sambo som jobbade, fem öl, lite havssaltad choklad och dåligt utbud på TV ledde till att jag knackade ihop ett snabbt bildgalleri vilket senare utvecklade sig till ett plugin vilket jag tänkte dela med mig av.

Så, varför bygga ännu ett galleritillägg till WordPress när det redan existerar 1000-tals? Jo, ingenting passar mig och 99% har något slags fel och passar inte alls mina behov på avskalad enkelhet.

Felen som finns i de befintliga är bland annat att det innehåller 90% fler funktioner än vad som egentligen behövs, krångligt UI som kräver 100 inställningar innan man är redo och köra, egna menyer och shortcodes som inte direkt är användarvänliga och känns klumpiga.

Vad skiljer då detta tillägget mot de flesta andra? För det första så finns det inga direkta inställningar, ladda upp alla bilder i ett inlägg eller en sida, tryck på knappen och du är klar. Det skapar automatiskt två nya bildstorlekar vilka lägger sig prydligt bredvid varandra. Inkludering av Fancybox vilket ger bilderna en lightboxeffekt samt möjlighet att bläddra genom galleriet.

Installation

1. Ladda ned, packa upp och lägg i mappen wp-content/plugins
2. Aktivera tillägget
3. Lägg till ett nytt inlägg eller en ny sida, ladda upp dina bilder, du behöver inte infoga dem i inlägget, och tryck på Cynatic WP Gallery-knappen i editormenyn.
4. Klart!
5. Alternativ: Editera cwp-gallery.php, ändra $width = 560; till $width = 600; för att öka bredden på bilderna.

Lite saker att känna till om projektet

1. Nej, problem med IE6 och IE7 kommer inte fixas eller lösas.
2. Gamla bilder som redan är uppladdade kommer inte fungera, ladda upp dem igen eller ladda hem ett tillägg som formar om bilderna – ex. Regenerate Thumbnails.
3. Buggar? Konstigheter? Det finns säkert en hel del. Snacka om dem i kommentarerna nedan.
4. Tillägget är inte testat i Internet Explorer, enbart senaste versionerna av Chrome, Firefox och Safari.
5. Fungerar bra med TwentyEleven (använd bredd 560) och TwentyTen (använd bredd 600).
6. Varje bild har ett val för att exkludera bilden från galleriet.

Uppdateringar

2011-07-18, lade till en saknad css-klassen. Fixade exkludering av bilder.

Ladda ner Cynatic WP Gallery

Demo med bredden 560px

So far så good.

Problemet är bara att background-position-x/y inte är standardkod, läs kommentarerna i länken, utan är något som MS tyckte verkade häftigt och implementerade i IE5.5. Detta i sig är absolut inget problem då IE och Chrome (Safari?) stödjer tilltaget, men så fort jag råkade kontrollera sidan i Firefox så låg inte bilden alls vart jag ville att den skulle vara.

Nåväl, nu är ju inte problemet så svårt att lösa eftersom man generellt använder “shorthanden” background-position: <x> <y>; istället. Men att det inte var en del av standarden var ganska nytt för mig. Ännu ett skäl att inte gilla IEs gamla upptåg.

Det kommer finnas länkar som står ut med en annan färg än brödtexten, det kommer finnas en bild som oftast är centrerad eller högerställd. Det kommer finnas en slags meny som står ut för att visa och hjälpa till med navigationen.

Jag har arbetat på mitt lilla WordPresstema ett tag nu och har tänkt väldigt mycket på hur vi kan ta detta ett steg längre. Att göra precis det som besökaren förväntar sig men ändå implementera det lilla extra.

Ta mina länkar till exempel, titta på texten bredvid logotypen i min header, rör musen över. En liten, liten transition är implementerad som pågår i 0.2 sekunder. Det är inte mycket men ändå något som man reagerar på, upplevelsen blir helt plötsligt något helt annat än om färgen byts direkt på det gamla vanliga hårda viset.

En annan sak är menyn, också det smyckad med lite CSS3-godis, den är till 75% klar med sina subtila effekter.

Det viktigaste är ändå att upplevelsen inte blir lidande av överanvändning av effekter, exempelvis använder jag enbart text-shadow på rubriken som har formatet för ensam bildpublicering. Tanken är att effekterna inte ska synas, de ska kännas och upplevas. Vi tillför någon slags tredje dimension till de statiska plattorna på sajten.

Nästa projekt är att få min sidebar riktigt användbar, tanken är att dynamiskt kunna få in två sidebars vilket användaren kan välja vilken av dem som ska synas. Ett slags skal vilken kan visas, döljas och flyttas dynamiskt beroende på hur och vad som är relevant. Även någon slags relevansberäkning av widgets vore trevligt att få till via en “automatisk” prio-process – även om det inte ligger längst upp på listan just nu.

Hittade via Quirksmode (demo finns på sidan) attributet ::selection som helt enkelt stylar om den markerade texten på en webbsida via CSS.

      ::selection { background-color: #ccc; color: #000; }
      ::-moz-selection { background-color: #ccc; color: #000; }

Enkelt, snyggt och kan ge den där lilla extra effekten på vissa projekt. Givetvis kan du punktmarkera vissa element med ex. p::selection {}. Fungerar givetvis enbart i moderna webbläsare.

Stänga av den görs enkelt med:

add_filter( 'show_admin_bar', '__return_false' );

Stoppa in koden i functions.php.

Vill du istället blocka en speciell användarroll (exempel så behöver ju oftast inte subscribers tillgång till panelen alls):

/* remove subscriber adminbar */
wp_get_current_user();
if ($current_user->user_level == 0) {
     add_filter( 'show_admin_bar', '__return_false' );
}

Enkelt, snyggt och smidigt.

Visste ni att ett element med absolut position som ligger ovanför eller under floatade element och i en relativt positionerad wrapper, måste själv ha en wrapper? IE7 tycker detta i allafall, när man också är på gång så kan vi dra till med en margin-top: -3px på den wrappern vilket enbart syns i den nyss nämda webbläsaren.

Resultatet blev Journalgrodor.se (hur nu domänen var ledig vet jag inte då det är ett gammalt koncept från Dassboken bland annat). Syftet, upplägget och tanken bakom är exakt samma som eminenta Skyltat.se, Tjuvlyssnat med mera. Skicka in och det publiceras.

Enkelt som en plätt med WordPress, lite meck med kommentarerna och några fina tillägg och kodsnuttar för att dela inlägg. Perfekt avkoppling en lördagskväll.

All credd egentligen till Sandra (som blev fan av Journalgrodor på Facebook, annars hade jag aldrig kollat om domänen fanns eller inte).