Spalten bei Fjord04 ändern

josegine · Mitglied · November 26, 2009 at 4:12 pm
Link kopieren

Thema zu Favoriten hinzufügen
da es ja angeblich keine dummen Fragen gibt………….oute ich mich jetzt mal als Anfängerin und los geht’s:
ich hab das upgrade gekauft, müsste eigentlich den css editor benutzen können.
und ich will nur die Spaltenbreite bei Fjord04 ändern, weiter nix.
hier das blog: http://staerken.wordpress.com

Original sind sie die Spalten so:
#content {
width: 270px;
text-align: left;
border-top:solid 1px #CED4CA;
border-bottom:solid 3px #CED4CA;
border-left:solid 1px #CED4CA;
border-right:solid 3px #CED4CA;
float: left;
margin: 5px;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
#sidebar-1 {
width: 170px;
background-position: -300px 0;
}
#sidebar-2 {
width: 170px;
background-position: -500px 0;
}
#sidebar-3 {
width: 170px;
background-position: -700px 0;

ändern will ich es zu:
content 330px
und sidebar – 3 zu 110px

soweit so gut. Mir ist auch klar, dass ich zum CSS editor gehen muss, dann das „/* Welcome to Custom CSS!“ Feld leer machen muss.

und dann? Schreibe ich dann einfach die Änderungen rein und das Stylesheet weiss, wo es im Original einfügen und änderen? oder muss ich noch einen weiteren „Änderungscode“ angeben.

also: hier wäre die geänderte Passage: die einfach ins leere Feld einfügen, es mir in der Vorschau anschauen und dann auf Speichern klicken und dann hab ich’s?

#content {
width: 330px;
text-align: left;
border-top:solid 1px #CED4CA;
border-bottom:solid 3px #CED4CA;
border-left:solid 1px #CED4CA;
border-right:solid 3px #CED4CA;
float: left;
margin: 5px;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 30px;
}
#sidebar-1 {
width: 170px;
background-position: -300px 0;
}
#sidebar-2 {
width: 170px;
background-position: -500px 0;
}
#sidebar-3 {
width: 110px;
background-position: -700px 0;

Das wäre ja zu einfach um wahr zu sein. Kann ich gar nicht glauben.
Danke für eine Erklärung. josegine

Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).
zodiac1978 · Mitglied · November 26, 2009 at 4:55 pm
Link kopieren
Warum hast Du das Upgrade gekauft ohne es vorher zu testen???
Du kannst doch eine Preview anschauen, ohne das Update zu besitzen.

Und auch jetzt ist die Devise: Ausprobieren!

Stell den Button unter dem Editor so ein, dass du nur Änderungen hinzufügst (nicht von vorn beginne) und dann gibst Du auch *nur* die Änderungen an.

Also reicht:
```
#content { width: 330px; }
#sidebar-3 { width: 110px; }
```
Damit er die Änderungen auch sicher übernimmt, hänge ein „important!“ an die CSS-Definition an. Vorschau anschauen und wenn es geklappt hat speichern.
```
#content { width: 330px !important; }
#sidebar-3 { width: 110px !important; }
```
Bis auf das Speichern kannst Du das alles auch ohne das Update machen.

Hilfreiche Hinweise findest Du hier:
https://de.forums.wordpress.com/topic/css-tipps?replies=1

Gruß, Torsten
josegine · Mitglied · November 26, 2009 at 5:43 pm
Link kopieren
Danke, Torsten,
das hat mir geholfen. ich glaub, jetzt hab ich’s generell kapiert, wie ich die Änderungen markieren muss, nämlich mit dem #.
ich wollte die Änderungen ja nicht nur per Vorschau anschauen, sondern auch verwirklichen. Also hat sich das upgrade gelohnt.
einen schönen Abend,
josegine
josegine · Mitglied · November 26, 2009 at 5:55 pm
Link kopieren
quatsch, was ich eben geschrieben habe mit dem #
aber kapiert habe ich es trotzdem.
Gruss
iqatrophie · Moderator · November 28, 2009 at 5:05 am
Link kopieren
Sofern es dir noch nicht aufgefallen ist, noch folgender Hinweis. Du müsstest auch die background-position der Hintergrundbilder in den einzelnen Seitenleisten deinen neuen Größenverhältnissen anpassen, damit du einen ähnlichen Effekt erzielst, wie im Originaltheme.

Im Moment wiederholt sich wegen der unveränderten Positionsangaben nämlich in der ersten Seitenleiste ein großer Teil des Bildes aus deinem Inhaltsbereich.

Hab das mal schnell für dich durchgerechnet. Die neuen background-positions müssten folgendermaßen aussehen:
```
#sidebar-1 {
background-position:-400px 0;
...
}
```
```
#sidebar-2 {
background-position:-560px 0;
...
}
```
```
#sidebar-3 {
background-position:-710px 0;
...
}
```
Ist dir übrigens aufgefallen, das dein „Hebammengemeinschaft Engelbeck“ Link in der 1. Seitenleiste ausbricht? Ich würde versuchen, dafür eine kürzere Beschreibung zu finden, ansonsten sieht es nicht schön aus.

Gruß, Martin(IQ)
josegine · Mitglied · November 29, 2009 at 9:26 am
Link kopieren
ach Martin, das war ja Gedankenübertragung. Denn du hast mir die Antwort geliefert zu der Frage, die ich noch gar nicht gepostet hatte.
Herzlichen Dank.

Das mit dem Bild ist mir auch auch schon aufgefallen. Allerdings wollen wir das header bild sowieso noch verändern, deshalb ist da die Arbeit noch nicht zu Ende.

Jetzt hab ich die Content-Leiste so erweitert, dass auch der lange Name hinpasst. Ich schätze mal, dass das der längst Name einer Einrichtung ist (es kommen noch ganz viele hinzu), so dass auch dieser Schönheitsfehler erstmal behoben ist.

So jetzt geht’s weiter mit dem Basteln – passend zur Adventszeit ;-)
Gruss, Josegine
iqatrophie · Moderator · November 30, 2009 at 6:33 am
Link kopieren
Meine Positionsangaben bezogen sich auf deine ursprünglichen Spaltenbreiten (370px, 110px, 120px, 130px). Sobald du diese änderst, ändern sich natürlich auch die background-positions der einzelnen Seitenleisten. Deswegen stimmen meine vorherigen Angaben natürlich jetzt nicht mehr.

Ist denn das aktuelle Bild das endgültige?

By the way, die Bildqualität der rechts eingefügten Bilder ist um einiges schlechter, als das Spielplatzfoto. Sehen leicht verwaschen und ein bisschen gestaucht aus.

Gruß, Martin(IQ)
josegine · Mitglied · November 30, 2009 at 11:39 am
Link kopieren
die endgültigen Spaltenbreiten sind jetzt ( 360px, 170 px, 140 px und 110 px)
Neue background-positions sind sehr willkommen.

Das aktuelle Bild ist noch nicht das endgültige, deshalb einige auch noch verwaschen.

Ich rätsele jetzt nur, wie gross einzelne Bilder in einer Collage sein können, so dass sie dann auch jeweils in einer spalte auftauchen.

Gruss, Regine
iqatrophie · Moderator · Dezember 12, 2009 at 2:45 pm
Link kopieren
Ich rätsele jetzt nur, wie gross einzelne Bilder in einer Collage sein können, so dass sie dann auch jeweils in einer spalte auftauchen.

Wartest du eventuell noch auf Antwort von mir? Ich würde sagen, du solltest die einzelnen Bilder entsprechend deiner Spaltenbreiten wählen, also 360px, 170 px, 140 px und 110 px. Anschließend kannst du das Hintergrundbild in jeder Spalte mit Hilfe von background-position entsprechend positionieren, damit das jeweilige Einzelbild in die Spalte passt.

Der eigentliche Sinn/Effekt von Fjord04 war/ist allerdings ein einziges Foto zu verwenden, dass über alle 4 Spalten angezeigt wird. Den würdest du mit deiner Collage ad absurdum führen. ;)

Gruß, Martin(IQ)
josegine · Mitglied · Dezember 19, 2009 at 12:23 pm
Link kopieren
Danke, Martin.

ich hatte erst auf eine Antworte gewartet, aber dann auch selbst eine lange Pause gemacht.
Nun hab ich heute mit trial and error gearbeitet. und finde es jetzt erstmal so gelungen . Falls es dich interessiert: das ist die Lösung

die bilder von der Collage sind jeweils 30 px breiter als die sidebar bzw content. denn sonst sind es nur 780 px und es müssen 900 px breite sein.

#content {
width:360px!important;
}

#sidebar-1 {
width:170px!important;
background-position:-390px 0;
}

#sidebar-2 {
width:140px!important;
background-position:-590px 0;
}

#sidebar-3 {
width:110px!important;
background-position:-760px 0;
}
zodiac1978 · Mitglied · Dezember 19, 2009 at 10:13 pm
Link kopieren
Ist schön geworden!

Gruß, Torsten
iqatrophie · Moderator · Dezember 20, 2009 at 1:49 pm
Link kopieren
Da nimmt mir Torsten die Worte aus dem Mund. :) Ist wirklich schön geworden. Jetzt stimmt auch die Qualität der Bilder.

Gruß, Martin(IQ)