[Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieben

[kuromi]

Hallo

Vllt. kann mir hier jemand helfen - ich habe folgendes Problem:

Ich sitze am Twenty Fourteen Theme von Wordpress, Child Theme ist soweit eingerichtet.
Jetzt bin ich an dem Punkt, an dem ich die linke Sidebar (#secondary) gerne zwischen den Contentbereich und den Header verschieben würde, so dass sie quasi dann mittels CSS/JS zu einer Art Menübar umfunktioniert werden soll und der Contentbereich dann praktisch die komplett Breite einnimmt.
Die eigentliche Menübar habe ich über den Header verschoben, falls sich jemand fragt, wieso ich diese nicht nutze- ich brauche zwei.

So, ich bin kein PHP-Spezialist - weiiiit entfernt, aber ich hab null Berührungsängste.
Kennt sich jemand mit dem 2014-Theme aus und weiß welche Zeilen ich umschreiben oder verschieben muss, damit die Sidebar sich über den Contentbereich bewegt?
Falls die Umsetzung einfacher ist, habe ich auch kein Problem damit die Sidebar auch noch in den Head mit reinzunehmen und dann eben unter den headerinhalt zu setzen.

Text in Bildern:



Danke für eure Zeit =)

 

[Patroklos]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

Poste doch mal den Inhalt deiner CSS datei.

 

[kuromi]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

Oy, hmm - nur der Inhalt vom Child-Theme wird dir wohl eher wenig helfen, da stehen ja nur die Angaben die im Original überschrieben werden sollen (und davon ab ist die style.css auch noch nicht fertig), poste sie aber wie gewünscht dennoch:

[src=css]
@charset "UTF-8";
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: blabla
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/


@import url("../twentyfourteen/style.css");


body {
background: #BFDCF0;
background-image: url(images/blabla.png);

}


a {
color: #2b6597;
text-decoration: none;
}

a:active,
a:hover {
color: #97bcd5;
}

::selection {
background: #2b6597;
color: #f3fbff;
}

::-moz-selection {
background: #2b6597;
color: #f3fbff;
}

.site {
background-color: #fff;
max-width: 1000px;
margin: 0 auto;
margin-top: 100px;
}

#site-header {
background-image: url(images/blabla2.png);
display:block;
height:219px;
background-position: right;
z-index: 0;
}

.site-header {
background-color: #2b6597;
max-width: 1260px;
z-index: 4;
}

.search-toggle {
background-color: #9f6393;
}

.search-toggle:hover,
.search-toggle.active {
background-color: #97bcd5;
}

.search-toggle:hover:before,
.search-toggle.active:before {
color:#0f3654;
content: "\f400";
}

.search-box {
background-color: #97bcd5;
}

.search-box .search-field {
background-color: #f3fbff;
}

.site-navigation a:hover {
color: #97bcd5;
}

.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a{
color: #fff;
font-weight: 900;
-moz-box-shadow: inset #9f6393 0 -5px 0 0;
-webkit-box-shadow: inset #9f6393 0 -5px 0 0;
box-shadow: inset #9f6393 0 -5px 0 0;
}

.menu-toggle {
background-color: #2b6597;
}

.hentry .mejs-mediaelement,
.hentry .mejs-container .mejs-controls {
background: #2b6597;
}

.page-links a:hover {
background: #97bcd5;
border: 1px solid #97bcd5;
color: #0f3654;
}

.post-navigation a:hover,
.image-navigation a:hover {
color: #97bcd5;
}

#secondary {
background-color: #2b6597;
}

.content-sidebar .widget_twentyfourteen_ephemera .widget-title:before {
background-color: #2b6597;
}

.site-footer {
background-color: #2b6597;
}

.primary-navigation ul ul {
background-color: #97bcd5;
}

.primary-navigation li:hover > a,
.primary-navigation li.focus > a {
background-color: #97bcd5;
color: #0f3654;
}

.primary-navigation ul ul a:hover,
.primary-navigation ul ul li.focus > a {
background-color: #97bcd5;
}

.site:before {
background-color: #2b6597;
z-index: -1;
}

.secondary-navigation ul ul {
background-color: #24890d;
}

.secondary-navigation li:hover > a,
.secondary-navigation li.focus > a {
background-color: #97bcd5;
color: #0f3654;
}

.secondary-navigation ul ul a:hover,
.secondary-navigation ul ul li.focus > a {
background-color: #97bcd5;
}

.header-main {
background-color:#2b6597;

}

[/src]

Die originale style.css vom wp twenty fourteen Theme kannst du hier anschauen.

 

[Patroklos]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

[src=css] .site {
background-color: #fff;
width: 900px;
max-height: 200px;
margin: 0 0 0 0;
}[/src]

Ich gehe mal davon aus, das Site die Seite links ist? Dann würde ich doch glatt behaupten, dass es so Funktionieren muss.

 

[kuromi]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

Nej, leider nicht. .site ist praktisch das ganze Ding von Blog. Die Sidebar hat die ID #secondary und ist - wenn ich das richtig sehe - in #main/.site-main eingebettet. Das ist der Bereich unter dem Header.
Von meiner Vorstellung her müsste ich also die divs umsortieren, was so erst mal nur über die php-Dateien realisierbar sein dürfte (wenn es auch nur per CSS ginge, wärs natürlich traumhaft, dann hab ich was übersehen ). Mir ist nur nicht ganz klar wie, da ich in php nicht zu Hause bin.

Danke, dass du versuchst mir zu helfen.

 

[Patroklos]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

