Designanpassung

Benjamin-Do

Hallo Zusammen,

ich habe auf meiner Testumgebung mein Design fast fertig. Nur bei drei kleinen Sachen verzweifel ist gerade etwas. :(

Also ich schreibe mal was ich gerne machen möchte:

1.) Der weiße Streifen zwischen dem blauen Balken und dem Seitenrand soll verschwinden.

2.) Die Kategorieüberschriften würde ich gerne in den blauen Balken bekommen. Wo ich die Farbe für die Schrift ändern muss, weiß ich :) glaub ich.

3.) Wo muss ich denn die Hintergrundfarbe für die restliche Seite ändern? Also die Farbe die dann das eigentliche Blog umgibt. Habe in der Style CSS nicht den richtigen Code gefunden.

Als Ausgangsthema habe ich das Thema "Batemle Fresh" verwendet.

Wer kann mir helfen?

Danke!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

Naja, auf dem Bild kann man nicht wirklich viel erkennen ... und ein LINK zum Blog sagt manchmal mehr als tausend Wort.

Benjamin-Do

Verlinken kann ich es noch nicht, da ich es im Moment nur auf "Localhost" hab.

Hab aber mal ein neues Bild gemacht. Vielleicht ist es nun besser zu sehen was ich mein.

maxe

Du kannst doch nicht erwarten, dass wir dir hier antworten können ohne dass wir die Templates und das CSS kennen.

Benjamin-Do

Was es für ein Template ist steht doch oben. Und online stellen geht nicht, da das Blog ja schon online ist.

Und wenn ich nun ein halbes Design online stelle verscheuch ich ja die User oder?

Wie soll ich es sonst posten?

maxe

Sorry, aber selbst Google kennt dein Theme nicht. Gib doch wenigstens mal einen Link zum Theme. Sonst kann ich dir nicht helfen.

Benjamin-Do

Na Link geht :)
Einmal dort Fresh Theme for WordPress :: iLEMONed

Und der direkte Download: iLEMONed

Benjamin-Do

So hab mal meine Style CSS in eine txt "umgewandelt" und angehangen, hoffe es hilft weiter

maxe

1. den weißen Streifen bekommst du vermutlich weg, wenn du für die #sidebar h2 auch eine width von 290px angibst.
2. kann ich nicht wirklich ohne Liveansicht sagen.
3. den restlichen Hintergrund definierst du über den body

Code

background:#0D297A url(images/bg.gif) repeat-y scroll center top;

Benjamin-Do

danke schon mal.

das problem mit der sidebar hat leider mit der definition der width nicht geholfen :(

hatte es mal zum spaß auf 390 gesetzt und dann ist in dem blauen rechten bereich noch mal die grafik eingeblendet worden. aber die grafik ist nicht nach rechts rüber gerückt.

was ich auch noch nicht geschafft hab ist die "überschriften" in die grafik zu bekommen.

Benjamin-Do

Habe die Stelle gefunden wo ich die Grafik verschieben kann.

Zeile 460 - 467

PHP

#sidebar {
    float: right;
    width: 285px;  /* blaue Grafik verschieben */
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    }

gsibergerin

Wenn deine CSS immer noch so aussieht, dann versuche mal folgendes:

HTML

background: url(images/h3-bg.gif) no-repeat right bottom;

no-repeat sorgt dafür, dass die Grafik nicht wiederholt wird, und vielleicht war das center an dem Abstand schuld.

Wenn du die Überschriften an die richtige Stelle rücken willst, ist entweder das margin oder padding von h2 dafür zuständig. Ich tippe hier eher auf margin (Glaskugelmodus, weil kein Link): Verändere die Zahlen und probier ein bisschen rum, oder noch besser, sieh dir die Anweisungen im (unveränderten) Original-Theme noch einmal genau an:

HTML

#sidebar h2 {
    width: 287px;
    overflow: visible;
    display: block;
    margin: 16px 0 6px 0;
    padding: 0 0 35px 0px;
    background: url(images/h3-bg.gif) /* repeat-x center bottom */;
    font-size: 1.4em;
    }

gsibergerin

Hast du denn vorher die Breite der Sidebar verändert? Wenn nicht, dann tu´s auch jetzt nicht, es löst nicht das Problem, sondern versteckt nur das Symptom. Die Grafik "sitzt" in sidebar h2, versuch´s mal probehalber mit meiner Lösung.

