WebSite X5Help Center

 
Michael G.
Michael G.
User

Farbiger Balken mit Text oben  de

Autor: Michael G.
Visited 1460, Followers 1, Udostępniony 0  

Hallo,

ich würde gern auf meiner Website ganz oben einen Balken mit Text wegen dem Corona Virus einfügen.
Dieser Balken soll über die ganze Breite gehen. (Beispiel roter Balken mit Infotext weiß)

Ich habe es mit Werbebotschaft probiert, aber leider kann man da nur Bilder einfügen und keinen Text schreiben.

Hat jemand eine Idee?

Posted on the
26 ODPOWIEDZI - 1 POMOCNY
Andreas S.
Andreas S.
Moderator
Najlepszy Użytkownik miesiąca DE

JA, die Datenschutzleiste dafür benutzen!

Oder du erstellst ein Text-Objekt und erweiterst diese über die ganze Seite und mit CSS Code fixierst du diese.

Czytaj więcej
Posted on the from Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Michael G.
Ich habe es mit Werbebotschaft probiert, aber leider kann man da nur Bilder einfügen und keinen Text schreiben.

(It > De) ... wenn Sie interessiert sind, lassen Sie es mich wissen ...
... mit dem EXTRA-Code für meine Geschichte DIV_CUSTOM könnten Sie so etwas bekommen:

.

ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

@ KolAsim: Ja so könnte es aussehen, aber ohne abgerundete Ecken und ohne Schließen Kreuz.

Es sollte immer sichtbar sein und fixiert am oberen Rand über dem Header

@Andreas: Das Textobjekt müsste dann über den Header sein geht das?

Czytaj więcej
Posted on the from Michael G.
Andreas S.
Andreas S.
Moderator
Najlepszy Użytkownik miesiąca DE

Wenn man es fixiert ist es oben, aber überdeckt natürlich den Header!

Czytaj więcej
Posted on the from Andreas S.
Michael G.
Michael G.
User
Autor

nein überdecken sollte es nicht...hm da muss ich wohl etwas anderes machen, vielleicht doch nur ein Textobjekt mitten auf die Website

Czytaj więcej
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Michael G.
@ KolAsim: Ja so könnte es aussehen, aber ohne abgerundete Ecken und ohne Schließen Kreuz. Es sollte immer sichtbar sein und fixiert am oberen Rand über dem Header ... ... ... 

(It > De)  ... wenn Sie Ihren LINK setzen, hätte ich besser auswerten können, weil ich das Programm derzeit nicht habe ...
... aber im Prinzip, basierend auf anderen Seiten, könnte meine Erfindung im Anhang funktionieren ...
... Sie müssen nur den gesamten Code kopieren / einfügen ...
... müssen Sie den Code in diesem Abschnitt eingeben:
>> Schritt 1 - Einstellungen > Bereich Erweitert > Statistiken, SEO und Code > Funktionen im Bereich Code | Benutzerdefinierter Code: > (3°) ▼Vor dem </HEAD> Tag

... benachrichtigen Sie mich, wenn Sie eine Klärung benötigen, und setzen Sie dann auch den LINK Ihrer Seite, um überprüfen zu können ...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

Das hat funktioniert super danke.

Wie kann man die Schriftart kleiner machen? Diese ist sehr groß.

Und wo kann man die Höhe von dem Balken einstellen?

Czytaj więcej
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL

(It > De)  ... jetzt ist das Objekt mit dynamischer Kontrolle und elastischem Text ...
... die Elastizität wird als Prozentsatz der Fensterbreite angepasst ...
... text > CORONAVIRUS >> 4vw    (4 - 3.5 - 3.2 - etc....)
<span style="font-size:4vw;font-weight:bold">
... text > Lorem ipsum dolor ***** >> 3.5vw     (3.5 - 3 - 2.8 - etc....)
<span style="font-size:3.5vw">
... alternativ könnte das Objekt mit festen Maßen fixiert werden und das CSS-Steuerelement media_query verwenden ...
... aber um zu bewerten, muss ich den Link Ihres Beispiels online sehen ...

ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

Hier ist der Link

www.zeltsysteme-goebel.de/test3

Czytaj więcej
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Michael G.
Hier ist der Link www.zeltsysteme-goebel.de/test3

... ↓ ... ↓ ... ↓ ...

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Andreas S.
Andreas S.
Moderator
Najlepszy Użytkownik miesiąca DE

Ideal wäre noch eine Zeitspanne von ca. 10 Sekunden bis der Balken wieder verschwindet!

Idealmente, un periodo di circa 10 secondi sarebbe fino a quando la barra scompare!

Czytaj więcej
Posted on the from Andreas S.
Michael G.
Michael G.
User
Autor

@KolAsim:

Vielen Dank, aber jetzt gibt es folgende Probleme:

1. verdeckt der Balken leider meinen Header

2. Wie geht der Text zentriert, auch in der Höhe zentriert (gleicher Abstand oben und unten im Balken)

Czytaj więcej
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Michael G.
@KolAsim: Vielen Dank, aber jetzt gibt es folgende Probleme: 1. verdeckt der Balken leider meinen Header 2. Wie geht der Text zentriert, auch in der Höhe zentriert (gleicher Abstand oben und unten im Balken)

