Hallo, ich bin ganz neu hier. Aktuell baue ich noch am "Dummy" für meine Webseite, dieser hat die URL
https://f3ev.jimdofree.com/
Ich möchte gerne einzelne Textblöcke in fullwidth Farbstreifen einbetten, der Textblock soll mit der gleichen Farbe wie der Fullwidth Streifen unterlegt sein.
Ich habe das versucht mit Hilfe des Fullwidth-Backgrounds.pdf (DANKE!!) umzusetzen, mache aber irgendwas komplett falsch.

Ich hab es so verstanden, dass ich
1) meine Farbe definiere und benenne
2) vor das entsprechende Element ein HTML-Widget setze
3) zusätzlich im Header das CSS entsprechend einsetze

Ich habe das auf der Startseite versucht mit dem zweiten Textblock unter der Überschrift "Menschen sind bunt und vielfältig....." .

Dieser Textblock soll mit dunkelorange (rgb(223, 79, 1), hex #DF4F01 unterlegt und fullwidth sein.
Diese Farbe habe ich myorange genannt.

Folgendes Widget habe ich vor den Textblock gesetzt:

<p class="hide">
formatiere nachfolgendes Element: fullwidth myorange font-white
</p>

<div class="fullwidth myorange font-white">
</div>

Im Header habe ich

<style type="text/css">
/*<![CDATA[*/
.myorange {
background-color: rgb(223, 79, 1);
}
/*]]>*/
</style>

eingetragen.

Es passiert aber gar nichts, außer dass das widget als Text sichtbar ist, was ja eigentlich versteckt arbeiten soll.

Ich habe also irgendwas noch nicht richtig verstanden.
Geht es im Prinzip so und muss ich die Syntax korrigieren (wenn ja wie?)
Oder habe ich das falsch verstanden, dass sich auf diesem Weg fullwidth Textblöcke anlegen lassen?

Vielen Dank im Voraus für Eure Hilfe! Ich finde es ganz großartig, dass es dieses Forum gibt. Habe hier schon viel gelernt, diesmal aber keine schon vorhandene Antwort zu meinem Thema gefunden.

Alice

Hallo, vielen Dank für die schnelle Antwort. Das mit den Skripten war genau das, was ich offenbar nicht verstanden habe. WO lade ich das richtige Skript herunter? Baue ich das Script genauso wie das CSS im Head ein? Und ist das auch ein kostenfreies Angebot mit den Skripten, oder ist das ein Produkt, was Ihr verkauft? Vielen Dank und sorry für die etwas dummen Fragen... Alice

Hallo AZ,
zunächst mal vielen Dank für Deine Geduld mit mir Greenhorn ;-) Ich sitze immer noch auf der Leitung. Ich habe mit die fullwidth Testseite (fullwidth - test . jimdofree . com/) angesehen. Da finde ich kein HowTo, keine Datei zum herunterladen, kein Script zum copy & paste.

Ich verstehe deshalb nicht, welche Dateien Du meinst und wie ich sie herunterladen kann. WO finde ich diese Dateien bzw. WO sehe ich die Scripte von Dir, wenn ich sie per copy paste einbinden will?
Und: WOHIN kopiere ich die dann, wenn ich copy&paste nutzen will? in den allgemeinen Header?

Ich wollte mir auch die Stockholm stockholm test jimdo com Testseite ansehen, weil ich meine, da ein HowTo gesehen zu haben, aber da bekomme ich aktuell eine Fehlermeldung, dass die Seite nicht erreichbar ist.

Also leider hakt's bei mir immer noch, sorry!

Vielen Dank , ein schönes Wochenende und liebe Grüße von
Alice

Vielen Dank, diese Seite konnte ich gestern nicht aufrufen. Das klappt mit der Fullwidth-Breite der orangenen Box - allerdings ist jetzt meine eingestellte Seitebreite-Änderung

<style>
/* <![CDATA[ */
@media (min-width:768px) {
.jtpl-section-main__inner {
max-width: 1600px;
}
}
/*]]>*/
</style>

in der Box wohl zerdroschen. Die Box und der Text drin werden mir im Bearbeitungsmodus zwar in "meiner" Breite angezeigt, aber in der Außenansicht der Website (z.B. in der Vorschau) ist der Text wieder viel schmaler in der Mitte der Box (vermutlich die Ursprungsbreite vor meiner Änderung).

