Social Bookmarks

Da ich kürzlich die Anfrage bekommen habe, wo ich denn meine Social Bookmarks (die kleinen Vierecke unter jedem Artikel) her habe, möchte ich kurz erklären, wie sie entstanden sind. Zuerst habe ich nach Plugins gesucht, die automatisch diese Bookmarks unter die Artikel setzt. Ich war mit keinem so richtig glücklich.. entweder waren die Icons nicht sonderlich hübsch oder der Effekt war nicht der, den ich wollte. Beim Googlen bin ich schließlich auf einen Blog gelandet, auf dem die Links zu bekannten Social Networks in WordPress-Artikel aufgelistet waren.

1
2
3
4
5
6
7
8
9
10
11

<ul id="socialbookmarks">
	<li><a id="delicious" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious">Delicious</a></li>
	<li><a id="digg" rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg</a></li>
	<li><a id="facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Facebook</a></li>
	<li><a id="furl" rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&amp;u=<?php the_permalink(); ?>" title="Share this post on Furl">Furl</a></li>
	<li><a id="studivz" rel="nofollow" href="http://www.studivz.net/Link/ExternLink/Url/?u=<?php the_permalink();?>&amp;desc=<?php echo urlencode(get_the_title($id)); ?>&amp;prov=<?php bloginfo('name'); ?>" title="Share this post on StudiVZ">StudiVZ</a></li>
	<li><a id="stumbleupon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon">StumbleUpon</a></li>
	<li><a id="technorati" rel="nofollow" href="http://technorati.com/faves?add=<?php bloginfo('url'); ?>" title="Add <?php bloginfo('name'); ?> to your Technorati favorites">Technorati</a></li>
	<li><a id="twitter" rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Twitter</a></li>
	<li><a id="reddit" rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Reddit</a></li>
</ul>

Diese hab ich mir dann in die single.php meines Themes kopiert. Die Links waren jetzt da.. es fehlten noch die Icons. Nach einer kurzen Suche auf Iconfinder bin ich fündig geworden: Das Aquaticus Set hat alle wichtigen Social Networks, die ich benötigte. Nur ein einziges war nciht dabei: studiVZ, das Bookmark musste ich mir dann noch schnell selber basteln. Als Vorlage hab ich einfach eines der anderen Icons genommen.

Icons des Aquaticus Sets als CSS Sprite

Die Icons sollten auf den Seiten in schwarz-Weiß dargestellt sein und als Effekt wollte ich, dass sie farbig werden, wenn man mit der Maus drüber fährt. Dazu habe ich alle Icons samt Schwarz-Weiß-Version in eine Grafik gepackt und den Rest mit CSS erledigt (Stichwort: CSS Sprites).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#socialbookmarks {
	clear:both;
	height:48px;
	list-style:none;
	margin:20px;
}
#socialbookmarks li {
	float:left;
	margin-left:8px;
}
#socialbookmarks a {
	background-image:url(socialbookmarks.png);
	background-repeat:no-repeat;
	display:block;
	height:0;
	outline:none;
	overflow:hidden;
	padding-top:48px;
	width:48px;
}
#delicious {background-position:0 bottom;}
#digg {background-position:-48px bottom;}
#facebook {background-position:-96px bottom;}
#furl {background-position:-144px bottom;}
#studivz {background-position:-192px bottom;}
#stumbleupon {background-position:-240px bottom;}
#technorati {background-position:-288px bottom;}
#twitter {background-position:-336px bottom;}
#reddit {background-position:-384px bottom;}
#delicious:hover {background-position:0 0;}
#digg:hover {background-position:-48px 0;}
#facebook:hover {background-position:-96px 0;}
#furl:hover {background-position:-144px 0;}
#studivz:hover {background-position:-192px 0;}
#stumbleupon:hover {background-position:-240px 0;}
#technorati:hover {background-position:-288px 0;}
#twitter:hover {background-position:-336px 0;}
#reddit:hover {background-position:-384px 0;}

Wenn euch das hier zuviel ist, könnt ihr euch auch einfach eine ZIP mit den ganzen Daten runterladen: social_bookmarks.zip

Wie es im Live-Betrieb aussieht, seht ihr ja gleich etwas weiter unten..

Neue CSS!

