Design Rome - Header verkleinern

Antworten
#1
09.08.2017 08:20
avatar  Vita
#1
Vi
Vita

Hallo,

ich hoffe ihr könnt mir helfen. Ich verwende eine Adaption des Rome Designs und würde gerne die Höhe des Headers verkleinern. Soviel ich verstanden habe ist eine relative Höhe in % hinterlegt.

Wie kann ich das machen, sodass auch die Breadcrumb Navigation mit raufrutscht.
Vielen Dank im Voraus!


 Antworten

 Beitrag melden
#2
17.08.2017 19:50
avatar  Vita
#2
Vi
Vita

Kann mir wirklich niemand weiterhelfen? Danke!


 Antworten

 Beitrag melden
#3
18.08.2017 00:07 (zuletzt bearbeitet: 18.08.2017 00:09)
avatar  FKWars
#3
avatar
FKWars

Hallo Vita,

das hier müsste dir helfen,

1
2
3
4
5
6
7
8
 
<style type="text/css">
/*<![CDATA[*/ 
.jtpl-header--image {
    height: 480px;
 
}
   /*]]>*/ 
</style>
 



an der Zahl kannst drehen wie es Dir am besten passt.

Gruß FKWars

www.crazy-terra.com

 Antworten

 Beitrag melden
#4
18.08.2017 10:41
avatar  Vita
#4
Vi
Vita

Vielen Dank!! Es funktioniert tatsächlich für die Web Variante.

Komischerweise ist bei der Mobile Variante der Header größer als vorher. Ich kenne mich nicht so gut aus aber ich denke das grunsätzlich die Größe in Prozent zum Seitenverhältinis ist und mit dem Befehl wird es absolut und somit auch Mobile größer. Kann das sein?

Kann man das für mobile auch ändern?

DAnke!


 Antworten

 Beitrag melden
#5
19.08.2017 18:15
avatar  az_
#5
avatar
az_

...ja! google mal nach "@media"

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#6
20.08.2017 14:42 (zuletzt bearbeitet: 24.08.2017 16:51)
avatar  Vita
#6
Vi
Vita

Danke für den Tipp.
Da ich leider kein Experte bin bekomme ich den richtigen Code einfach nicht hin.

Wäre das irgendwas in folgende Richtung:

1
2
3
4
5
6
7
8
9
 
<style type="text/css">
/*<![CDATA[*/ 
@media only screen and (max-width: 100px)
.jtpl-header--image {
    height: 30%;
 
}
   /*]]>*/ 
</style>
 



Funktioniert aber so nicht.

Danke!


 Antworten

 Beitrag melden
#7
24.08.2017 16:59 (zuletzt bearbeitet: 24.08.2017 17:00)
avatar  az_
#7
avatar
az_

...versuch mal:

1
2
3
4
5
6
7
8
9
10
11
12
 

<style type="text/css">
/*<![CDATA[*/ 
 
@media (max-width: 767px) {
    .jtpl-header--image.jqbga-container.jqbga-web--image {
        height: 30vh !important;
    } 
}
 
   /*]]>*/ 
</style>
 



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#8
27.08.2017 17:36
avatar  Vita
#8
Vi
Vita

Danke! Aber funktioniert leider nicht.


 Antworten

 Beitrag melden
#9
27.08.2017 18:44 (zuletzt bearbeitet: 28.08.2017 09:44)
avatar  Vita
#9
Vi
Vita

Hab es jetzt herausgefunden (sollte es nochmal jemand benötigen):

1
2
3
4
5
6
7
8
9
 
