Text

· · zu lesen
We love icon fonts

Tim Pietrusky hat so ne Art "Google Web Fonts" für Icon-Fonts gebastelt, was alleine natürlich schon einen Blog-Post wert wäre… er hat aber außerdem noch die OpenWeb-Icons eingebaut, was definitiv einen Blog-Post wert ist 😉

Dank Tims "We Love Icon Fonts" lassen sich die Fonts mit folgenden paar Zeilen CSS-Code einbauen:

@import url(http://weloveiconfonts.com/api/?family=openwebicons);

/* openwebicons */
[class*="openwebicons-"]:before {
  font-family: 'OpenWeb Icons', sans-serif;
}Code-Sprache: CSS (css)

Das Projekt ist übrigens Open Source und Tim würde sich sicherlich über jede Hilfe freuen!

Text

· · zu lesen

Um die zwei Sidebars des K2 (WordPress) Themes auf die rechte Seite zu bekommen, und nicht wie standardmäßig vorgegeben links und rechts vom Content, müsst ihr eurem Custom Style einfach folgende Zeilen hinzufügen:

.columns-three #primary {
	margin-left: 0px !important;
	}
	
.columns-three #sidebar-alt {
	left: 0px !important;
	margin-left: 0px !important;
	}Code-Sprache: CSS (css)

Da sich das StyleSheet in der Version 1.0 nochmal geändert hat, funktioniert der alte Code nicht mehr.

Download hack.css als Custom Style (CSS Sidebar Hack .2)

Text

· · zu lesen

I want to add hCard and hCalendar style support to MicroK2 (K2 custom theme), but I’m not sure wich style I should use… I hope you could help me.
The colors are not final, first I only want to know which alignment is better…

First example:

example 1


Its like the style of hicks design with the nice famfamfam silk-icons.

Second Example:

Example 2

Please vote or let me know your ideas, otherwise I use the one I prefer 😉

Links:

  • WordPress – Blogging Software
  • K2 – A WordPress theme
Text

· · zu lesen

Ich hab ja schon mal versucht die XFN-Links mit CSS und den Icons von Wolfgang Bartelme und Chris Messina zu verbinden, da es jetzt immer mehr Microformat Icons gibt, habe ich mich mal hingesetzt und ein kleines Custom Theme für K2 (ist aber auch einfach in jedes andere CSS integrierbar) erstellt.
Is wirklich nichts wildes, aber falls ihr Interesse habt probiert’s einfach mal aus: MicroK2.

Beispiele:

  • XFN: ME (mouse over)
  • Vote-Links: vote for notizBlog
  • GEO: GEO: 37.386013, -122.082932

Als nächstes versuche ich mal noch hCal und hCard ein wenig schöner aufzubereiten, für Tags gibt es ja leider noch kein schönes Icon.

Text

· · zu lesen

Da mir die neuen XFN Icons von Wolfgang Bartelme und Chris Messina recht gut gefallen, hab ich sie mal in mein CSS eingebaut. Das schwierige daran war, kombinationen von XFN Beziehungen mit CSS abzubilden. Ein Beispiel:

<a href="https://notiz.blog" rel="friend met colleague">...</a>Code-Sprache: HTML, XML (xml)

Deshalb hab ich für mich die Hierarchie festgelegt:

  • me
  • professional: co-worker, colleague
  • friendship (at most one): friend, acquaintance, contact
  • romantic: muse crush date sweetheart

Das heißt im Klartext: Wenn ich einen rel-tag wie z.B. rel="friend met colleague" wird nur friend und met berücksichtigt weil das für mich höherwertig is. Wenn ihr ne andere Reihenfolge wollt, könnt ihr das ganze einfach in der CSS Datei umstellen (das Wichtigste unten).

Ich habe das ganze mit den in CSS 2.1 definierten Selectors realisiert und mit Firefox 2.0 und IE7 getestet.

Beispiel CSS Code:

a:hover[rel~="me"] {
  background: url(images/xfn-me.png) no-repeat right; padding-right: 25px;
}

a:hover[rel~="co-worker"], a:hover[rel~="colleague"] {
  background: url(images/xfn-colleague.png) no-repeat right; padding-right: 25px;
}

a:hover[rel~="co-worker"][rel~="met"], a:hover[rel~="colleague"][rel~="met"] {
  background: url(images/xfn-colleague.png) no-repeat right; padding-right: 25px;
}Code-Sprache: CSS (css)

Komplette CSS Datei runterladen

Beispiele: ME, FRIEND COLLEAGUE, COLLEAGUE, COLLEAGUE MET, FRIEND MUSE, FRIEND MUSE MET.

Würde mich sehr über Kommentare und Anregungen freuen…

Text

· · zu lesen

HowTo get a linklog like Kottkes remaindered links or something like the asides hack from Matt using wordpress, the K2 theme and some CSS.

First of all you have to create a category you want to use, for example „linkdump“, then create your own custom style (K2 page structure).

Add the following code to your custom css…

CSS code to hide the title (header), the noteworthy-link and the entry meta:

.category-linkdump .entry-title, .category-linkdump .noteworthyLink, .category-linkdump .entry-meta {
    display: none;
}Code-Sprache: CSS (css)

Example code to format the new linkdump category:

.category-linkdump .entry-content a, .category-linkdump .entry-content a:hover {
    border-bottom: 1px dotted #CCC; text-decoration: none !important;
}Code-Sprache: CSS (css)
.category-linkdump .entry-content {
    /*background-color: #F8F8F8;*/
    border-top: 1px dotted #CCC;
    border-bottom: 1px dotted #CCC;
    padding: 15px; font-size: 10px;
}Code-Sprache: CSS (css)

Demo: https://notiz.blog/category/links/

If you want to use your del.icio.us account for the linkdump/linklog try „Yet Another Weekly del.icio.us„