Eigenbau Widget, css Fehler oder...

Hallo WP-Fans,

noch einen schönen Feiertag, falls jemand Zeit hat, ich könnte als Weihnachtsgeschenk, einen Tipp zu meinem Widget im eigenbau(3.8 twentyfourteen) echt gebrauchen.

für einen Widget-Platz zum einfügen des Text-Widget über ein Headerbild(Design/Anpassen/Kopfbild)im twentyfouteen zu legen habe ich bisher folgendes gemacht:

1) in der functions.php eine weitere register_sidebar(array) gesetzt. Diese erscheint jetzt auch unter
Design/Widgets als Header Widget Area, rechts im Fenster Widgets.

register_sidebar( array (
'name' => __( 'Header Widget Area', 'twentyfourteen' ),
'id' => 'sidebar-4',
'description' => __( 'text widget zum plazieren rechts oben/über headerbild.', 'twentyfourteen' ),

usw...

2) Dort hinein (Design/Widgets/Header Widget Area) kann ich dann das Textwidget ziehen und dann dort html einfügen.

der Text ist dann, nach abspeichern, natürlich noch nicht auf der Webseite im Browser zu sehen. Deshalb habe ich

3) in der header.php noch ca.Zeile 31 (vor </head> folgendes hinzugefügt:

<?php wp_head(); ?>
<div id="site-header" class="Header Widget Area"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('sidebar-4') ) : ?>
<?php endif; ?></div>
</head>

Jetzt erscheint der Text auch auf der Webseite im Browser. Leider nicht rechts *IM* Header Bild, sondern links außen über dem Bild.

4) Es liegt also an der style.css , habe unter 7.2 Content Sidebar Widgets ca. Zeile 2591 folgendes eingesetzt:

/* --- Header Widget Area --- */
.header-widget-area {
float:none;
margin:0 auto;
padding:10px 0 0;
}
.header-widget-area h3.widget-title {
margin: 0 0 3px;
font-family: 'PT Sans', sans-serif;
font-size: 1.2em;
color: #fff !important;
font-weight:bold;
letter-spacing:0.1em;
}
.header-widget-area .textwidget {
font-size:1.1em;
font-style:italic;
}

habe auch ".site-header" und ".sidebar-4" in der style.css probiert.

da ich die Schrift auf weiß gesetzt habe, kann ich auch sehen, dass die css überhaupt nicht angenommen wird. Habe eine Denkblockade.
Wäre sehr dankbar, mir hilft jemand auf die Sprünge. Was müßte nach dem (.) Punkt kommen?

Gruss Ria

Hallo,

so nun ist es fast perfekt. Anstelle der Klasse mußte ich die id benutzen.

/* --- Header Widget Area --- */

#sidebar-4 {
z-index:4 !important;
font-family: Lato, sans-serif !important;
text-align: center;
font-size: 2.2em;
color: #fff !important;
letter-spacing:0.1em;
position: absolute;
top: 80px;
left: 255px;
width: 98%;
}
#sidebar-4 .widget-title {
font-size:1.5em !important;
color: #fff !important;
font-style:italic;
}

Also, der Widget Platzhalter funktioniert, Widget einfügen, hier Textwidget, funktioniert, Schrift auf das Headerbild legen(richtige Stelle) funktioniert.

ja und die header.php nun so:

<div id="sidebar-4"><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar ('sidebar-4') ) : ?>
<?php endif; ?></div>
</head>

Eine Korrektur bekomme ich jedoch noch nicht hin, wenn ich mit Strg und Minus Taste, das Browserfenster verkleinere.
Nach dem 2 Klick auf die Minus Taste, wandert mit jedem weiteren Klick die Schrift nach rechts, bleibt also nicht stehen. Die Schrift befindet sich dann nicht mehr auf der eigentlichen Webseitenbreite, sondern irgendwo rechts im Browserfenster und kann somit auch nicht responsiv sein.

Ein Header-Widget fürs twentyfourteen müßte doch mehr Leute interessieren, kann mir einer den letzten Hinweis geben?

Gruss Ria

PS. sicher gibt es noch einen eleganteren Code zur Lösung, von oben insgesamt, um das Theme zu hübschen.

Hallo.

ich habe es jetzt geschaft, dass man das Browserfenster verkleinern kann und die Schrift bleibt auf der richtigen Stelle stehen, so:

/* --- Header Widget Area --- */

#sidebar-4 {
z-index:4 !important;
font-family: Lato, sans-serif !important;
text-align: center;
font-size: 1.3em;
color: #fff !important;
letter-spacing:0.1em;
position: absolute;
margin-top: 2.0em;
margin-left: 22.1em !important;
margin-right: 0.1em;
margin-bottom: 1.0em;
width: 24.4em;
}
#sidebar-4 .widget-title {
font-size:1.2em !important;
color: #fff !important;
font-style:italic;
}

leider aber nicht, wenn ich das Browserfenster vergrößere, jetzt einer ne Idee?

Gruss Ria

Hallo doho,

ein headerbild ist doch im Head-Bereich, und auf dem Bild iegt die Schrift ?

hmmmmmmmmm, hast Du bis zum Schluss gelesen? Das Problem scheint doch nur *noch ein css Problem zu sein und wenn nicht, gut versuche das mal in den body von der header php zu setzen, wohl eher ganz oben, mal sehen was passiert :-)

Gruss Ria

NACHTRAG:
wie ich es mir dachte, dann ist die Schrift völlig weg!

Hallo zusammen,

habe das im Header jetzt alles als Grafik! Erstaunlicherweise geht hier bei der Vergrößerung und Verkleinerung die Qualität NICHT verloren, obwohl die dpi ja die Gleiche ist.

Also die Schrift bleibt auch scharf, hätte ich nicht gedacht. Im Upload Ordner hat WP nun 5 verschiedene Größen abgelegt, wobei 150x150 natürlich nicht zu gebrauchen ist. Die anderen Größen wahrscheinlich für andere Auflösungen.

Wie auch immer das twentyfourteen ist ziemlich genial und ich hätte mir die Code-Arbeiten sparen können. Natürlich muss man Bildbearbeitung können oder das Headerbild weglassen.

Gruss Ria

PS. die Websites von den "Profis", von dem Teil, haben auch nur ein Bild und keinen Text drübergelegt.
Leider zu spät bemerkt.

Hallo doho,

danke für den Link, ist mir schon klar, dass mit der falschen Stelle, hatte leider, dies unter "body" zu plazieren noch weniger Erfolg. Einfach nur Text über das Bild legen funktioniert ja auch meistens.
Nur wollte ich das ja jetzt mit einem zusätzlichen widget kombinieren und denke da war noch was verkehrt.

Jetzt lasse ich es, wie es ist (Text im Bild) und scheint zu funktionieren, wies aussieht.

Gruss Ria