Mobiler Header

  • Seite 1 von 2
30.07.2020 11:30
#1 Mobiler Header
avatar
User

Hallöchen,

gibt es eigentlich die Möglichkeit den Header (also das Startbild oben) getrennt von der Desktop-Variante zu gestalten?

Auf der mobilen Ansicht wirkt es sehr klein, zumindest meine Variante. Wäre cool wenn man für die mobile Ansicht ein anderes einbinden könnte.


 Antworten

 Beitrag melden
30.07.2020 13:59
avatar  Ingmar
#2 RE: Mobiler Header
avatar
Technik

Unter Farben und Einstellungen gibt es den Reiter "Desktop-Header". Dort kannst du einen zweiten Header für die Desktop-Ansicht gestalten und festlegen, ab welcher Bildschirmbreite dieser verwendet werden soll.

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH


 Antworten

 Beitrag melden
17.10.2020 18:05
avatar  River
#3 RE: Mobiler Header
avatar
User

@Mike48 oder @Wolfgang oder wer immer das weiß:

Habt ihr mir für die mobile Ansicht auf v4 'nen Codeschnipsel für das Zentrieren des Headers?

Ich versteh überhaupt nicht, warum der nicht zentriert angezeigt wird - die Grafik selber sollte zentriert sein (hab's nicht nachgemessen - mein Maßband liegt neben meiner Nähmaschine^^). Übrigens Computer-Nähmaschine. XD

Also - ich möchte NICHT den Logo Wizard verwenden, zumal der in einem anderen Forum https://www.perlenkreativforum.de/ nicht automatisch als Header auf mobil angezeigt wird - aber das knoble ich ein anderes Mal aus.^^

Also, ich hab mir vorgestellt, dass es vllt auch für die mobile Ansicht eine Kopf/Fußzeile gibt, wo ich einfach meinen HTML aus der Kopf/Fußzeile von der Desktopansicht reinpasten könnte. Ganz klar brauch' ich da sicher ne Menge Attribute (gibt ja Eigenes HTML/JS für mobil), die ich aber extra zusammen kramen müsste, und du/ihr wisst sowas auswendig.

Danke im Voraus für deine/eure Hilfe.

Viele Grüße
River

Forum: https://www.jacobsactorslounge.de/

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
17.10.2020 19:41
avatar  River
#4 RE: Mobiler Header
avatar
User

Zitat von River im Beitrag #3
Codeschnipsel für das Zentrieren des Headers


Falls keiner einen Zusatz zur Ausrichtung hat, muss ich den Banner auf mobil zuschneiden.
Wenn ich den Original-Banner in die Kopfzeile von 'mobil' nehme, ist er zu klein/schmal. Das ist also keine Option.

Zitat von River im Beitrag #3
aber das knoble ich ein anderes Mal aus.^^


Hab ich ausgeknobelt - muss das noch richten (ebenfalls Banner neu zuschneiden). Braucht ihr nicht kucken. XD

Viele Grüße
River

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
17.10.2020 19:47
avatar  Mike48
#5 RE: Mobiler Header
avatar
User

Ich habe in einigen Foren einen Banner zentriert. Muss ich mal nachsehen wie ich das gemacht habe.
Wird aber erst Montag sein.


 Antworten

 Beitrag melden
17.10.2020 20:01
avatar  River
#6 RE: Mobiler Header
avatar
User

Hey Mike,

Das hat keine Eile. Danke schon mal - würde mir einiges an Arbeit ersparen.

Viele Grüße
River

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
18.10.2020 15:56
avatar  Mike48
#7 RE: Mobiler Header
avatar
User

So zum Beispiel einfach in der Kopfzeile

Admin → Layout → Kopf- & Fußzeile → Kopfzeile

1
2
3
 
<br>
<center><a title="Klick mich zur Startseite" href="./"><img style="width:300px;" src="https://files.homepagemodules.de/b34567/pictures_u97_asdfgh.jpg" /></a></center>
<br>
 


 Antworten

 Beitrag melden
18.10.2020 16:08 (zuletzt bearbeitet: 18.10.2020 16:10)
avatar  Mike48
#8 RE: Mobiler Header
avatar
User

Sorry River,

habe nicht richtig gelesen, du willst ja die mobile Ansicht.
Mein Code oben ist für Desktop.

In der mobile Ansicht habe ich das Headerbild so dass es sich der Breite anpasst mit Klick auf Bild zur Startseite.

Admin → Layout → Mobil → Eigenes HTML/JS → Eigene Kopfzeile

1
 
<a href="./"><img src="//files.homepagemodules.de/b85255/pictures_u23_ntsyclxc.jpg" style="max-width:100%;"/></a>
 



Admin → Layout → Mobil → CSS/SCCS → CSS / SCSS Addon

1
2
3
4
5
 
/* begin - mobile Kopfzeile - linken und rechten Rand anpassen */
#custom_header {
padding-right: 2em;
padding-left: 2em;
}
 


 Antworten

 Beitrag melden
18.10.2020 19:41
avatar  River
#9 RE: Mobiler Header
avatar
User

Hey Mike,

Funktioniert super. Aber mein Banner ist echt nicht dazu geeignet (zu lang/zu schmal). Hätte mir denken sollen, dass man nicht jedes x-beliebige Format auf ein Telefon-Display pressen kann.^^
Der Versuch war es aber wert.

Hab nun den Banner als Mobilversion neu kreiert und eingefügt.

