Umschalter Toggle_View bei neuem Theme verschwunden

[tschero]

Hallo Leute,

ich arbeite mich gerade mit diesem freien Contao Theme in das Thema responsive/mobile Design ein.

Hierbei fehlt mir ständig der Umschalter auf die Desktopversion (vergl. die Anhänge richtig.jpg und falsch).

Wenn ich Elemente im Firebug untersuche, unterscheidet sich das CSS Design auch deutlich voneinander (vergl. die Anhänge firebug_richtig.jpg und firebug_falsch).
Hier die derzeitige Testumgebung


Contao V. 3.1.1

keine Fehlermeldungen bei der installation

1. Contao inkl. MA Template installiert
2. neue Theme importiert
3. Über den Startpunkt der WebSite das default und default_mobile Layout des neuen Theme zugewiesen.

beim Import des neuen Themes wurden diese Templates im Verzeichnis Templates überschrieben:
form.html5 (1,3 KiB)
mod_quicknav.html5 (1,1 KiB)

Vorhandene Quellen
beide Büche von Peter Müller
V2B von Harry Boldt

Über eine Hilfe, wo ich ansetzen kann wäre ich dankbar.


Schon im Voraus vielen Dank.

Gruß
tschero

[tschero]

Zusatz:

Wenn im Firebug der Testumgebung der Inhalt der Klasse .toggle_desktop für den <a> Tag ausgeschaltet wird, ist alles so wie es sein sollte.

Ich finde aber die Stelle nicht, wo die Klasse zugewiesen wird.

Gruß
tschero

[Sharky]

Zusatz:

Wenn im Firebug der Testumgebung der Inhalt der Klasse .toggle_desktop für den <a> Tag ausgeschaltet wird, ist alles so wie es sein sollte.

Ich finde aber die Stelle nicht, wo die Klasse zugewiesen wird.

Hallo tschero,

bin auch nur Laie, versuche es aber trotzdem mal mit einer Antwort.

Du hast in Deiner ~mobile.css formatiert

.toggle_desktop {top:120px; width: 7 em; ...} So rutscht der "Umschalter" aus dem Headerbereich heraus in den main-Bereich und ist damit nicht mehr sicht- und erreichbar.

.toggle_desktop sollte in Deinem Fall aber sein: top: 0; und für width wäre evtl. besser z. B. 9 oder 10 em; dann flutscht's.

Ich habe in meinem Firefox-Browser das Addon "Firebug" installiert. Damit kann man sowas überprüfen und gleich provisorisch korrigieren.

Viele Grüße, Sharky

[tschero]

Hi Sharky,

vielen Dank für die schnelle Antwort.
Das habe ich schon ausgeführt und Du hast Recht; leider rutscht dann der Umschalter der "Desktop View", also der Button "Mobile version" nach oben und das soll ja auch nicht sein.

Ich kann noch so viel suchen, ich finde einfach die Stelle nicht, wo dem <a> Tag diese Klasse zugewiesen wird

Gruß
tschero

[Sharky]

Zusatz:

Wenn im Firebug der Testumgebung der Inhalt der Klasse .toggle_desktop für den <a> Tag ausgeschaltet wird, ist alles so wie es sein sollte.

Ich finde aber die Stelle nicht, wo die Klasse zugewiesen wird.

Hallo tschero,

Ich weiß nicht, in welcher CSS-Datei Du das alles stehen hast, aber ... Du hast schon gesehen, dass es vor dem Umschalten "<div class="toggle_desktop"> (das mit top: 120px; korrekt formatiert ist) und nach dem Umschalten auf mobile "<a class="toggle_desktop">" gibt, dem Du ebenfalls top: 120px; zugeordnet hast?
Ich würde in der CSS div.toggle_desktop mit top: 120px; und a.toggle_desktop separat mit top: 0; formatieren.

Du hast in der CSS außerdem eine Klasse ".toggle_mobile a" stehen. Auch der könntest Du top: 0; zuweisen und eine andere Breite oder kleinere Schrift.

Viel Erfolg!

PS: Wenn Du den Button weiter unten im main-Bereich haben willst, also nicht mehr oben direkt unter dem Logo, dann mußt Du mit z-index arbeiten.

[tschero]

und nach dem Umschalten auf mobile "<a class="toggle_desktop">" gibt, dem Du ebenfalls top: 120px; zugeordnet hast?

Genau das suche ich.

