Jeg begyndte derfor, at lede efter et nyt script. Der findes rigtig mange, men ikke rigtig nogen der passede indtil jeg kom forbi Colorbox. Jeg prøvede det, det virkede og det er vildt niiice!

Grunde til at bruge Colorbox

Her er nogle af grundene fra Colorboxs hjemmeside til at bruge Colorbox.

• Understøtter billeder, billede grupper, slideshow, ajax, inline, og iframe indhold
• Lightweight: mindre end 9KB javascript!!
• Det er dejlig let at ændre udseendet via CSS
• Kræver ingen ændringer i din HTML
• Genererer valid XHTML

En af fordelene er, at det er så dejlig let. Både at arbejde med og i filstørrelse. Plugin filen er bare 9kb, der bruges kun 2 billeder og der skal næsten ingen CSS til.

Der er 5 forskellige styles til at starte med, men det er nemt at lave sin egen ved, at skifte grafikken ud og tilføje noget CSS.

Her er et eksempel fra det WordPress tema jeg arbejder på. Få linjer CSS og en enkelt billede udskiftning. Kan det blive nemmere?

Så står du og mangler et jQuery lightbox, så anbefaler jeg klart Colorbox. Nu er det godt nok ikke meget, jeg har fået arbejdet med Colorbox, men indtil får det 5/5 stjerner.

Download Colorbox og læs meget mere om hvad du kan gøre med Colorbox

En hurtig Google søgning fandt en hel masse sider med løsninger på problemet. De fleste af dem involverede jQuery, men jeg blev ved med at søge ,for at finde en mere simpel og bedre løsning.

Og jeg fandt den!

Onlinebrand.dk havde en meget simpel CSS løsning. Løsningen er simpelthen, at give overordnet (Parent) element et højere z-index værdi end elementet selv.

Dette skyldes, at IE7 nulstiller z-index værdien på alle positionerede elementer. Dette fungere selvfølgelig ikke, da hele ideen med z-index, er at man skal kunne positionere sine elementer foran eller bagved hinanden.

Lad os sige du har denne markup:

<ul id="menu">
<li><a href="#">Forside</a></li>
<li><a href="#">Om</a>
  <ul>
    <li><a href="#">Om</a></li>
  </ul>
</li>
<li><a href="#">Kontakt</a></li>
</ul>

Så skal du give #menu en højere z-index værdi end #menu li

#menu {
z-index: 10;
}
 
#menu li {
z-index: 5;
}

Det behøver ikke være 10 og 5, men det er dejlig lette tal.

Google gave me 8 invites. To get an invite just sent me an email on email removed
The first 8 will get one, so you better be quick

Update: Sorry, but I don’t have anymore invites.

As said I’ll give 3 templates away for free. It will be 2 HTML templates and 1 premium WordPress template.

Sneak Peaks

“Japibas” is the name of the WordPress theme I’ll give you. It have a clean design, a content slider, huge Theme Options Panel and much much more.

The next theme is a HTML template designed be me, but coded by the PSD to HTML site ShopHTML.com

This theme uses HTML5 and CSS3. It kinda strange, but really nice

In the end will there a surprise, so stay ready! November is gonna be a nice month.

* Psst! If you wanna give a theme away here on Jayj.dk in November, please send me an email

Da filen der indeholder kontaktformen er en HTML fil, skal den først laves til en PHP fil. Omdøb filen fra index.html til index.php

Indsæt følgende kode under <h3>Kontakt mig</h3>

<?php
 
// Hvis der er trykket på send knappen
if(isset($_POST['submit'])) {
 
}
 
?>

Næsten alt vores PHP kode vil være inde mellem { og }, og vil først blive kørt når der bliver trykket på Send knappen.

Først skal vi skaffe informationer fra kontaktformen: Navn, Email og Besked

$navn = $_POST['navn'];
$email = $_POST['email'];
$besked = $_POST['besked'];

Husk at koden skal være mellem { og }

Vi rykker videre med at skrive nogle informationer, der skal bruges for at kunne sende mailen. Skriv din email og det emne mailen skal have.

$adresse = ""; // Din email som mailen vil blive sendt til
$emne = "Emne her"; // Emnet som emailen skal have
 
$header = 'From: '. $email . "\r\n";

Nu skal vi have sendt den besked

if(!empty($_POST['navn']) && !empty($_POST['email']) && !empty($_POST['besked']) && filter_var($email,FILTER_VALIDATE_EMAIL) ) {
 
$sendt = mail($adresse, $emne, $besked, $header); // Send emailen
 
  if($sendt){
	echo '<p class="success">Din besked blev sendt.</p>'; // Succes besked
   } 
 
} else {
	echo '<p class="error">Der var en fejl med at sende beskeden. Tjek venligst alle felter.</p>'; // Fejl besked
}

Først tjekker vi om alle felter er udfyldt, og om emailen er gyldig. Hvis du vil læse mere om FILTER_VALIDATE_EMAIL, kan du læse Getting Clean With PHP på Net.tutsplus.com

