Design/Fixpunkt der/auf der "Seitenleiste"

In deinem Theme-Ordner gibt es eine Datei, die für deine rechte Seitenleiste (sidebar) zuständig ist. Sie heißt wahrscheinlich auch sidebar.php. Die öffnest du und fügst den Code für das Bild mit dem Link an der entsprechenden Stelle (z.B. unter Lauftools) ein.

<a href="http://www.jogmap.de"> <img alt="" src="http://www.jogmap.net/laufstrecken/23891.jpg" class="alignleft"/></a>

Solltest du nicht klarkommen, kannst du deine sidebar.php hier posten und man kann dir genauer sagen, was wo hingehört. ;-)

Suche in der style.css [COLOR=red]deines Themes[/COLOR] nach in etwa diesem Code

#contentwrapper_fullwidth {
  width: 880px;
  float: left;
  padding-left: 5px;
  padding-right: 20px;
  }

Variiert von Theme zu Theme

Bei mir steuert dieses die Gesamtbreite

Dann suche in etwa diesen Code mit dem Begriff "sidebar" oder "sidebars" wenn du mehrere hast. (Bei mir sind es mehrere)

#sidebars {
  float: right;
  margin-top: 0px;
  margin-left: 15px;
  padding-top: 5px;
  width: 350px;
  }

ggf. musst du noch die Footerbreite anpassen.

Suche nach in etwa diesem hier.

#footerwrapper

Hoffe ich habe nichts vergessen - bin auch ziemlich neu hier.

Gruß Gordon

Zitat

Das wird schwer mit [COLOR=#000000]Theme[/COLOR] verbreitern.

Habe mir das Theme mal gezogen und siehe da es sind nur 6 Positionen die in der CSS zu ändern wären. Eigentlich nur 5, denn #header müsste ja nicht unbedingt geändert werden.

#comment {
 background: #ffffff;
 border: 1px solid #e9e9d9;
 color: #595949;
 font-size: 11px;
 padding-left: 2px;
 vertical-align: middle;
 width: 350px;
}
 
#content {
 background: inherit;
 border: none;
 color: #000000;
 margin: 0;
 padding: 0 30px 30px 67px;
 text-align: left;
 width: 430px;
}
 
#header {
 background: inherit;
 color: #a0a999;
 font-size: 11px;
 height: 120px;
 margin: 0;
 padding: 8px 30px 0 7px;
 text-align: right;
 width: 490px;
 
#page {
 background: url(images/middle.gif) repeat-y top center;
 margin: 0 auto;
 padding: 0;
 text-align: left;
 width: 714px;
}
 
#s {
 background: #ffffff;
 border: 1px solid #e0e0d0;
 color: #595949;
 font-size: 11px;
 height: 15px;
 padding-left: 2px;
 vertical-align: middle;
 width: 115px;
}
 
#sidebar {
 border: none;
 float: right;
 font-size: 11px;
 margin: 0;
 padding: 0 27px 30px 0px;
 text-align: left;
 width: 128px;
}

Danach müssen natürlich die Bilder breiter gemacht werden. (Aber bitte nicht einfach nur ziehen, sondern montieren) ...sind aber nur 3 - denke ich.

Zitat

Aber warum machst du nicht einfach das Bild kleiner

...schaut das dann nicht ziemlich unsauber aus?

Gruß Gordon

Zitat von kreisl

gordon
Danke für den Tip; leider kann man in der Style.css
irgendiwe nur die Schrift/Abstände verändern, nicht
aber die Maße des Ganzen.

Ich habe das jetzt eine Weile ausprobiert und auf diesem
Wege die style.css kennengelernt. :)

Alles anzeigen

Schau dir das bitte mal an

#page {
 background: url(images/middle.gif) repeat-y top center;
 margin: 0 auto;
 padding: 0;
 text-align: left;
 width: 714px;

...steuert deine Seitenbreite.

LG Gordon

Zitat von kreisl

gordon

Ach, so unsauber ist das garnicht, oder?

Das Icon nicht, aber "Jogmap" und die "KM"

Zitat von kreisl

Thx trotzdem für Deine Mühe!

Bitte immer wieder gerne - wenn ich was dazu beitragen kann :-D

kreisl
maxe

Ja natürlich nur die Schriften, die Bilder musst man trotzdem bearbeiten.

Und selbstverständlich auch in der CSS die Aufteilung zwischen #page (Gesamtbreite)
Content (Hauptinhalte links), sowie #sidebar (Position und offset der Sidebar) neu einstellen.

Ist aber keine große Sache. Ich habe mal folgendes vorbereitet. (Datei im Anhang)

Bilder für Theme -neue Breite 880 px (top.gif, middle.gif, bottom.gif).
Die Sidebar ist jetzt 200px breit (ohne den rechten Schatten natürlich, ansonsten ca. 207px)

Hierzu die neue style.css, sowie die Sidebar mit eingebauter „Jogmap“ in Originalgröße oberhalb von META.

Vor dem Aufspielen der Dateien, jedoch bitte BACKUP machen, da ich deine sonstigen Modifikationen ja nicht kenne.

[COLOR=red]Backup-Dateien sind die Bilder top.gif, middle.gif, bottom.gif, sowie die Dateien sidebar.php und style.css.[/COLOR]

...und bitte jetzt nicht falsch verstehen das Ganze.

Ich als WP-Newbie habe vor WP einen höllen Respekt, hingegen Photoshop macht mir keine Angst.

Für mich war das jetzt eine kleine Trainingseinheit. (Hilft mir, um den höllen Respekt auf einen gesunden Respekt, der immer bleiben sollte, zu reduzieren.)

Außerdem habe ich hier schon viele gute Tipp zu WP bekommen und gefunden, warum denn nicht auch mal was zurückgeben, wenn man kann.

LG Gordon

P.S. kreisl – Viel Spaß mit dem 880er Design