Da ich nun den IE6 Support eingestellt habe und ich dennoch nicht recht mit dem zerschossenen Layout leben wollte, hab ich mal eben noch die CSS Datei etwas optimiert und siehe da: sieht alles gut aus, auch im alten Drecksbrowser. Die einzigen Darstellungsfehler sind jetzt noch die PNG Grafiken. Die werde ich aber nicht austauschen. Im Gegenteil, die 3 kleinen Icons unter der Artikelüberschrift sind jetzt PNG Dateien und haben einen angenehmeren Farbverlauf.

Außerdem hat die CSS Datei jetzt eine Versionierung in Form eines Timestamps bekommen, sodass sie bei jedem neugeladen werden muss, sollte ich etwas daran verändert haben.

Neue Themes

Derzeit kannst du zwei Themes von mir downloaden: Flora, das Theme dieses Blogs und Wrath of the Lich King, das der offiziellen Seite der World of Warcraft – Erweiterung nachempfunden ist. In Zukunft werde ich Themes auf einer Extraseite veröffentlichen und euch bei Aktualisierungen benachrichtigen.

Viel Spaß beim Bloggen!

Vorschau	Beschreibung	Tags
Flora	Flora Dieser Blog läuft mit Flora. Es ist dunkel, es hat Blumen und Ornamente und ich mag es! Ich bastel immer zwar noch daran, aber diese Version sollte halbwegs funktionieren. Mit Custom Login! Download	dark two-columns fixed-width left-sidebar
Wrath of the Lich King	Wrath of the Lich King Wrath of the Lich King ahmt das Design der WotLK Promo-Seite von Blizzard nach. Ich dachte, es wäre cool so etwas als Theme für einen Blog zu haben. Download	dark two-columns fixed-width right-sidebar

Überschrift mit Schatten

Was ist also der einfachste Weg, um unser Ziel zu erreichen? Na? Genau, wir legen hinter unserer eigentlichen Überschrift nochmal den gleichen Text, nur diesmal mit einer anderen, logischerweise dunklen, Farbe.

1. Änderung am Theme

Als erstes müssen wir den zusätzlichen Text in unser Theme einfügen. Die Änderung bezieht sich hier auf die index.php, muss aber in allen .php Dateien durchgeführt werden, wo der Titel einen Schatten bekommen soll.

1
2
3
4
5

...
<div class="post" id="post-<?php the_ID(); ?>">
	<h2 class="shadow"><?php the_title(); ?></h2>
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
...

In Zeile 3 sieht man den zusätzlichen Titel. Ganz wichtig ist, dass wir diesem neuen Titel eine CSS-Klasse geben (hier: shadow).

Wenn wir uns das ganze jetzt ansehen würden, hätten wir folgendes vor Augen:

2. CSS anpassen

Und hier kommt unsere CSS-Klasse zum Einsatz. In unserer style.css müssen wir nun lediglich ein paar Änderungen vornehmen, damit der eben eingefügte Titel dunkel und hinter dem eigentlich Titel dargestellt wird.

1
2
3
4
5
6
7
8
9
10

h2 {
	margin: 0;
	position: relative;
}
 
h2.shadow {
	color: #000000;
	margin: 1px 0 0 1px;
	position: absolute;
}

Das h2-tag bekommt die zusätzliche Eigenschaft position: relative; und h2.shadow wird schwarz und durch margin und position leicht versetzt hinter h2 dargestellt.

Mehr gibt es dazu nicht zu sagen, viel Spaß mit euren neu schattierten Überschriften

hoffe, allen gehts gut? ja? fein..

hab bis vorhin noch an dem theme gesessen und sachen am css und vor allem den kommentaren verbessert. es werden jetzt gravatars angezeigt und der timestamp sieht nun auch na was aus. was jetzt noch fehlt sind paar kleine übersetzungssachen.. vllt muss ich mir ne eigene .pot datei schreiben (die übersetzt bestimmte sachen aus dem blog) naja aber das kann erstmal warten.

schreibt mal, was ihr von den kleinen symbolen haltet.. also die vor dem datum, der uhrzeit und der kommentaranzeige

ich denke, ich werde als ersten großen schritt dann nen tut für die theme-erstellung schreiben. hab mir mühselig alles so zusammengesucht – narf. ganz schöne friemelei mit dem php-scheiß und so.. meh.. css macht mehr spaß

ach und heute hab ich den neuen vgcats comic entdeckt ^^ ich hoffe euch vergeht dabei nicht die lust am schneemannbauen (falls das überhaupt noch jemand macht) und wenn ihr schon mal auf der seite dort seid, guckt euch auf jeden fall mal die super effectives an.. für alte pokemon-hasen ist das ein MUSS!

so bis später..