Mail sender mailen, og hvis den er blevet sendt får brugeren en succes besked. Hvis en eller flere af felterne er tomme, får brugeren en fejlbesked.

Nu rykker vi videre til formen, hvor der skal gives fejlbeskeder. Erstat den gamle form med den nye

<p>
    <label for="navn">Navn</label> 
    <input type="text" name="navn" id="navn" value="<?php if(isset($_POST['submit'])) { echo $navn; } ?>" />
    <?php 
	// Hvis navn er tomt
	if(isset($_POST['submit']) && $navn == "") {
		echo '<span class="error" id="navn">Udfyld venligst navn</span>';
	}
	?>
</p>
 
<p>
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="<?php if(isset($_POST['submit'])) { echo $email; } ?>" />
    <?php 
	if(isset($_POST['submit']) && $email == "" ) {
		echo '<span class="error" id="email">Udfyld venligst email</span>'; 
	}
	// Valider email
	if(isset($_POST['submit']) && !filter_var($email,FILTER_VALIDATE_EMAIL) && $email != "") {
		echo '<span class="error" id="email">Udfyld venligst en gyldig email</span>'; 
	} 
	?>
</p>
<p>
	<textarea name="besked" id="besked" rows="10" cols="30"><?php if(isset($_POST['submit'])) { echo $besked; } ?></textarea>
    <?php 
	if(isset($_POST['submit']) && $besked == "") {
		echo '<span class="error" id="besked">Skriv venligst en besked</span>'; 
	}
	?>
</p>
<p>
	<input type="submit" name="submit" id="submit" value="Send" />
</p>

Her er noget af koden forklaret bedre

<?php 
// Hvis navn er tomt
if(isset($_POST['submit']) && $navn == "") {
	echo '<span class="error" id="navn">Udfyld venligst navn</span>';
}
?>

Hvis der er blevet trykket på Send knappen og navn feltet er tomt, vil der komme en fejlbesked

<input type="text" name="navn" id="navn" value="<?php if(isset($_POST['submit'])) { echo $navn; } ?>" />

Hvis der er blevet trykket på Send knappen vil navnet blive skrevet i input feltet, så brugeren er fri for at skrive det igen.

Det samme gælder for de andre. Dog er der også lidt email validering ved email feltet.

Download det samlet script, hvor der også er lidt ekstra CSS style og noget jQuery for at kunne lukke fejlbeskederne.

Se demo

Here er kontaktformen, som du vil lære at lave, og indbygningen af den.

Vi starter med en form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kontakt form</title>
 
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<form action="" id="kontaktform">
 
<h3>Kontakt mig</h3>
 
<p>
    <label for="navn">Navn</label> 
    <input type="text" name="name" id="navn" value="" />
</p>
 
<p>
    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="" />
</p>
 
<p>
	<textarea name="besked" id="besked" rows="10" cols="30"></textarea>
</p>
 
<p>
	<input type="submit" name="submit" id="submit" value="Send" />
</p>
 
</form>
 
</body>
</html>

Opret så filen style.css i samme mappe som din kontaktform fil (hvis ikke bliver du nødt til at rette i html koden).
Først starter vi med en global reset CSS, som nulstiller margins og paddings på alle elementer. (:focus fjerner en grim blå outline border agtig ting i browsers som Firefox og Safari)

* { margin: 0; padding: 0;} 
:focus { outline: none; }

Hvis du bruger denne form på en side hvor der er flere elementer, burde du ikke bruge *, men i stedet fx Eric Meyers Reset CSS

Før vi går videre, kan du downloade filerne (der er inkluderet billeder og PSD fil)

body, #kontaktform input, #kontaktform textarea { 
	font: 16px Arial, Helvetica, sans-serif; 
	color: #333;
}
 
#kontaktform {
	background: #ccc url(images/formgradient.png) repeat-x;
	border: 1px solid #aeaeae;
	margin: 50px auto 0; /* 50px fra toppen, 0 fra bunden og auto fra venstre og højre (center) */
	width: 420px; /* Bliver 500px med padding */
	padding: 40px 40px 0;
}

Først sætter vi alle skrifttyper til Arial i størrelse 16. Det næste er formen (husk vi gav formen id="kontaktform"). Vi sætter baggrunden til en gradient, men da den ikke er uendelig lang sætter vi også lige en baggrundsfarve

#kontaktform h3 {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 30px;
}
 
#kontaktform p { margin-bottom: 30px; position: relative; overflow: hidden;}
 
#kontaktform label {
	float: left;
	font-size: 18px;
	height: 41px;
	line-height: 41px; /* Samme som højden, centrer teksten */
}

#kontaktform h3 er “Kontakt mig” overskriften. Alle elementerne i formen er wrappet ind i <p> tags, som vi sætter til margin-bottom: 30px; for at adskille dem fra hinanden. Vi sætter position: relative;, fordi vi senere sætter fejlbeskeden til position: absolute;.

Input felterne