<style type="text/css">
/*<![CDATA[*/ 
@media screen and (min-width: 768px) {
.jtpl-header--image {
    height:300px;
 
}
   /*]]>*/ 
</style>
 


 Antworten

 Beitrag melden
#10
28.08.2017 09:48 (zuletzt bearbeitet: 28.08.2017 09:55)
avatar  az_
#10
avatar
az_

Dein Code ist aber nicht für die mobile Variante:

1
2
3
 
@media (max-width: 767px) {...} /*mobile view only*/
 
@media (min-width: 768px) {...} /*desktop view only*/
 



LG, az


PS: ...wichtig ist auch noch die Reihenfolge! Was zuletzt im Script steht, überlagert das vorherige!

Du kannst also schreiben:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 

<style type="text/css">
/*<![CDATA[*/ 
 
/*normal view*/
.jtpl-header--image {
    height: 480px; 
}
 
/*mobile view*/
@media screen (max-width: 767px) {
.jtpl-header--image {
    height:300px; /*fallback old browsers*/
    height:30vh;  /*modern browsers*/
}
   /*]]>*/ 
</style>
 


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#11
30.08.2017 12:10
avatar  Vita
#11
Vi
Vita

Danke! Aber für mobile funktioniert der Code trotzdem nicht.

Mobile ist der Header zum Glück nicht so störend wie Web. Mir ist also schon mal geholfen.


 Antworten

 Beitrag melden
#12
01.09.2017 11:25
avatar  az_
#12
avatar
az_

...wenn Du uns mal die URL (=Webadresse) der Seite gibst, können wir bestimmt helfen!

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#13
11.11.2017 11:54
avatar  Mirjam
#13
Mi
Mirjam

Lieber az,

ich stehe nun vor demselben Problem...
www.mirjam-bluemel.de

Hast Du eine Idee, wie ich den Header in der mobilen Ansicht kleiner kriege?
Danke im Voraus,

Mirjam


 Antworten

 Beitrag melden
#14
11.11.2017 16:17
avatar  az_
#14
avatar
az_

...dafür wäre die @media Abfrage richtig:

1
2
3
4
5
6
7
8
9
10
11
12
 
<style type="text/css">
/*<![CDATA[*/ 
 
/*mobile view*/
@media (max-width:767px) {
  .jtpl-header--image {
      height: 200px; 
  }
}
 
   /*]]>*/ 
</style>
 


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#15
14.11.2017 12:24
avatar  Mirjam
#15
Mi
Mirjam

Lieber az,

danke für Deine Antwort. Leider verändert sich dadurch nicht. Ich nehme an, dass ich die Pixelzahl nach 'height' verändern muss. Das habe ich gemacht, hat aber keine Änderung gebracht.

Hast Du noch eine Idee woran es liegen könnte?


 Antworten

 Beitrag melden
#16
18.11.2017 13:56 (zuletzt bearbeitet: 18.11.2017 13:57)
avatar  az_
#16
avatar
az_

Zitat
...Hast Du eine Idee, wie ich den Header in der mobilen Ansicht kleiner kriege?





links ohne CSS, rechts mit...

...wzbw!


LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#17
27.11.2017 16:06
avatar  Mirjam
#17
Mi
Mirjam

Lieber az,

bei anderen sieht es immer so leicht aus... So wie Eiskunstlaufen ;-)

Ich habe das so gemacht, wie Du gesagt hast:
Also den Code kopiert, bei 'Head bearbeiten' eingefügt, gespeichert. Dadurch konnte ich keine Änderung sehen. Auch nicht nach dem Verändern der Pixelanzahl.

Was mache ich denn anders als Du? (Außer nicht zu wissen, was ich tue...)

Viele Grüße,
Mirjam


 Antworten

 Beitrag melden
#18
30.11.2017 07:17
avatar  Sandro0802
#18
Sa
Sandro0802

Hallo, das würde ich auch gerne wissen. Habe das gleiche Problem wie Mirjam und habe den code auch einfach kopiert und eingefügt, auch bei mir tut sich nichts. https://www.mavmuenchen.de/


 Antworten

 Beitrag melden
#19
30.11.2017 08:57
avatar  make
#19
ma
make

Hallo,
du solltest hinter dem @media den Zusatz "screen" rausnehmen und am Ende fehlt noch eine zweite geschlossene geschweifte Klammer.

Schau dir den Code von az_ im Beitrag #14 an. Da ist es für den "mobile view" korrigiert.

Gruß
make

www.vertraute-erde.de

 Antworten

 Beitrag melden
#20
01.12.2017 13:13
avatar  Sandro0802
#20
Sa
Sandro0802

Ja, jetzt hat´s funktioniert. Vielen Dank!


 Antworten

 Beitrag melden
#21
21.12.2017 15:53 (zuletzt bearbeitet: 25.12.2017 11:01)
avatar  wanja
#21
wa
wanja

Hallo,
ich habe bereits wie verrückt im Forum nach einer passenden Lösung gesucht und auch verschiedene Möglichkeiten gefunden, aber bislang habe ich noch nicht die wirklich passende Lösung gefunden - vielleicht könnt ihr mir helfen?

Ich verwende das Design Rome und habe im Header ein Gruppenbild. Es ist wichtig, dass in den verschiedenen Browsergrößen und im mobile view die Leute links und rechts nicht abgeschnitten werden bzw. dass auch nicht oben und unten abgeschnitten wird. Ist das überhaupt mit dem Header in Rome möglich?

Die URL ist: https://koko-test.jimdo.com/

Ich habe hier im Head Einstellungen vorgenommen, aber wirklich gut funktioniert das noch nicht.
Könnt ihr mir helfen?

Vielen Dank!


 Antworten

 Beitrag melden
#22
30.01.2018 07:55 (zuletzt bearbeitet: 08.03.2018 09:31)
avatar  Eisbärin
#22
Ei
Eisbärin

Hallo,
bin ganz neu hier und hab schon allerlei probiert nach Eueren guten Anleitungen.
Mein Problem: Für den Header in Rome hab ich eine Grafik.
Ohne Änderungen wird der obere Bereich nicht ganz dargestellt.
Vergrößere ich den Bereich aber ausreichend nach oben, schneidet es mir die Breite ab.
Gibt es eine Standardgröße für die Ursprungsdatei in Pixeln, die dann einfach passt??

Meine Seite ist noch nicht online, welche Daten braucht Ihr, um da reinzugucken?

Danke im Voraus..


 Antworten

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