Webdesign | Miklas Njor
lifebelt

Hva’ sker der? – Hjælp til WordPress, Photoshop og fotografi – # 1

Hva’ #@&€^ sker der?

WordPress, Photoshop, Webdesign, Photography Lifebelt
Knirker din WordPress og begynder man at kunne se sømmene i designet?
Driller Photoshop eller har du mistet dit foto-mojo?

Tag en dyb indånding. Onkel Miklas – kongen af WordPress, web og fotografi – hjælper dig!

Jack of all trades
Som freelancer er man nødt til at hacke et utal af ting selv. Man kan ikke bare lige ringe til X-afdelingen og få hjælp. Det gør, at man over årene akkumulerer en ufattelig stor portion viden og den viden vil jeg gerne dele ud af.

Jeg får dagligt spørgsmål om fotografi og webdesign. I stedet for at de svar kun bliver delt blandt nogle få, så tænkte jeg, at jeg vil åbne sluserne og lade jer stille spørgsmål, som jeg så svarer på her på bloggen ugen efter. Dette er første gang, så vi må lige se hvad der sker.
Hvis det drejer sig om fotografi, så må du finde dig i, at jeg bruger billederne her på sitet for at illustrere løsningen.

Go on, hit me with your best shot
Hent din lange liste over ting ved WordPress, der får dig i det røde felt. Eller er du gået død i Photoshops mange muligheder? Måske du mangler et spark i skridtet til at komme videre med dit fotografi.

Den eneste jeg beder om som tak, hvis jeg svarer på dit spørgsmål, er lidt linklove i form af et link fra dit site til mig eller måske endda en blogpost om hvor sej jeg er og hvordan jeg reddede din røv.

Beskriv problemet grundigt
Hvad er det du vil opnå?
Hvad er det du ikke forstår?
Hvad har du prøvet?
Hvad er det der ikke fungerer?
Link til website eller billeder.
Gyldig email adresse, så jeg kan kontakte dig.
Navn på plugin/theme?
Version af WordPress/Photoshop du bruger

Brug kommentarfeltet nederst til at spørge om alt ang:
WordPress
Webdesign
Photoshop
Fotografi
(Ikke kameramærke specifikke ting)

Så følger jeg op på det med blogposts om dit problem ugen efter.

Det var så lidt.

njor_facebook_css_04

Sådan Pimper du din Facebook Fanbox og Pagestream


Her er en tutorial der handler om hvordan du bruger CSS til at style din Facebook fanbox (facepile/likebox) og pagestream.

Under det store billede nederst kan du se en detaljeret beskrivelse, af hvordan jeg har rullet min egen css blanding og integrerer facebook med mit eget site, uden at give køb på den overordnet grafiske identitet. Det er testet i Safari og Firefox.

Facebooks sociale plugins kommer sit eget css. Det giver et ensartet look på tværs af alle Facebooks widgets og fortæller brugerne, at de interagerer med Facebook.

Husk det når du styler din Fanbox kasse. Det er vigtig, at dine brugere føler at de er i et “sikkert miljø”.

Jeg vil dække både hvordan du installerer dit eget css der udligner den originale facebook-style og hvordan du styler elementerne inden i kassen.

Sådan ændrer du Facebooks custom css

Hvis du bruger wordpress pluginet Simple Facebook Connect smider du bare dit css i kassen “Fanbox Custom CSS på SFC’s admin side.

Hvis du derimod har hentet din Fanbox direkte fra Facebooks site, får du her en forklaring på, hvordan du ændrer koden.

I teorien kan du bare linke til din standard css fil, men Facebook bruger sine egne css style-navne, så et bedre valg være, at lave din egen fil og gemme den på dit site. Måske i din themefolder, så det er lettere at vedligeholde.

XFBML

