Wenden wir uns also dem Äußeren von Thesis zu, dem Erscheinungsbild. Ich gebe Ihnen einfach ein paar Codes, die Sie dementsprechend nur einbauen und vielleicht noch farblich anpassen müssen. Nicht schwer und eigentlich überhaupt nicht kompliziert.
Header
Als erstes der Header. Wollen Sie, dass die Navigationsbar nicht mehr über Ihrem Seitentitel steht?
In die custom.css Datei:
remove_action('thesis_hook_before_header', 'thesis_nav_menu'); add_action('thesis_hook_after_header', 'thesis_nav_menu');
|
Anstatt des Schriftzuges ein Logo? Ebenfalls in die CSS Datei. Denken Sie nur dran, die entsprechenden Änderungen durchzuführen, was den Ort Ihres Logos angeht, so wie die Höhe und Breite.
.custom #header #logo a { display: block; height: 180px; width: 800px; background: url('images/Ihr Bild') no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header {border-bottom:none; padding:0}
.custom #header { padding: 0; }
|
Die Nervige Überschrift in der Kategorieansicht entfernen?
#archive_info {display:none;}
|
Die Farben
Sidebar: (CSS):
.custom #content_box {background-color:#EEEEEE;}
|
Textfläche: (CSS):
.custom #content {background-color:#fff;}
|
Effekte, beim drüberfahren mit der Maus?
Sidebar: (CSS):
li.widget ul li { border-bottom:1px solid #DDDDDD; display:block; margin:0; padding:0.5em; }
li.widget ul li:hover { background:#DDDDDD; display:block; margin:0; padding:0.5em; }
.custom li.widget { margin-bottom: 0.5em; line-height: 1.2em; }
.custom li.widget a:hover { color:#222222; background: none; }
|
Links: (CSS):
.custom a:hover { color: #FFFFFF; background: #000000; }
#footer a:hover { color: #FFFFFF; background: #000000; }
dl#trackback_list dt a:hover { color: #FFFFFF; background: #000000; }
|
Denken Sie dran, sich überall die individuellen Farben einzustellen, damit Sie den Look herausbekommen, den nur Sie haben wollen und im Endeffekt natürlich auch zum Teil Ihre Persönlichkeit widerspiegelt.
Kommentare
Kommentar Feld des Autors modifizieren:
CSS:
.custom dl#comment_list dt.bypostauthor, .custom dl#comment_list dd.bypostauthor>div {background: #E7F8FB none repeat scroll 0 0; padding-top:20px;}
|
So, da haben Sie schon mal was zum Ausprobieren und testen. Viel Spass damit und bis zu den nächsten Codes.
Entdecke mehr von Wissens Weben
Melde dich für ein Abonnement an, um die neuesten Beiträge per E-Mail zu erhalten.