Ich arbeite mit einem neuen, nicht von mir entwickelten Theme auf Grundlage der Music Academie (siehe Anfangspost).
Ich kann die Stelle nicht finden, wo dem oben beschriebenen <a> Tag die Klasse toggle_desktop zugewiesen wird. Wenn ich diese Zuweisung verhindern könnte, sollte eigentlich alles funktionieren.

Gruß
tschero

[Sharky]

Genau das suche ich.

Ich arbeite mit einem neuen, nicht von mir entwickelten Theme auf Grundlage der Music Academie (siehe Anfangspost).
Ich kann die Stelle nicht finden, wo dem oben beschriebenen <a> Tag die Klasse toggle_desktop zugewiesen wird. Wenn ich diese Zuweisung verhindern könnte, sollte eigentlich alles funktionieren.

Warum diese Zuweisung verhindern? Ist doch alles wunderbar differenziert mit Klassen versorgt...

Nochmal:

"Du hast in der CSS außerdem eine Klasse ".toggle_mobile a" stehen. Auch der könntest Du top: 0; zuweisen und eine andere Breite oder kleinere Schrift."

Grüße, Sharky

[tschero]

...folgende Änderung am CSS habe ich vorgenommen und das funktioniert nun auch:

.toggle_mobile a.toggle_desktop

position:static ! important;

Leider habe ich die Zuweisung der Klasse immer noch nicht gefunden.....und das wurmt mich schon etwas

Trotzdem herzlichen Dank für die Hilfe.



Gruß
tschero


EDIT: oberen Post zu spät gelesen!


Nochmal EDIT: Alles klar, hab ich jetzt endlich auch mal verstanden und ausprobiert.

Nochmals vielen Dank

[tschero]

Und jetzt nur mal zum Verständnis,

welchen Grund hat es, dass dieses <a> Tag ausgerechnet die Klasse "toggle_desktop" Zugewiesen bekommt?

Kann sich/mir das jemand erklären. Bin ja am lernen .

Gruß
tschero

[Sharky]

Nochmal EDIT: Alles klar, hab ich jetzt endlich auch mal verstanden und ausprobiert.

Jawoll, genau so. Na siehste, geht doch

Und wenn Du die ".toogle_mobile a" jetzt z. B. so formatieren würdest:

.toggle_mobile a {
color: #FFFFFF;
font-size: 1.2em;
top: 0;
padding: 0 5px 0 5px;
white-space: nowrap; /* unterdrückt den Zeilenumbruch und die Breite stellt sich, abhängig von der Schriftgröße, automatisch/dynamisch ein) */
}

dann sieht's dazu auch noch ganz nett aus

[Sharky]

Und jetzt nur mal zum Verständnis,

welchen Grund hat es, dass dieses <a> Tag ausgerechnet die Klasse "toggle_desktop" Zugewiesen bekommt?

Kann sich/mir das jemand erklären. Bin ja am lernen .

Hallo tschero,

warum der Entwickler dieser Extension den Tags ausgerechnet diese Klassen zugewiesen hat, kann ich Dir nicht verraten. Vermutlich kam er darauf, weil's ja ein Umschalter ist und sich die beiden Ansichts-Versionen austauschen. Folgerichtig tauschen sich auch sowohl das div-Tag als auch das a-Tag gegeneinander aus:

Link für die mobile-Version: <div class="toggle_desktop"> und <a class="toggle_mobile">.
Link für die Desktop-Version: <div class="toggle_mobile"> und <a class="toggle_desktop">.

Da so ein mächtiges Programm mit so vielen möglichen Erweiterungen zudem ausschließen muß, dass zwei Extensions dieselben Klassenbezeichnungen verwenden, hat der Entwickler nicht allzuviele Möglichkeiten, um nicht den Klassenbezeichnungen des Programms oder anderer Erweiterungen in die Quere zu kommen.

Mit ein bisserl Übung in CSS ist das aber auch für Dich sehr gut zu handeln; wirst sehen.

Viele Grüße, Sharky

Edit: Ich kann's mir nicht verkneifen, jetzt bin ich doch noch ein wenig biestig Hmmm.... Als beruflicher Webdesigner sollten Dir aber solche Dinge glasklar sein

[tschero]

Als beruflicher Webdesigner sollten Dir aber solche Dinge glasklar sein

<biestig>lies mal meine Signatur </biestig>

Ich mach das alles nur Nebenbei und nicht Hauptberuflich.
Und man lernt ja nie aus.

Gruß
tschero