Icons in Header einfügen / Wordpress 3.0 / Theme: Twentyten

[Hexenmieze]

Hallo ihr,

ich kämpfe momentan damit, das Standardtheme von Wordpress 3.0. (Twentyten) nach meinen Wünschen anzupassen. Das meiste habe ich mittlerweile herausgefunden, allerdings verzweifle ich gerade daran, wie ich RSS-Symbol, Facebook, Twitter etc. in den weißen Bereich oberhalb der Headergrafik einfügen kann.

Könnt ihr mir vielleicht einen Tipp geben, wie ich das hinbekomme?

Ach ja, um diese Seite geht es: http://haustiger.info.

Wäre schön, wenn ihr mir weiterhelfen könntet.

vg

Hexenmieze

[hero-master]

Hey
willst du es hart gecodet in das Theme schreiben, oder willst du es über Plugins und ein Widget lösen?

Hart gecodet:
Öffne die header.php und suche dir diese Zeile (ca. 66) raus:

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

Darin haust du den php-Teil ("<?php bloginfo( 'description' ); ?>") raus und setzt dort deine Buttons rein mit dem HTML-Markup, ungefähr so:

<ul>
    <li><a href="#link-zum-rss-feed"><img src="imgs/icon-rss.png" alt="" /></a></li>
    <li><a href="#link-zu-twitter"><img src="imgs/icon-twitter.png" alt="" /></a></li>
    <li><a href="#link-zu-facebook"><img src="imgs/icon-fb.png" alt="" /></a></li>
</ul>

Dann noch ein bisschen CSS:

#site-description li { float: left; list-style: none; padding: 0; margin: 0 }

So dürfte es ungefähr passen


edit: Gerade noch im HTML-Markup die fehlenden Anführungszeichen dazugehauen, nur der Vollständigkeit halber.

[Hexenmieze]

Hallo,

danke dir, hat einwandfrei funktioniert!

Allerdings habe ich noch ein kleines Problemchen. Und zwar werden ober- und unterhalb der Icons zwei Linien angezeigt. Hast du vielleicht eine Idee, wie ich die wegbekomme?

border: none; habe ich versucht, aber das funktioniert leider nicht.

Ach ja, soweit ich kann, versuche ich so viel wie möglich ohne Plugins etc. hinzubekommen. ;-)

vg

Hexenmieze

[max.m]

Und zwar werden ober- und unterhalb der Icons zwei Linien angezeigt. Hast du vielleicht eine Idee, wie ich die wegbekomme?

border: none; habe ich versucht, aber das funktioniert leider nicht.

Schau mal den CSS-Code an:

#branding img {
    border-color: #000000 -moz-use-text-color;
    border-left: 5px none;
    border-right: 5px none;
    border-style: solid none;
    border-width: 4px 5px 1px;
    clear: both;
    display: block;
}

Da sind noch Rahmen definiert. Wenn Du die entfernst verschwinden auch die Linien. Du kannst einfach alle border-Angaben rauswerfen.