Danke dir für deine Zeit.

Viele Grüße
River

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
18.10.2020 20:36 (zuletzt bearbeitet: 18.10.2020 20:36)
avatar  River
#10 RE: Mobiler Header
avatar
User

Hey Mike,

Nun habe ich den Logo Wizard gelöscht, neuen Header für Desktop in der Kopfzeile installiert und in der mobilen Ansicht einen neuen, angepassten Header hochgeladen.

Es wird aber irgendwie von einem Schleier oder HIntergrund verdeckt - siehe Screenshot.

Der Banner sieht im Endeffekt gleich aus wie auf Desktop. Weißt du, welche Einstellung/Grafik den Header überlagert?
Ich finde die Grafik nicht.

Danke und viele Grüße
River

https://www.perlenkreativforum.de/ - Business v4

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
19.10.2020 11:06
avatar  Mike48
#11 RE: Mobiler Header
avatar
User

Wie hast du das Bild eingefügt?
Ich habe es bei mir so eingefügt wie ich in Beitrag #8 geschrieben habe.
Das sieht bei mir so aus


 Antworten

 Beitrag melden
19.10.2020 11:19
avatar  Ingmar
#12 RE: Mobiler Header
avatar
Technik

Zitat von River im Beitrag #10
Es wird aber irgendwie von einem Schleier oder HIntergrund verdeckt - siehe Screenshot.



Bin mir grade nicht sicher, ob es dazu schon eine Einstellung gibt.

Per CSS kannst du das auf jeden Fall ausblenden:
.xpagehead .headeroverlay{
display:none;
}

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH


 Antworten

 Beitrag melden
19.10.2020 11:23 (zuletzt bearbeitet: 19.10.2020 11:24)
avatar  River
#13 RE: Mobiler Header
avatar
User

Hey Mike,

Das ist ja das Seltsame.

In der JAL (https://www.jacobsactorslounge.de/) hab ich unter DesktopHeader einen neuen Banner für Mobil (stark verkürzt) eingefügt - mit xxs als Breakpoint. Nun wird auf Desktop der Header angezeigt, den ich im globalen Menü in der Kopfzeile habe und auf mobil wird der kleine Banner angezeigt. So wollte ich das auch haben, passt auch, wenngleich die Beschreibung im Admin-Menü unter Desktopheader besagt, dass alle Einstellungen für den Desktop-Header gelten. Das ist höchst verwirrend, aber das ist das mobile Menü sowieso - dazu schreib ich noch woanders...

Im Perlenforum (https://www.perlenkreativforum.de/) hatte ich den Logo Wizard mit HTML (das hab ich wegen Bea so gemacht - wegen zukünftiger Änderungen oder so). Den hab ich nun gelöscht und wie in der JAL in der Kopfzeile des Hauptmenüs einen neuen Banner eingefügt. Im mobilen Menü habe ich ebenfalls einen kleinen Banner unter Desktop-Header mit denselben Einstellungen wie in der JAL reingesetzt. Und voilà: Da ist ein dunkelvioletter Untergrund drunter.

Für Links und Schaltflächen (Theme-Farbe 1 (Hauptfarbe: für Links, Schaltflächen))) - ist dort die Farbe #54092b drin und ich vermute, dass die Kopfzeile als 'Link' (zurück zur Startseite) angelegt, obwohl sie nicht klickbar ist (auf Smartphone). Dies womöglich, weil dort das Portal aktiv geschaltet ist (für alle) aber nur als Startseite für Gäste eingestellt ist.
In der JAL ist das Portal vorhanden, aber nur für Admins sichtbar und nicht als Startseite geschaltet.

Das ist der Unterschied - ich vergleiche die beiden Foren in diesem Fall, weil ich bei Anlage des mobilen Headers natürlich alles gleich mache - das ist effizienter. XD

Also - die etwas frevelhafte Aussage meinerseits ist, dass ein DAU (dümmster anzunehmender User) wie ich - mit dieser Software nicht gut klarkommen kann. (Autsch) Dabei möchte ich das gerne können. ^^

Ansonsten ist das natürlich die beste Software der Welt, keine Frage.

Ich kuck' mal, Mike, ich werde das Problem schon lösen und sonst sitze ich es aus und warte auf Selbstheilung (nächstes Update oder Heinzelmännchen). ;)

Außer, du weißt, was da verkehrt ist... Danke schon mal - ist wieder ein langer Text.

Viele Grüße
River

Edit: Upps - Zwischenpost nicht gesehen. ^^

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
19.10.2020 11:38
avatar  River
#14 RE: Mobiler Header
avatar
User

Zitat von Ingmar im Beitrag #12
Bin mir grade nicht sicher, ob es dazu schon eine Einstellung gibt.


Hab ich keine gefunden, und ich habe ewig dran rumgedoktert.

Das Code-Schnipsel hat funktioniert. Vielen Dank. Bin jetzt wieder froh.

Übrigens, wenn ich mit der Maus ins CSS-Feld klicke (mobiles Menü), ist kein Cursor sichtbar (Win 10 / Chrome).
Das ist z.B. in der Kopfzeile (global) nicht so - da sieht man den Cursor.
(https://www.perlenkreativforum.de/).

Das habe ich auch im anderen Forum schon festgestellt.

Viele Grüße
River

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

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
19.10.2020 12:19
avatar  Mike48
#15 RE: Mobiler Header
avatar
User

Das Problem ist ja gelöst. Weißt du auch wie?


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!