Nu skal vi style input felterne. Da alle tekstfelterne har type="text", er det oplagt at style alle felterne med type="text" i stedet for at give felterne en class. For at style alle tekst input felterne bruger vi input[type=text]. Det virker godt nok ikke i IE6, men er det ikke ligemeget?

#kontaktform input[type=text] { float: right;} /* Alle inputfelter med typen text */
#kontaktform input[type=text], #kontaktform textarea {
	background: #fff url(images/input.png) repeat-x;
	border: 1px solid #cbcbcb;
	color: #aeaeae;
	padding: 10px 5px;
}
 
#kontaktform input[type=text]:hover, #kontaktform input[type=text]:focus, #kontaktform textarea:hover, #kontaktform textarea:focus {
	border: 1px solid #aeaeae;
	color: #333;
}
#kontaktform input[type=text] { width: 333px; }
#kontaktform textarea { width: 408px; overflow: auto; } /* Overflow fjerner scrollbar i IE */
 
#kontaktform input[type=submit] { /* Alle inputfelter med typen submit */
	background: #dedede url(images/submit.png) repeat-x;
	border: 1px solid #aeaeae;
	color: #000;
	font-weight: bold;
	font-size: 18px;
	padding: 10px 0;
	width: 175px;
	cursor: pointer;
}
#kontaktform input[type=submit]:hover { border: 1px solid #949494; }

Læs mere om CSS selectors på Smashing Magazine

Fejl besked

Der skal selvfølgelig også være en fejlbesked. Vil ikke gå så meget i dybden med den.

span.error {
	background: #ffebe8;
	border: 1px solid #C00;
	font-size: 14px;
	position: absolute;
	padding: 5px;
	top: 7px; right: 10px;
 
       /* CSS3 */
	opacity: 0.75;
	border-radius: 5px;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px;
}

CSS3

Nu skal vi til det sjove, der kun virker i moderne browsers som Safari, Chrome og Firefox. Nemlig CSS3 features, som runde hjørner og tekst skygge.

Vi starter først med nogle runde hjørner på selve formen, input felterne og tekstfeltet

#kontaktform, #kontaktform input, #kontaktform textarea {
	border-radius: 10px; /* Denne officielle border-radius, bliver pt. ikke brugt af nogle browsere */ 
	-webkit-border-radius: 10px; /* Runde hjørner i Webkit browsere (bla Safari og Chrome)*/
	-moz-border-radius: 10px; /* Runde hjørner i Firefox */
}

Cool hva’? Lad os rykke videre til en næsten hvid tekst skygge på overskriften, labelsne og Send knappen.

#kontaktform h3, #kontaktform input#submit, #kontaktform label { 
        text-shadow: #f6f5f5 1px 1px 1px; /* Tekst shadow i Safari, Chrome, Firefox og Opera10 */
}

Læs mere om CSS3:

• CSS3.info
• 5 Techniques to Acquaint You With CSS 3
• A Crash-Course in Advanced CSS3 Effects (video)

Download & Demo

Demo

Så var så alt for i dag. Har du spørgsmål eller kommentarer, er du velkommen til at skrive en kommentar, så skal jeg nok prøve at give dig svar.

Mastering WordPress Shortcodes

WordPress Configuration Tricks

Brug custom taxonomies til at lave en filmdatabase

Fjern en kategori fra dit RSS Feed

Gør dit tema oversættelse klar

Kender du andre gode WordPress tutorials du vil dele med os andre? Så skriv en kommentar med linket til den

Selvom den ikke er helt gratis, er prisen heller helt ude i hampen – For lidt over 50 kr kan du købe den på Themeforest.net.

Green Tomec er en template som passer perfekt til din virksomhedshjemmeside – eller bare som din egen personlige portfolio.

Nøgle features:

• Valid Xhtml 1.0 Strict
• Let at bruge og redigere
• Galleri med Fancybox, automatisk thumbnail resizing, cache og jQuery Coda-Slider hvis du vil have flere sider
• Tested og virker med:IE6, IE7, IE8, Safari, FF3, Opera og Chrome
• jQuery
• 3 PSD files følger med – Den første indeholder alle 4 sider. Nummer 2 er med logoet, og den sidste indeholder nogle af de ting du måske til ændre (fx knapperne og headeren)
• Funktionel PHP kontaktform med jQuery validation
• Dropdown menu support
• Kommenteret kode
• Godt dokumenteret

Køb på ThemeForest.net for bare 50kr! ($10)
Live demo

Hvis du behøver hjælp, har et spørgsmål eller har fundet en bug så kontakt mig via ThemeForest, kontaktsiden eller i en kommentar.

Fra og med WordPress 2.8 som udkom for nogle dage siden er det nu ikke kun muligt at vise tags, det er også muligt at vise kategorier og link kategorier.

Dette er koden til den normale tag sky:

<?php wp_tag_cloud(''); ?>

Du kan læse i codexet om wp_tag_cloud

Hvis du går ned til taxonomy, kan du se at category er det der laver Kategori skyen

<?php wp_tag_cloud('taxonomy=category'); ?>