Ich habe auch versucht, meine Änderung der Seitenbreite statt vom Anfang des Headers mittenrein in die von Dir kopierten Header-Angaben, in die ich auch den Befehl für die orangene Box integriert hatte, zu setzen, aber auch das hat nichts geändert...

Liebe Grüße von Therese

Hallo, vielen lieben Dank für Dein Engagement in meiner Angelegenheit, ich weiß das sehr zu schätzen!
Ich habe die Text-Boxen alle in der Formatierung zurück gesetzt und die Überschriften mit rein genommen, damit die auch auf dem farbigen Hintergrund liegen. Da ich zwischen den Texten in den farbigen Fullwidth-Streifen ein bißchen mehr Abstand wollte, habe ich das im Text mit Leerzeilen gelöst, nicht sehr elegant, aber es funktioniert.

Die verschiedenen Skripte für die unterschiedlichen Grundlayouts habe ich auch alle mal durchgetestet (ich hoffe richtig, ich hab einfach im in den Header kopierten Skript den Namen des templates ausgetauscht und den Rest gelassen) - da tat sich nichts mit der Breite.

Dein Vorschlag mit der grundsätzlich anderen Breiteneinstellung, den Du mir als <> geschickt hattest, hat leider gar nicht funktioniert, da blieb dann komplett alles auf Ursprungsbreite des Templates, egal ob ich den Code vor, nach oder mitten in das fullwidth-script reingesetzt habe - und ich will ja z.B. Bilder auf größere Breite setzen, deshalb hatte ich den Head schon auf meine Art verändert. Also bin ich zurück auf meine ursprüngliche Breiteneinstellung gegangen, aktuell hab ich die auf 90% Breite gesetzt und das Problem, das der Text in den Fullwidth Elementen nicht so breit ist, wie ich ihn gern hätte. Ich hätte den gern auf ca. 1,5 x so breit wie jetzt

Aber so sieht es schon nicht schlecht aus, finde ich, damit kann ich erstmal gut leben und freue mich, dass ich das mit Deiner Anleitung so hin bekommen habe, das ist echt fantastisch mit dieser Fundgrube an Tipps und Tricks, die Du hier zugänglich machst.

Falls das mal eine bezahlte Seite werden sollte - wie funktioniert es dann eigentlich mit den Skripten? Du hast ja geschrieben, dass die dann angepasst werden müssen. Ist das etwas, was ich allein hinbekomme oder wird es dann kostenpflichtig?

Ich beherrsche CSS in keiner Weise, sondern puzzele mir das immer aus irgendwelchen Forenbeiträgen und Tipps auf Deiner Seite zusammen, schön wäre es, wenn ich das könnte - dann würde ich auch nicht so viel dumme Fragen stellen...

Liebe Grüße,
Alice

Hallo, genau so wie in Deiner Änderung mit der Einklammerung habe ich das jetzt in den Header gesetzt.

zuerst kommt noch was anderes, dann folgt:

<style type="text/css">
/*<![CDATA[*/

@media (min-width: 768px) {
.fullwidth-content {
width: calc(100% - 60px);
max-width: 900px;
margin: 0 auto;
height: auto;
padding: 0 35px;
z-index: 1;
}
}
@media (max-width: 767px) {
.fullwidth-content {
width: auto;
padding: 0 30px;
height: auto;
}
}

/*]]>*/
</style>


<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/hide.css" rel="stylesheet" />
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/position.css" rel="stylesheet" />
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__widgets/fullwidth-animations/fullwidth-stockholm.css" rel="stylesheet" />
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__widgets/fullwidth-animations/backgrounds.css" rel="stylesheet" />

<style type="text/css">
/*<![CDATA[*/
.mygelb {
background-color: rgba(252, 233, 22);
}
/*]]>*/
</style>

etc etc.


Die Breite des Textblocks mit die farbigen Fullwidth Hintergründen hat sich aber nicht geändert, nur dass es jetzt im Bearbeitungsmodus noch schlimmer (= schmaler) aussieht.
Was mich an Deinem CSS etwas wunderte (als CSS-Idiotin) war, dass max width 767px und min width 768px ist.

Ich habe schon an mehreren Stellen versucht, Werte zu ändern (min width, max width), das hat aber nichts verändert.

CSS sehe ich mir mal die Tipps auf deiner Seite an, manches hab ich schon von da gelernt, teilweise auch Prinzip verstanden und dann für mich entsprechend modifiziert.

Danke,
Alice