(It > De)  ... Ich sehe das Beispiel nicht ...
... sowieso, ... vielleicht ist es besser, den vorherigen elastischen dynamischen Code von Post #6 zu verwenden, den Sie jetzt in "test3" verwenden; ... um den Text unter 720px zu verbessern, können Sie dieses CSS hinzufügen:
<style> @media (max-width: 719px) {#messaggioK *{font-size:3vw !important;}} </style>

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Andreas S.
Ideal wäre noch eine Zeitspanne von ca. 10 Sekunden bis der Balken wieder verschwindet! Idealmente, un periodo di circa 10 secondi sarebbe fino a quando la barra scompare!

(It > De) ... zeitgesteuerte Schließung war im STEMPEL von Post #2 geplant, der mit (X) ...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

Jetzt ist der Test online...die Schriftart habe ich kleiner bekommen, aber der Balken verdeckt den Header und die Schrift sollte zentriert sein

Czytaj więcej
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Michael G.
Jetzt ist der Test online...die Schriftart habe ich kleiner bekommen, aber der Balken verdeckt den Header und die Schrift sollte zentriert sein

(It > De)  ... + id="messaggioK"  >> text-align-center;
... basierend auf dem aktuellen Text, den Sie verwenden,
Sie müssen den gesamten Code durch Folgendes ersetzen:

<style>
@media (min-width: 1250px) {
#messaggioK{height:20px !important;}
#imPageIntContainer {top:40px !important}}
@media (max-width: 1249px) {
#messaggioK{height:20px !important;}
#imPageIntContainer {top:40px !important}}
@media (max-width: 959px) {
#messaggioK{height:20px !important;}
#imPageIntContainer {top:40px !important}}
@media (max-width: 719px) {
#messaggioK{height:30px !important;}
#imPageIntContainer {top:50px !important}}
@media (max-width: 479px) {
#messaggioK{height:35px !important;}
#imPageIntContainer {top:55px !important}}
</style>
<script>
$( document ).ready(function() {
// div_custom dinamico by KolAsim
divK = '<div id="messaggioK" style="position:fixed;width:100%; height:50px;left: 0px;top:0px;z-index:100000;color:white; font-family: Arial;background-color:brown;font-size:13px;padding:10px;text-align:center;"> Hinweis Corona:Die Produkte können weiterhin mit der regulären Produktionszeit geliefert werden. </div>';
$( "#imPageIntContainer" ).before( divK );
});
</script>

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

@KolAsim

Ich habe jetzt diesen Code in einem anderen Projekt eingefügt, doch hier verdeckt der rote Balken (beim ändern der Höhe) den Header und beim scrollen erscheint keine Sticky Bar

www.zeltsysteme-goebel.de/test

Czytaj więcej
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL

#messaggioK{z-index:10000 !important;}
@media (min-width: 1250px) {
#messaggioK{height:30px !important;}
#imPageIntContainer {top:50px !important}}
***
**
*

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

wo muss dieser Code hin?

Und geht es, wenn die Stickybar auf geht das darüber der rote Balken sichtbar bleibt?

Czytaj więcej
Posted on the from Michael G.
Andreas S.
Andreas S.
Moderator
Najlepszy Użytkownik miesiąca DE

Ich frage mich wieso alles so kompliziert sein muss.  ICh habe ein Text-OBjetk genommen und mit ein paar Codezeilen oben fixiert und einfach einen Rand beim Seitenhintergrund oben eingestellt. Ein bisschen bastelei aber es funktioniert.

LINK

Czytaj więcej
Posted on the from Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Michael G.
... ...  Und geht es, wenn die Stickybar auf geht das darüber der rote Balken sichtbar bleibt?

... (-) <style>***</style> ... ... (+) >>>

<style>
#messaggioK{height:30px !important;}
#imPageIntContainer {top:50px !important}
#imStickyBarContainer .menu-mobile-animated {position:relative;top:0px !important}
#imStickyBar_imMenuObject_01_container {position:relative;top:55px !important}
#imStickyBar_imObjectImage_01_wrapper, #imStickyBar_imObjectImage_02_wrapper, #imStickyBarGraphics {top:55px !important}
@media (max-width: 479px) {
#imStickyBarContainer .menu-mobile-animated {position:relative;top:0px !important}
#imStickyBar_imMenuObject_01_container {position:relative;top:60px !important}
#imStickyBar_imObjectImage_01_wrapper, #imStickyBar_imObjectImage_02_wrapper, #imStickyBarGraphics {top:60px !important}
#messaggioK{height:35px !important;}
#imPageIntContainer {top:55px !important}}
</style>

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

@Andreas S. das sieht auch gut aus und ist vielleicht nicht zu kompliziert, denn irgendwann muss der Balken ja wieder weg, wenn der Mist aufhört oder man fügt andere Infos ein. Sieht jedenfalls gut aus, vielleicht kannst du den Code schicken?

@KolAsim, vielen Dank es funktioniert

Czytaj więcej
Posted on the from Michael G.
Michael G.
Michael G.
User
Autor

So ich habe es endlich geschafft :-) mit dem Code von KolAsim Danke.

Auf allen Seiten funktioniert das, aber nur auf der Seite https://zeltsysteme-goebel.de/faltzelte.html

stimmt irgendwas nicht im Header oder dem Balken

Czytaj więcej
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL

... entfernen Sie den vorherigen STIL und verwenden Sie diesen neuen STIL:

<style>
@media (min-width: 576px) {
#messaggioK{height:35px !important;}
#imPageIntContainer {top:35px !important}}
@media (max-width: 575px) {
#messaggioK{height:45px !important;}
#imPageIntContainer {top:45px !important}}
</style>

.

ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autor

Welche Stil entfernen ist gemeint?

Der Code für den roten Balken?

Czytaj więcej
Posted on the from Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Michael G.
... ...  Der Code für den roten Balken?

... ja, yes ...

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