Edi
(@psychosopher)
1) Sidebar
Die Grösse von Hauptfeld und Seitenleiste kannst Du beispielsweise wie folgt definieren:
#primary {
width: 80%;
}
#secondary {
width: 20%;
}
Du kannst den Wert für die Breite (width) auch absolut in einem Mass wie Pixel (px) angeben.
2) Umrandung
Die Umrandung des Titels in einem Widget ist derzeit wie folgt definiert (Zeile 443):
.widget-area .widget-title {
border: 2px solid #444;
padding: 10px;
}
Hier kannst Du die Breite, den Stil und die Farbe anpassen.
Um zu sehen, welche CSS-Definitionen den Elementen zugeordnet sind, gibt es verschiedene Tools. In Firefox etwa kannst Du ein Element markieren und dann über die rechte Maustaste „Element untersuchen“ aufrufen.
CSS-Anpassung machst Du an einfachsten und besten mit einem Plugin wie Simple Custom CSS:
https://wordpress.org/plugins/simple-custom-css/
Andernfalls gehen Deine Anpassungen bei einer Aktualisierung des Themes verloren.
Hallo lwnhrz,
das ist nicht so trivial zu beantworten. Suche in dieser Datei:
http://sicherheit-zuhause.info/wp-content/themes/flymag/style.css?ver=4.5.2
nach .content-area und .widget-area
Das Theme ist responsive, bzw. adaptive gestaltet und enthält daher einige Media Queries, die du beim Ändern der Breite (width) berücksichtigen musst. Bis 1023px Viewport sind beide Container bereits auf 100% gesetzt.
Änderst du nun einmalig den Wert für content und seitenleiste in einer custom.css, überschreibt es die Media Queries. Du musst dir also alle in Frage kommenden Stellen heraus kopieren und in derselben Reihenfolge in die custom.css einfügen und dann anpassen.
Die schwarze Umrandung bekommst du übrigens weg mit border: 0; und padding dann auch auf 0 setzen.
Edi
(@psychosopher)
Zugegeben, dass war etwas auf die Schnelle… So genau habe ich mir das Theme nicht angesehen. 😉
Responsiv/adaptiv geht mit dem Theme auch einfach, indem Du die Werte für die Breite veränderst. Beispielsweise:
.content-area {
width: 975px;
}
.widget-area {
width: 250px;
}
@hwnlrz, bitte denke daran:
Änderst du nun einmalig den Wert für content und seitenleiste in einer custom.css, überschreibt es die Media Queries.
Edi
(@psychosopher)
@hwnlrz
Wenn Du die Werte für die Desktop-Ansicht änderst, überschreibt es keine Media-Queries. Du musst Dich also nicht darum kümmern.
Wenn man etwas überschreibt – womit die dem Theme beiligende style.css gemeint sein dürfte – dann wird diese Änderung, bzw. die style.css beim nächsten Theme-Update selbst wieder überschrieben und die eingefügte Änderung ist weg.
Bisher war nur die Rede von einer custom.css.
CSS-Anpassung machst Du an einfachsten und besten mit einem Plugin wie Simple Custom CSS:
https://wordpress.org/plugins/simple-custom-css/
Und damti wird nun mal alles andere überschrieben, ist ja auch Sinn einer custom.css, und bleibt auch nach einem Theme-Update bestehen (was gut ist).
Edi
(@psychosopher)
@hwnlrz, es kommt darauf an, was überschrieben wird. Und was überschrieben wird, habe ich Dir bereits erklärt.
Bei weiteren Fragen kannst Du mich gerne direkt kontaktieren.
Edi,
dann füge doch einmal im Firebug oder einem anderen Entwicklertool ans Ende der style.css deinen Code ein. Dann verkleiner das Fenster.
.content-area {
width: 975px;
}
.widget-area {
width: 250px;
}
Betrachten bitte mit px – Werten.
Nicht anders verhält es sich, wenn man das in die custom.css einfügen würde.
Und auch wenn du stattdessen
.content-area {
width: 80%;
}
.widget-area {
width: 20%;
}
nehmen würdest, es gäbe bei kleinerem Viewport (Browserfenster schmaler ziehen) keine Veränderung mehr. Die Sidebar würde auf 20% der sichtbaren Breite bleiben.
Edi
(@psychosopher)
dann füge doch einmal im Firebug oder einem anderen Entwicklertool ans Ende der style.css deinen Code ein. Dann verkleiner das Fenster.
Kunststück, dass es dann nicht funktioniert…
Noch einmal… Ich füge folgenden Code in das Feld des Plugins „Simple Custom CSS“ ein (oder in die Datei style.css des Child Themes):
.content-area {
width: 975px;
}
.widget-area {
width: 250px;
}
Speichern. Fertig.
Funktioniert beim Verkleinern und Vergrössern des Browserfensters.
Allerdings beispielsweise nicht auf iPad und iPhone. Aber da hat das Theme noch andere Macken. Da müsste so oder so nachgebessert werden.
Noch einmal… Ich füge folgenden Code in das Feld des Plugins „Simple Custom CSS“ ein (oder in die Datei style.css des Child Themes):
.content-area {
width: 975px;
}
.widget-area {
width: 250px;
}
Scheinbar geht es nicht anders. Ich werde jetzt nicht noch einen Screencast mit einem Child-Theme erstellen, sage an dieser Stelle nur: simple custom css und style.css des Child-Themes haben dieselben Auswirkungen.
Aber ich habe das mal in die simple custom css (https://wordpress.org/plugins/simple-custom-css/) eingefügt. Und per Video festgehalten, was passiert.
https://youtu.be/IyE0DQPr71o
Noch Fragen?
ich tät die Änderungen in ein „min-width media query“ geben,
denn das Theme nutzt sehr viele CSS Dateien, die sich zum Teil gegenseitig überschreiben.
Aber mit min-width ist man dann auf der sicheren Seite.
Ich kann auf meinem iPad in keiner Ansicht und mit keinem Browser Fehler feststellen.
Yep, Monika, mit dem min-width hast du recht, hatte ich auch schon überlegt.
denn das Theme nutzt sehr viele CSS Dateien, die sich zum Teil gegenseitig überschreiben.
@monika, Firebug zeigt mir nur eine Datei an, die Einfluss auf die Breite von .content-area und .widget-area nimmt, nämlich die style.css des Parent Themes.
Die vielen CSS-Dateien mögen sich in anderen Bereichen überschneiden und überschreiben, aber nicht in (ontopic) der Breite.
Welche anderen CSS-Dateien meintest du denn?
Nichtsdestotrotz bleibt das mit der min-width media query die eleganteste Lösung :-).
Edi
(@psychosopher)
@monika
Ich kann auf meinem iPad in keiner Ansicht und mit keinem Browser Fehler feststellen.
Beispielsweise wird das „latest news ribbon“ auf dem iPhone nicht richtig dargestellt.
Ein anderes Problem ist die ungleiche Positionierung des Titels bei Blogbeiträgen mit und ohne Bild in der Vorschau.
Im übrigen sind die Breite des Header-/Sliderbereichs und des Inhaltsbereichs bereits bei der Desktop-Ansicht nicht pixelgenau gleich.
Wie Du geschrieben hast, benutzt das Theme viele CSS Dateien, darunter auch Bootstrap-Vorgaben, die sich gegenseitig in die Quere kommen können. Deshalb reicht das Auf- und Zuziehen des Browserfensters nicht, wie hier geraten worden ist (auch wenn das bei mir nach wie vor ohne Probleme klappt), sondern es muss mit verschiedenen Geräten getestet werden.
damit du dich noch auskennst @lwnhrz
Plugin custom css holen, aktivieren
/* farbe, rahmen etc widget title aendern*/
.widget-area .widget-title {
border: 2px solid #444;
padding: 10px;
}
/*sidebar schmaler*/
@media (min-width: 1100px) {
.content-area {
width:76%;
}
.widget-area {
width: 24%;
}
/*zur Sicherheit*/
.content-area,
.widget-area {
box-sizing:border-box;
}
}
Prozentwerte kannst du anpassen, mehr als gemeinsam100% sollten es aber nie werden 😉
