Beiträge von KuniT

Hallo Susann Vega,
es gab eine Zeit, da hab ich Suzanne Vega total viel gehört...

Als ich im Sommer mit WorpPress und responsive design angefangen habe, habe ich diese Infos im Netz gefunden, vielleicht helfen sie Dir ja weiter...

Schriftgrößen im iPhone
Gerade bei Smartphones wie dem iPhone (bei einem kleinen Display mit sehr hoher Auflösung) kann es bei einer Schriftgrößen-Angabe in Pixel sein, dass eine Schrift auf dem iPhone viel zu klein angezeigt wird.
Im iPhone ist die CSS3-Eigenschaft text-size-adjust standardmäßig Auto.
[COLOR=#0000cd]html { -webkit-text-size-adjust: auto; }[/COLOR]
Das bedeutet, dass jede Webseite auf dem iPhone automatisch skaliert wird. (Möchtest du das automatische Skalieren vermeiden, kannst du die -webkit-text-size-adjust-Eigenschaft in deinem Stylesheet auf none setzen.)

Viewport
Zu den absoluten Grundlagen der mobilen Entwicklung gehört das Meta-Element viewport. Diese eine Zeile HTML-Code sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.
Die Browser der mobilen Devices gehen zuerst einmal davon aus, dass Websites nicht für mobile Endgeräte ausgelegt sind und die Website-Breite die Display-Breite um einiges übersteigt.
Der Browser-Viewport (Anzeigebereich) ist deshalb z.B. in Mobile Safari auf eine Breite von 980 Pixeln eingestellt, so dass die meisten Website komplett zu sehen sind. Logischerweise mit dem Nachteil, dass die Inhalte sehr klein und Schriften nicht lesbar sind. Der Nutzer muss dementsprechend hineinzoomen.

Handelt es sich um Website, die speziell für mobile Devices erstellt oder optimiert ist, geht man meist nicht den obigen Weg, eine fixe Breite für den Viewport anzugeben (Ein iPhone hat z.B. im Hochformat eine Breite von 320px und im Querformat 480px). Dies hätte zur Folge, dass im Hoch- und Querformat die gleichen Inhalte, lediglich in einem unterschiedlichen Zoomlevel, gezeigt würden.

Stattdessen wird deshalb üblicherweise folgende Formel verwendet: Breite des Viewports = Breite des Devices. Konkret bedeutet dies: Das iPhone hat 320px Breite im Hochformat, weshalb genau 320px der Website gezeigt werden (1:1-Darstellung). Ebenso werden im Querformat dann 480px gezeigt. Diese flexible Einstellung ist einerseits geräteunabhängig und ermöglicht es andererseits auch, im Querformat den gewonnen Platz in der Breite sinnvoll zu nutzen.

Viewport-Einstellungen
Das Meta-Element für den Viewport besitzt neben der Breite weitere Eigenschaften, die komma-separiert aufgelistet werden.

[COLOR=#0000cd]<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
[/COLOR]
[COLOR=#0000cd]initial-scale:[/COLOR] Der Wert legt den anfänglichen Zoomgrad fest. 1.0 führt dazu, dass die Inhalte 1:1 dargestellt werden, d.h. auf einem Screen mit 320px Breite füllt eine 320px-breite Grafik die komplette Breite aus (siehe auch Screenshot oben). Dementsprechend führt z.B. 2.0 zu einer 2x-fachen Vergrößerung.

[COLOR=#0000cd]user-scalable:[/COLOR] Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no).

[COLOR=#0000cd]minimum-scale und maximum-scale:[/COLOR] Diese beiden Eigenschaft ermöglichen es, den Zoomgrad einzuschränken. Setzt man z.B. die maximale Skalierung auf 2.0, kann der Inhalt maximal 2x-fach vergrößert werden.

Ich habe ein Samsung Handy (480x320), Android 2.3.6.

Wenn ich Deine Site im Hochformat aufrufe, werden die Bilder unterschiedlich groß dargestellt und dementsprechend sind die Unterschriften verschoben. Schriftgröße ist ok und Bildgrößen auch, wenn es nur eine von den 3 wäre.

Wenn ich Deine Site im Querformat aufrufe, werden die Bilder auch unterschiedlich groß dargestellt und dementsprechend sind die Unterschriften verschoben, aber der Größenunterschied ist deutlich geringer. Schriftgröße ist ok und Bildgrößen auch, wenn es nur eine von den 3 wäre.

Stürmische + sonnige Grüße aus der Nordsee
KuniT

Hallo MegaWork,

Zitat von MegaWork

Ich befürchte, das Problem sitzt noch tiefer - nämlich bereits beim Grundverständniss von CSS. Hierfür würde ich Dir das Buch "Praxis CSS" von Kai Laborenz
empfehlen.

Ich denke, 15 Jahre "Programmierung" von statischen Websites mittels HTML + CSS (W3C-Standard-konform) dürften mir ein gewisses Grundverständnis für CSS vermittelt haben. Aber auch weitere 15 Jahre würden mir nix nützen, wenn ich (wie ich bereits geschrieben habe) noch total unerfahren mit php und den Hintergrundabläufen bei WordPress bin.

Ich werde meine Frage noch einmal detaillierter formulieren und unter einem neuen Titel ins Forum stellen. Vielleicht sehe ich ja auch gerade nur den Wald vor lauter Bäumen nicht.

Trotzdem haben mich Deine Antworten ans Ziel gebracht. Vielen Dank. Es läuft: Original + child sind sauber getrennt und auch die beiden Updates (WP auf 4.0 und Theme "sixteen" auf 1.3.0.3) haben meinem Layout nix getan. :-)

Zitat von MegaWork

Also, ich versuche jetzt noch einmal das verständlich zu erklären:
Stylesheets werden sequentiell abgearbeitet, d.h. das Stylesheet, welches zuerst geladen wird wird auch zuerst ausgeführt - ergo überschreiben die Anweisungen der später geladenen Stylesheets die zuvor geladenen Anweisungen. Die Reihenfolge der Anweisungen in Deiner child-style.css ist unabhängig von der Reihenfolge in der main.css - Du musst nur sicherstellen, dass die child-style.css NACH der main.css ausgeführt wird.
Die Reihenfolge der Anweisungen innerhalb der child-style.css ist hingegen nicht egal, da auch diese Datei der Reihe nach (von oben nach unten) abgearbeitet wird.
Attribute, die in der main.css aufgeführt sind aber nicht in der child-style.css werden NATÜRLICH ausgeführt - denn, sie werden ja nicht überschrieben! Wenn Du diese Attribute nicht haben willst, musst Du Sie auschalten (manche mit none, andere mit hidden und wieder andere mit 0 - das hängt immer davon ab um welches Attribut es sich handelt)!

Diese Beschreibung hat mich auf den Weg gebracht. Danke. Wobei es für meine Site nicht zutrifft, dass ich in meiner child-style.css NUR die veränderten Styles aufführe. Für das Menü muss ich einige der bereits in der main.css unverändert definierten Anweisungen noch einmal nennen, sonst funktioniert es nicht. Das musste ich Zeile für Zeile im Vergleich main.css/child-style.css testen.

Zitat von MegaWork

Auf die "999" kannst Du getrost verzichten, wenn Du das stylesheet richtig einbindest:

PHP

<?php
  function call_my_class() {
  wp_enqueue_style( 'child-main', get_stylesheet_directory_uri()."/mobilchild-main.css", array('sixteen-main-style') );
  }
 add_action( 'wp_enqueue_scripts', 'call_my_class');
 ?>

Dieses snippet in der functions.php des child themes sollte das an die richtige Stelle setzen.

Dieser Code funktioniert bei meiner Site nicht. Das Menü wird nicht angezeigt. Meine functions.php im child-theme besteht nur aus dem Code, den ich bereits weiter oben genannt hatte. Das funktioniert. Wie ich jetzt im Internet gefunden habe, bedeutet die "999" sinngemäß, dass diese Funktion als letzte ausgeführt und damit auf jeden Fall die main.css vor der child-style.css geladen wird.

Zitat von MegaWork

Ich kenne einen Haufen guten Bücher zu all den betroffenen Themen: HTML, CSS, PHP, MySQL & Wordpress.
Zu welchem Thema genau hättest Du denn gerne etwas?
WordPress Theme Entwicklung - arbeite dieses Tutorial ab: How To Make a WordPress Theme
HTML & CSS: Dazu findest Du hier eine große Auswahl, die unterschiedliche Wissenstände bedient

Danke. Ich denke, rund um das Thema "How To Make a WordPress Theme" muss ich einfach immer weiter schauen. Ich habe die beiden Bücher aus dem Franzis-Verlag "Das WordPress Praxishandbuch" und "WordPress-Themes entwickeln". Die sind echt gut, gehen aber leider nicht so weit in die Tiefe, wie ich es brauche.

Noch einmal vielen Dank. :D

Stürmische + sonnige Grüße aus der Nordsee
KuniT

Hallo MegaWork,

vielen Dank für Deine Geduld.

Mein Hauptproblem ist, dass ich die Logik des gesamten Vorgangs noch nicht verstanden habe:
[COLOR=#008000]"Einbinden meiner child-style.css mittels eigener functions.php"[/COLOR]
+
[COLOR=#008000]"Was passiert dann im Detail mit meiner main.css"[/COLOR]
z.B.
* bei Änderung der Reihenfolge meiner Anweisungen in meiner child-style.css gegenüber denen in der main.css
* wenn ich in meiner child-style.css bei einigen Elementen Attribute weglasse, die aber in der main.css aufgeführt sind.
+
[COLOR=#008000]Deiner Antwort:[/COLOR]

Zitat von MegaWork

Um sicherzugehen, dass die CSS des Child Themes die Einstellungen der main.css überschreibt, schau Dir im Quelltext der Seite die Reihenfolge an, in der die CSS Dateien aufgerufen werden. Es werden immer die vorher geladenen Stylesheets überschrieben. Wenn also die main.css vor der style.css geladen wird gibt es kein Problem - anderenfalls musst Du mit wp_enqueue_style (siehe weiter oben) eine gesonderte Stylesheet Datei laden und zwar in Abhängikeit des main.css.

Meinst Du die functions.php? Die im parent-theme hat 217 Zeilen. In Zeile 126 steht dieser Befehl
[COLOR=#0000ff]wp_enqueue_style( 'sixteen-main-style', get_template_directory_uri()."/css/main.css", array('sixteen-fonts','sixteen-layout') );[/COLOR]
wegen der Zeilenflut habe ich sie nicht komplett hierher kopiert.

Meine functions.php im child-theme:
[COLOR=#0000ff]<?php
function call_my_class() {
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri()."/mobilchild-main.css" );
}[/COLOR]
[COLOR=#0000ff] add_action( 'wp_enqueue_scripts', 'call_my_class',999);
?>
[/COLOR]
Ich dachte, mit "999" hätte ich gesagt, dass die main.css überschrieben werden soll. Ansonsten weiß ich nicht wie ich es machen soll.

Kennst Du ein gutes Buch oder eine andere gute Dokumentation/Handbuch, was auch immer?

----------------------------------------------------

Es geht um das Layout meines primary menu. Die Site ist responsive design, trotzdem soll aber bei allen Bildschirmgrößen links in der Ecke das Menü-Symbol für Smartphones angezeigt werden. Beim draufklicken dann die Menü-Punkte.

Ich habe mittlerweile alles durch:

1.) main.css im Parent-Theme angepasst, keine functions.php + child-style.css im child-theme (1. Versuch) => Optik so, wie sie soll

2.) main.css im Parent-Theme Original, functions.php + child-style.css (= komplette angepasste main.css aus 1.)) => image vorhanden, aber zusätzlicher Platzhalter (woher auch immer, wahrscheinlich Menü). Beim draufklicken ist angezeigtes Menü verschoben, der Platzhalter größer und verschoben.

3.) main.css im Parent-Theme Original, functions.php + child-style.css (nur noch styles, die von Original abweichen) => image vorhanden, aber zusätzlicher Platzhalter (woher auch immer, wahrscheinlich Menü). Beim draufklicken ist angezeigtes Menü verschoben, der Platzhalter größer und verschoben. Responsive funtioniert nicht mehr.

Ich habe bei 1.) die Reihenfolge der Element-Definitionen geändert, gegenüber der Original-main.css. Wie wird das bei 2.) berücksichtigt? Wird es überhaupt berücksichtigt?
Und damit sind wir wieder bei meinem Hauptproblem: Ich habe die Logik des gesamten Vorgangs noch nicht verstanden. :confused:

Herzliche Grüße aus dem verregneten Norden

Hallo MegaWork,

ich dachte, ich hätte es verstanden....

Ich habe heute Morgen eine Site neu installiert, um mir Schritt für Schritt alles aufzuschreiben und dann die Updates zu überprüfen (Layout und Funktion). Da ich diese Site schon fertig hatte (Layout) dachte ich, dass es ja kein Problem wäre, sie jetzt noch einmal in einer Testumgebung sauber aufzubauen, um sie dann "ganz schnell" auf die echte Domain zu übertragen.

Nun sitze ich seit Stunden und komme nicht weiter:
Installation wie bereits oben beschrieben. Aber Layout haut an einer Stelle nicht mehr hin. Es hängt irgendwie mit dem style
[COLOR=#0000cd] .menu-toggle:before {
content: url('../images/menu.png');
}[/COLOR]
zusammen.

Wenn ich wie früher meine veränderte main.css im Parent-Theme speicher, ist das Layout ok.
Wenn ich aber das Parent-Theme im Original lasse und stattdessen die o.g. functions.php + child-style.css installiere, wird statt des images ein Platzhalter angezeigt. So weit, so gut. Ich habe also in der child-style.css den style geändert:
[COLOR=#0000cd].menu-toggle:before {
content: url([/COLOR][COLOR=#0000cd]http://www.domain.de/Unterordner/wp-content/themes/sixteen/images/menu.png[/COLOR][COLOR=#0000cd]);
}
[/COLOR]
Nun wird das image richtig angezeigt, auch richtig positioniert - aber zusätzlich ist weiterhin der umrahmte Platzhalter zu sehen. Wenn ich nun meine veränderte main.css wieder zusätzlich im Parent-Theme speicher, ist das Layout ok.

Da Du geschrieben hast

Zitat von MegaWork

Wenn Du nur einige der Anweisungen anpassen musst, dann schreibst Du NUR diese in Deine child-style.css damit die entsprechenden Anweisungen aus der main.css überschrieben werden.

habe ich nur die beiden ergänzenden Zeilen in meine child-style.css (ansonsten komplette veränderte alte main.css) geschrieben und sonst alles in der main.css gelassen:

main.css:
[COLOR=#0000cd].menu-toggle:before {
content: url('../images/menu.png');
height: 0px;
width: 0px;
margin-right: 20px;
position: relative;
top: 10px;
} [/COLOR]

child-style.css:
[COLOR=#0000cd].menu-toggle:before {
[COLOR=#0000cd]content: url([/COLOR][COLOR=#0000cd]http://www.domain.de/Unterordner/wp-content/themes/sixteen/images/menu.png[/COLOR][COLOR=#0000cd]);
[/COLOR][/COLOR][COLOR=#0000cd] color: #ffffff;
}
[/COLOR]
Wie funktioniert das Überschreiben?
Was ist, wenn in der main.css der style
[COLOR=#0000cd]#nav-wrapper {
width: 1100px;
margin: auto;
text-align: center;
margin-top: 100px;
}[/COLOR]
und in der child-style.css so definiert ist?
[COLOR=#0000cd]#nav-wrapper {
width: 100%;
height: 100px; /* von mir eingefügt */
text-align: center;
margin: 0px auto 0px auto;
position: fixed;
background-color: #000000;
border-top: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
}
[/COLOR]
Was passiert in diesem Fall mit "margin-top" aus der main.css?
Oder erkennt das Programm "#nav-wrapper" in der child-style.css und bügelt damit alles - was in "#nav-wrapper" der main.css geschrieben steht - über?

Mittlerweile qualmt mir total der Kopf. Ich werde nun meine child-style.css so weit abspecken, dass nur noch die veränderten styles erhalten bleiben...

Oder liegt es an ganz was anderen?

Verregnete Grüße aus dem hohen Norden in den tiefsten Süden
KuniT

Hallo pixselig, hallo MegaWork,

danke für Eure schnellen Antworten. Bei mir hat es nun leider etwas gedauert.

pixselig, Dein Vorschlag hat leider nicht gegriffen, weil die style-Vorgaben aus der main.css alles überschrieben haben.

MegaWork, ich bin noch zu unerfahren mit php-Programmierung und den ganzen Hintergrundabläufen bei WordPress. Ich hatte angefangen, Deinen Vorschlag umzusetzen, bin aber gescheitert. Habe dann versucht, mir die ganze Logik anzulesen.

Nun habe ich folgendes auf https://wordpress.org/support/topic/…-theme-stylecss gefunden:
-------------------------------------------------
Hi,
Create functions.php in your child theme. Inside that add these code

[COLOR=#0000cd]<?php
function call_my_class() {
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri
()."/child-style.css" );
}
add_action( 'wp_enqueue_scripts', 'call_my_class',999);
?>
[/COLOR]
Then, create a file named "child-style.css" in your child theme. So, in future any style created inside child-style.css will help you override main.css styles from the child theme.
---------------------------------------

Ich habe beide Dateien angelegt und in die "child-style.css" die komplette angepasste "main.css" des parent-theme kopiert. Es funktioniert.

Zusammenfassung meiner jetzigen Installation:
* parent-theme "sixteen" in Original
* child mit obiger functions.php, child-style.css, style.css und einigen angepassten anderen php-Dateien.

Allerdings habe ich noch nicht getestet, was bei einem update passiert.

Außerdem ist mir überhaupt nicht klar, was nun im Detail passiert.
Wird in Zukunft die theme-main.css aufgerufen und nur die veränderten styles aus child-style.css überschrieben?
Oder wird die komplette theme-main.css aufgerufen und dann mit der kompletten child-style.css überschrieben?
Oder gibt es noch eine ganz andere Möglichkeit?

MegaWork, habe ich Dich richtig verstanden, Du schlägst zwei Varianten vor:
1.
das mit dem de-registrieren der main.css ist für den Fall, dass unbedingt die eigne main.css verwendet werden soll. es macht nämlich keinen Sinn erst einmal eine CSS Datei vollständig zu laden, sie dann noch einmal zu laden und die erste zu überschreiben.

Ist das das, was ich jetzt mache, nur, dass ich die main.css nicht de-registriere? Und damit schlechte Performance?

2.
Ausserdem habe ich ja auch geschrieben, dass ich nur die geänderten Regeln in eine eigene CSS Datei legen würde.

Wäre das der Fall, wenn ich nur die geänderten main.css-Regeln in meiner child-style.css speichern würde? Und das de-registrieren ebenfalls wegließe? Oder auch in diesem Fall de-registrieren der main.css? Fände ich aber unlogisch.

Uff... :confused:

LG
KuniT

Moin Moin,

ich erstelle eine Multi-Site mit WP 3.9.2 und "sixteen" (responsive design und von mir mittlerweile auf onepage-design modifiziert). Ich habe alle notwendigen css-Anpassungen sowohl in der main.css als auch in der style.css vorgenommen, weil ich mir keine Gedanken darüber gemacht hatte, was passiert, wenn ein Update kommt.

Nach einem erfolgten Update war alles weg. Habe es aber mit Hilfe der alten main.css und style.css wieder "repariert".

Nun habe ich ein child-theme konfiguriert und die notwendigen css-Anpassungen sowohl in der main.css (sixteen) als auch in der style.css (child) vorgenommen. Hilft mir bei einem Update wahrscheinlich auch nicht weiter, weil ich weiterhin mit der main.css des Hauptthemes arbeite....

Wie kann ich das in Zukunft verhindern?
Im Forum habe ich gefunden:
Beispiel:
. Site-Header { Color: # FFOODD ! important ; } Das bewirkt das die Zeile nicht bei Aktualisierung überschrieben wird.

Aber das reicht mir nicht. Ich möchte eine saubere Trennung.

Ich habe probiert, die styles der main.css in der style.css (child) neu zu definieren. Aber es funktioniert nicht. Es zeigt weiterhin die Formatierung der main.css (sixteen).

Hat eine der css-Dateien Priorität? Muss ich alle Formatierungen in der style.css (child) zusammenfassen? Wenn ja, füge ich erst die main.css-Formatierungen ein und unten drunter die auch vorhandenen style.css-Formatierungen des Hauptthemes? oder umgekehrt?

Oder kann ich die main.css auch in das child übernehmen, im kompletten Ordner "css"?

In meinen Büchern und im Internet habe ich immer nur gefunden, dass man im child eine style.css hat und die jeweiligen .php-Dateien, die man angepasst hat.

Mein Wunsch wäre: Haupttheme "sixteen" bleibt komplett im Original erhalten. Alle notwendigen Änderungen der Styles und .php-Dateien erfolgen im child-theme.

Kann mir jemand helfen?

Sonnige Grüße aus der Nordsee

Moin Moin,

ich erstelle eine Site mit WP 3.9.2 und "sixteen" (responsive design und von mir mittlerweile auf onepage-design modifiziert).
Als Plugin verwende ich "Nav Menu Images" =>Mein horizontales Hauptmenü besteht aus Icons.

Nun möchte ich, dass auf Tablet und Smartphone statt der Icons im Menü nur die Namen aufgelistet werden.

Ich habe schon stundenlang im Internet nach einer Lösung gesucht.
Leider kenne ich mich mit WordPress noch zu wenig aus. Ich habe zwar schon meine Theme-Dateien durchforstet, aber noch nicht gesehen, wo ich was ändern könnte/müsste.

Kann mir jemand helfen?

Stürmische Grüße aus dem Hohen Norden

Zitat von deria

Probier mal zusätzlich
-webkit-backface-visibility:hidden;

Danke für den Tip.
Ich habe es ausprobiert. Das Menü bleibt zwar auch nicht stehen, "springt" aber nach kurzer Zeit wieder ins Blickfeld.

Habe leider im Moment dringendere Baustellen. Um js und/oder jquery mobile kümmere ich mich "später".

Moin Moin,

ich erstelle eine Site mit WP 3.9.1 und "sixteen" (responsive design und von mir mittlerweile auf onepage-design modifiziert).

Ich möchte für die Darstellung auf Tablet und Smartphone ein feststehendes Menü erstellen, das oben waagerecht auf der Seite steht.

Bei IE, Firefox, Opera und Android 4.1.2 steht es fest => funktioniert.
Bei Android 2.3.6 läuft es leider beim Scrollen zusammen mit dem Inhalt aus dem Bild => position="fixed" funktioniert nicht.

Was tun? Kennt einer die Lösung?

Stürmische Grüße aus dem Hohen Norden