Hvis du bruge en XFBML version så kan du indsætte et direkte link (http://ditsite.dk/facestylesheet.css) til hvor din css fil er et sted inden

"></fb:like-box>

Her er et eksempel:
css="http://ditsite.dk/facestylesheet.css?1"></fb:like-box>

Hvis du bruger wordpress og opbevarer css filen i din themefolder, så kan du skrive:

css="<?php get_bloginfo('stylesheet_directory'):?>/facestylesheet.css?1"

bemærk ?1. Det hentyder til den cached version af dit stylesheet. Det er vigtigt, at du husker at ændre nummeret i din XFBML kode, hver gang du laver ændringer (og ikke inkluderer ?1 i dit css filnavn, mmmmkay) så Facebook ved, hvilken version af dit css du hentyder til.

iframe

Iframe løsningen ser lidt mere kompliceret ud, men det er nu let nok. Ved slutningen på den her linie

src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427 DIN KODE HER "

skal du skrive linket til din css fil lige inden den afsluttende .

src="http://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1"

Husk at ændre ASCII bogstaverne:

…css=http://miklas… => …css=http%3A%2F%2Fmiklas…
…njor.com/?sfc-fanbox-… => …njor.com%2F%3Fsfc-fanbox-…
…css=1 => …css%3D1

Bemærk at iframe løsningen bruger ikke ?1 men =1, så husk at ændre = til %3D (%3D1)

Slutresultatet vil se nogenlunde sådan her ud:

iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww. facebook.com%2Fpages%2FMiklas-Njor-Fotografi%2F192308877480168&amp;width=292&amp; colorscheme=light&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height= 427&amp;css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"

Okay. Nu har vi fået installationen af vejen. Så er tiden kommet til være kreativ med Fanboxen og pimpe den.

Detaljeret Beskrivelse

Under billedet finder du en detaljeret beskrivelse af hvordan jeg har stylet min Fabox.
how to css style facebook facebox facepile and pagestream

1 – Hele kassen


NOTE: Dette er hele kassen. Jeg har valgt at give den en orange kant.
Og for at være på den sikre side har jeg valgt at inkludere a:link, så jeg ved at alle links ser ud som jeg ønsker. Vi kan ændre de efterfølgende links, idet de “læses” senere og derfor har højere prioritet.

.fan_box .full_widget {border: 1px solid #F50;}
.fan_box .full_widget a:link {color: #F50;}
.fan_box .full_widget a:hover {color: #000;}
.fan_box .full_widget a:visited {color: #F50;}
.fan_box .full_widget a:active {color: #F50;}

2 – Connect header

.fan_box .full_widget .connect_widget_facebook_logo_menubar {background: #F50; border: 0;}

2A – Connect header facebook logo

.fan_box .full_widget .connect_widget_facebook_logo span {background:transparent url(http://website/themfolder/img/facebook_link.gif) no-repeat ; display:block; height:17px; width:90px}
.fan_box .full_widget .connect_widget_facebook_logo:hover span {background-position:left -17px}

NOTE: Jeg kunne ikke lide den blå kant rundt om facebooklogo-billedet, så jeg downloadede billedet og ændrede det. Jeg hentede billedet her via dette link.

3 – Connect top

.fan_box .full_widget .connect_top {background: #fdd5c1; border-bottom: 1px solid #F50;}

3A – Connect top avatar billede

.fan_box .full_widget .connect_top img {padding: 0; margin: 0 1em 0 0; border: 1px solid #F50;}

3B – Connect top – Page navn (Miklas Njor Fotografi)

.fan_box .full_widget .connect_top .name_block {color: #F50;}
.fan_box .full_widget .connect_top .name_block a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name:link {color: #F50;}

3C – Connect top – Like Button

.fan_box .full_widget .connect_widget_like_button {border: 1px solid #F50; background: #f0f0f0;}
.fan_box .full_widget .connect_widget_like_button span {color: #f50;}
.fan_box .full_widget .connect_widget_like_button:hover {border: 1px solid #F50; background: #F50; color:#FFF;}
.fan_box .full_widget .connect_widget_like_button:hover span { color:#FFF;}
.fan_box .full_widget .connect_widget_facebook_favicon {background: url(http://website/themfolder/img/facebook_thumbsup.gif) no-repeat -1px -47px transparent;display:block;height:14px;padding:0 0 0 0;width:14px;position:absolute;left:-1px}
.fan_box .full_widget .connect_widget_like_button .liketext {background:url(http://website/themfolder/img/facebook_thumbsup.gif) -1px -33px no-repeat}

NOTE: Ligesom foroven, så har jeg hentet billedet og ændret det. Det kan hentes her

4 – Pagestream – alle historier

.fan_box .full_widget .page_stream {background-color: #f0f0f0; color: #222;}
.fan_box .full_widget .page_stream a:link {color: #F50;}
.fan_box .full_widget .page_stream a:hover {color: #000;}
.fan_box .full_widget .page_stream a:visited {color: #F50;}
.fan_box .full_widget .page_stream a:active {color: #F50;}

4A – Pagestream – enkelt historie

.fan_box .full_widget .page_stream .UIStory {background: #fff; padding: 6px; margin: 5px 0;}

4B – Bruger link – Miklas Njor Fotografi

.fan_box .full_widget .page_stream span.UIIntentionalStory_Names {margin: 0 0.5em 0 0;}
.fan_box .full_widget .page_stream span.UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:hover {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:visited {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:active {color:#222;}

4C – ‘Det er bare så fedt at han svæver’

.fan_box .full_widget .page_stream span.UIStory_Message {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message a:link {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message:before {content:”\0022″; }
.fan_box .full_widget .page_stream .UIStory_Message:after {content:”\0022″;}

NOTE: Jeg bruger css pseudo styles :before og :after til at at indsætte situationstegn før og efter teksten. Du kan se hvilke bostaver/tegn du kan bruge på denne fortegnelse for HTML entities. Du kan også bruge billedet. Pseudo classes kan ikke ses i IE6 og IE7.

4D – Post Billeder

.fan_box .full_widget .page_stream .UIStory img {border: 1px solid #F50;}

4E – Post Overskrift – Kim Rahbek Svæver – Direktør Sticks n Sushi

.fan_box .full_widget .page_stream .UIStoryAttachment_Title {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:link {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:hover {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:visited {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:active {color: #F50;}

4F – Websitelink – miklasnjor.com

.fan_box .full_widget .page_stream .UIStoryAttachment_Caption {color:#666;}

4G – Brødtekst – Direktør for Sticks ‘n’ Sushi, Kim Rahbek Hansen, drikker…

.fan_box .full_widget .page_stream .UIStoryAttachment_Copy {color: #222;}

4H – Pagestream – borderbottom

.fan_box .full_widget .page_stream {border-bottom: 1px solid #F50; }

5 – Facepile

.fan_box .full_widget .connections {background-color: #f0f0f0;}

5A – Facepile tekst – x people like Miklas Njor Fotografi

.fan_box .full_widget .connections .connections_grid {margin-top: 0.8em;}

5B – Facepile – Facesgrid

.fan_box .full_widget .connections .connections_grid .grid_item {margin-right: 0.65em; color:#F50;}
.fan_box .full_widget .connections .connections_grid .grid_item a {color:#F50;}

Det var det! – stop editing :)

Der er rigtig mange elementer du kan ændre, men jeg har valgt at fokusere på de vigtigste. Hvis du vil finde flere detaljer du kan style, så vil jeg anbefale at du installerer Firebug til Firefox.

Endelig på wwwej

Det tog sin tid, men nu kan jeg endelig gå live med min nydesignet wordpress hjemmeside. Tilbage mangler kun at rette de sidste småting. Og findes der bedre måder end at gøre det på et live site!
Processen har lært mig rigtig meget og hvis jeg selv skal sige det, så er jeg blevet noget af en wordpress haj og åbner uden frygt wordpress’ motorhjelm og roder rundt der. Har du brug for en ny hjemmeside eller et redesign – så ring.