Icons und Pins

Maksi fragte mich, wie die Geschichte mit den Icons vor externen Links und den gepinnten Beiträgen funktioniert. Also will ich das mal eben schnell erklären, denn es ist schlichtes CSS und somit keine Zauberei. 😉

1. Die Icons vor externen Links:

Um externe Links mit einer Grafik zu kennzeichnen, bedarf es einmal der Grafik selbst und dann noch des folgenden CSS-Schnipsels:

#main a[href^="http:"], #main a[href^="https:"]
{
	padding-left: 16px;
	background-image: url('bild.ext');
	background-repeat: no-repeat;
	background-position: 0 0.25em;
}

Dieser Schnipsel bezieht sich nun auf alle Links, die sich im Bereich mit der ID „main“ befinden. Ohne das „#main“ wäre es für alle Links gültig. Um nun zu verhindern, das auch interne Links gekennzeichnet werden, packt man folgenden Schnipsel direkt dahinter:

#main a[href^="http://eigene.tld"]
{
	padding-left: 0;
	background-image: none;
}

Verwendet man auch SSL-gesicherte Verbindungen, so muss das analog zu oben auch für SSL-Links ergänzt werden. Fertig!

2. Der fixierte Beitrag

Zunächst wird ein Plugin dazu benötigt: Adhesive von Owen Winkler. Damit kann man den Beitrag dann pinnen, indem man beim schreiben oder editieren unter „Status“ das Sticky-Flag setzt. Dieses Plugin kann man nun etwas modifizieren. Ich selbst habe dazu die Funktion „adhesive_the_content“ wie folgt geändert, da ich festgestellt habe, das es im Plugin einen kleinen Fehler gibt, so das bei geänderter Formatierung von gepinnten Beiträgen, die neue Formatierung über alle anderen Beiträge fortgesetzt wird:

function adhesive_the_content($content)
{
  global $post;
  return ($post->is_sticky) ?
    "<div class=\"adhesive\"><script
    type=\"text/javascript\">window.document.
    getElementById('post-{$post->ID}').parentNode.
    className += ' adhesive_post';</script>
    {$content}
    </div>" :
  $content;
}

Das bewirkt, das der Inhalt eines als „sticky“ gekennzeichneten Beitrages in einen gesonderten DIV-Container gepackt wird. Und den wiederum kann man mit CSS ganz einfach hervorheben. In meinem Falle wie folgt:

div.adhesive {
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 80px;
	margin: 1px;
	border: solid 1px #b91900;
	background: url('sticky_ecke.png') no-repeat top right;
	backgrund-position: top right;
}

Und das war es dann auch schon. 🙂

Schrottie

Ich blogge hier seit Anfang 2005 über wechselnde Themen. Zumeist handelt es sich dabei um Linux, Android, Geocaching oder Fotografie, aber zunehmend auch rund ums Fahrradfahren (mit MTB und Rennrad), das ich nach einigen Jahren Pause wieder für mich entdeckt habe. Dabei ist die Themenwahl insgesamt recht selektiv, also ich schreibe immer nur dann, wenn mich etwas wirklich interessiert und/oder bewegt und so kommt es dann auch, das man hier zuweilen auch private Dinge findet. Wer mir für die Arbeit ein kleines Dankeschön zukommen lassen möchte, der kann dies gern über meinen Amazon Wunschzettel tun. :-)