Benjamin-Do

Hi,
leider hat sich da absolut nicht das getan was ich wollte. :(

Den Link zum Blog kann ich ja nicht posten, da das Design ja nicht online ist.

Die Breit der Sidebar wurde nur um 2 px verändert.

gsibergerin

Tja, ich fürchte, so gibt´s kein Weiterkommen. Wirklich helfen kann man dir hier erst, wenn man die Seite live anschauen kann. Ich empfehle dir, die Original-CSS und deine geänderte Datei noch einmal genau zu vergleichen und Änderungen schrittweise rückgängig zu machen - vorher wird es ja gepasst haben, nehme ich an? Es können nicht nur die 2px Breiten-Änderung gewesen sein...
Außerdem empfehle ich für CSS-Probleme immer gerne die Verwendung von Firefox mit den Addons Firebug (sehr hilfreich!) und Web-Developer.
Ich verstehe deine Vorbehalte, eine halbfertige Seite online zu stellen. Aber wenn du nicht mehr weiterkommst, würde ich das tun - du kannst Wordpress sagen, dass sie Suchmaschinen nicht gezeigt werden soll (bis sie fertig ist). Richtig testen kannst du ohnehin nur online.
Mit der Veränderung von Breiten und margins solltest du vorsichtig sein, denn meistens ist die Breite genau für eine bestimmte Bildschirmauflösung berechnet, und wenn du sie einfach erhöhst, entstehen im ungünstigsten Fall horizontale Scroll-Leisten.

Benjamin-Do

Vorher war diese Grafik gar nicht drinnen :) An der Stelle wo jetzt die Grafik ist war vorher einfach nur ein grüner Balken.

Da mein Blog ja schon im Betrieb ist mit einem anderen Design würde ich ja die Leser verschrecken :(

Soll ich dir Das Thema mal per zip schicken?

Benjamin-Do

Ich häng einfach mal die zip hier an. Ist aber noch nicht fertig und es müssen auch noch erhebliche Veränderungen am Code und an anderen Stellen vorgenommen werden wegen Copyright und so.

gsibergerin

Die Grafiken und Überschriften (die hab ich jetzt mal weiß gemacht, damit die Lesbarkeit besser ist) sitzen jetzt am richtigen Ort, wenn du folgenden Code verwendest:

HTML

#sidebar h2 {
    width: 287px;
    overflow: visible;
    color: #FFFFFF;
    text-indent: 45px;
    margin:0;
    padding:30px 0px 30px 0px;
    background: transparent url(images/h3-bg.gif) no-repeat right center/* repeat-x center bottom */;
    font-size: 1.4em;
    }

Deine Grafik hat aber den Nachteil, dass die obere Rundung nicht mit dem geraden Abschluss des RSS-Bildes zusammenpasst. Ich würde dir empfehlen, die "abgeschnittene" RSS-Grafik durch einen normalen RSS-Button zu ersetzen, dann ist auch dieses Problem gelöst. Das overflow:visible würde, wenn die Überschrift zu lang ist, das Wort aus der Sidebar herausragen lassen, also musst du hier auf die Länge achten.

Noch etwas: Die Grafik, die du da verwendest, stammt aus einem Elegant wpt-Theme. Damit solltest du vorsichtig sein, ich glaube nicht, dass das im Sinne des Autors ist...

maxe

Hab's mir mal angeschaut und hätte den Vorschlag:

Code

#sidebar h2 {
background:transparent url(images/h3-bg.gif) no-repeat scroll [B][COLOR=black]left[/COLOR][/B] bottom;
[B]color:#FFFFFF;[/B]
display:block;
font-size:1.4em;
[B]margin:16px 0 2px 2px;[/B]
overflow:visible;
[B]padding:25px 0 25px 40px;[/B]
width:287px;
}

Benjamin-Do

Zitat von gsibergerin

Noch etwas: Die Grafik, die du da verwendest, stammt aus einem Elegant wpt-Theme. Damit solltest du vorsichtig sein, ich glaube nicht, dass das im Sinne des Autors ist...

Nee die Grafik wird noch ersetzt, aber die Größe und die Art der Grafik wird bleiben. Aber das gesamte Design der Grafik wird ersetzt. Deswegen ist ja auch alles noch nicht online.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Designanpassung

Jetzt mitmachen!