Ist die Seite denn dann content-sidebar oder site-navigation?
Ich stehe gerade aufm Schlauch...

 

[epiphora]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

Vielleicht kannst Du die Seite mal online stellen und verlinken oder (noch besser: ) mal das ganze Theme-Verzeichnis als .rar hochladen.

 

[kuromi]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

@Ripper_Roo: Ich hab jetzt einfach mal einen Screenshot vom Contentbereich gemacht, da siehst du auch die Klassen und IDs - und um die linke Sidebar gehts eben. Dachte erst ich könnte sie evtl. mittels float und entsprechendem width-Wert irgendwie dazu bekommen (zwingen! ) sich einfach über den eigentlichen Contentbereich zu setzen (eben innerhalb des Containers in dem sich alles unterhalb des Headers befindet. Aber stattdessen verschob sich eben alles nach ganz unten. =/
Daher dachte ich, das Einfachste wäre wohl, einfach den Container rauszunehmen und darüber zu platzieren bzw die Reihenfolge der Anordnung zu ändern.



@epiphora: Ich setz mich ran, kann einen Augenblick dauern. Wo lade ich das dann hoch? Gibts favorisierte Dienste?

 

[epiphora]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

Kannst Du auch gerne einfach im ngb als Anhang hochladen. Bilder oder so müssen ja nicht unbedingt enthalten sein.

 

[evillive]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

ist es vielleicht nicht einfacher etwas passendes zu suchen?

Und Nachher könnte unter Umständen etwas anders aussehen als gedacht

 

[kuromi]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

@epiphora: Okay, dann versuch ich mal das Child Theme anzuhängen - das Original twentyfourteen-Theme von Wordpress kann bei Bedarf hier geladen werden.

Im Child Theme sind jetzt eine unfertige style.css (also nicht wundern, wenn sich da z.B. Farben noch widersprechen), eine bereits bearbeitete header.php und einige noch unberührte php-Dateien von denen ich annehme, dass die für das Sidebar-Problem nötig sein werden:
index.php,
single.php,
sidebar.php,
page.php

Hoffe es klappt.

@evillive: Über die Brücke gehe ich, wenn ich dort angekommen bin. Mit CSS sollte das dann schon in eine brauchbare Form gebracht werden können. Immer einen Schritt nach dem anderen
Und ja, wäre vllt. einfacher, möchte ich aber nicht. ich erarbeite mir gerne meine eigenen Themes (auch, wenn es nur Child Themes sind, Sandbox (oder ähnliches) tu ich mir nicht noch mal an ), da weiß ich halbwegs was ich habe und sie werden durch WP mitgepflegt =)


Anhang anzeigen twentyfourteen-child.zip

 

[epiphora]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

In der index.php (Zeile 56) und in der page.php (Zeile 43) wird jeweils die Sidebar eingebunden. Wie Du erkennen kannst, geschieht das nach der Ausgabe des/der eigentlichen Postings. Insofern lässt sich das nicht ausschließlich mit CSS lösen. Wenn Du die Zeile zur Ausgabe der Sidebar aber einfach über die Schleife schiebst, die die Postings ausgibt, müsste die Reihenfolge stimmen. Höchstwahrscheinlich sind trotzdem noch ein paar Anpassungen am Stylesheet nötig.

 

[kuromi]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

@epiphora: Danke dir für deine Mühe =) Dass das nicht nur mit CSS geht dacht ich mir ja schon (hätte aber natürlich nix dagegen gehabt, wenn es doch so geklappt hätte ) - genau die zwei Zeilen die du ansprichst hatte ich schon mal verschoben - blieb allerdings ohne Effekt.
Es tat sich erst etwas, als ich testweise mal die Zeile (fast ganz unten in beiden Dateien)

[src=php]get_sidebar();[/src]

auskommentiert hatte. Dann verschwand die Sidebar.
Nun hat aber der untere php-Code kein End-Tag, weshalb ich nicht so richtig weiß, wie ich damit umgehen muss.
In der single.php das Gleiche:

[src=php]
<?php
get_sidebar( 'content' );
get_sidebar();
[/src]

 

[epiphora]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

Das sind PHP-Funktionen, die die Sidebar komplett einbinden. End-"Tags" sind da nicht erforderlich, weil die Sidebar ja bereits ein vollständiges Markup enthält.

 

[kuromi]

Re: [Wordpress] 2014/ Sidebar/#secondary zwischen Content- und Head-Bereich verschieb

Okay Mich hat irritiert, wieso das an verschiedenen Stellen auftauchte. Die Tage, die ich nun schon wegen des Problems daran sitze, google und hier Beiträge verfasse, hätte ich vllt. dazu nutzen sollen büschn php zu lernen, wa?

Dann hab ich's jetzt, vielen Dank noch mal. Sidebar erscheint direkt unter dem Header. Yay. (^^)


Wen's interessiert:
Die von epiphora oben angesprochenen Zeilen an die gewünschte Stelle verschieben und die von mir angesprochenen Zeilen ohne End-Tag direkt darunter.

Sieht dann praktisch so aus:

[src=php]<?php get_sidebar( 'content' );
get_sidebar();?>[/src]

Das in den Dateien index.php, page.php und single.php anpassen.

Dann in der style.css für #secondary margin auf 0 setzen (mal wieder ein Hoch auf firebug - ich hätt mich totgesucht. ).
Anschließend noch den width-Wert an die Layoutbreite anpassen und den von Wordpress vorgegebenen min-height-Wert von 100px mit einem eigenen Wert überschreiben.

Done