Allgemeines » Design Rom - Code Snippet für Top-Bar

#1 | Design Rom - Code Snippet für Top-Bar datum

05.01.2017 14:08 (zuletzt bearbeitet: 14.01.2017 20:08)

Hallo,
ich wollte bei meinem neuen Design ROM (Jimdo-PRO) den Header (der weiße Balken wo das Menü und Logo sitzt) mit einem angepasstem Bild ersetzen.
Dazu habe ich mir diesen Code zusammen gebaut:

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

.topbar{background-image:url(https://image.jimcdn.com/app/cms/image/t...14618/image.jpg)
;background-repeat:no-repeat;}

/*]]>*/
</style>

Den habe ich eingefügt unter: Einstellungen/Header bearbeiten/Gesamte Seite.
Leider ohne Erfolg, er greifft nicht drauf zu. Muss aber dazu sagen, dass ich nicht all zu viel Plan von Programmieren habe.
Für etwas Hilfe wäre ich Euch sehr dankbar.
Gruß
Pixelpunk

Antworten

#2 | RE: Design Rom - Code Snippet funkt. nicht. datum

10.01.2017 11:04 (zuletzt bearbeitet: 10.01.2017 11:05)

...der Code ist richtig, aber der Bezeichner stimmt nicht (topbar). Finde den richtigen mit Chrome dev-tools!

versuch mal:

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

.jtpl-header--image {
background-image: url(https://image.jimcdn.com/app/cms/image/t...14618/image.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: 0 0;
}

/*]]>*/
</style>

LG, az

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#3 | RE: Design Rom - Code Snippet funkt. nicht. datum

10.01.2017 14:23 (zuletzt bearbeitet: 10.01.2017 14:32)

Hallo und vielen Dank für den Hinweis.
So wie es aussieht ist der Bezeichner tatsächlich:

.jtpl-header--image

Nur leider funkt. es nicht. Nach dem einfügen verschiebt sich das große Header Bild nach links, warum auch immer, und das war es.
Habe schon die Zeile (glaube ich ) gefunden. sie scheint auch zu stimmen...aber irgendwo mache ich hier einen Fehler :-(

Danke
pixelpunk

Antworten

#4 | RE: Design Rom - Code Snippet funkt. nicht. datum

10.01.2017 14:59

Nachtrag:
mir ist gerade aufgefallen, dass mein gewünschtes Header Bild hinter das aktuelle Header Bild verschwindet. Beim aktualisieren taucht es kurz auf. Es ist aber nicht die Position, die ich verändern möchte.
Ich würde gerne den oberen weissen Streifen durch eigenes Bild ersetzen. Jetzt bin ich total verwirrt.

Gruß

Antworten

#5 | RE: Design Rom - Code Snippet funkt. nicht. datum

10.01.2017 22:27

...schreib uns doch mal die URL. Das ist nur ein ganz kleiner Fehler, denke ich.

LG, az

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#6 | RE: Design Rom - Code Snippet funkt. nicht. datum

11.01.2017 15:37 (zuletzt bearbeitet: 11.01.2017 22:25)

...klar hier ist sie:
https://www.vivalasvegans.de

Gruß und danke

Antworten

#7 | RE: Design Rom - Code Snippet funkt. nicht. datum

11.01.2017 22:28 (zuletzt bearbeitet: 11.01.2017 22:43)

az_

Informationen anzeigen

Beitr�ge:	2403
Registriert seit:	28.04.2015
Wohnort:	Berlin

...jetzt bin ich verwirrt: was genau möchtest Du erreichen? hast Du mal eine Grafik?

ach ich weiß schon:

...richtig? coole Idee!!

Dann ist der Bezeichner, den Du verändern musst, doch noch ein anderer:

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

.jtpl-header.navigation-colors    {
    background: url(https://image.jimcdn.com/app/cms/image/transf/dimension=940x10000:format=jpg/path/s7ee536152f6735d7/image/i063f5738851cd191/version/1483614618/image.jpg);
    background-repeat: no-repeat;
    background-size: 100vw;
    background-position: 0 0;
    background-color:transparent;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.8);
}
 

.navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited {
    color: #ffffff;
    background-color: Transparent;
}
 

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#8 | RE: Design Rom - Code Snippet funkt. nicht. datum

11.01.2017 22:50

az_

Informationen anzeigen

Beitr�ge:	2403
Registriert seit:	28.04.2015
Wohnort:	Berlin

...und für Dein Impressum:

1
2
3
4
5
 
.Normal_text {
    width: 100%;
    margin: 0 0 50px 0;
    font-family: helvetica !important;
}
 

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#9 | RE: Design Rom - Code Snippet funkt. nicht. datum

14.01.2017 10:46

Hallo,
"you make my day"...da hätte ich lange probieren können. Es ist fast perfekt...aber nur fast.
Optimal wäre natürlich eine separate Transparenz Anweisung für den BG der NavBar und separat für das Hover Untermenü. Denn das Hover Untermenü könnte etwas BG gebrauchen :-)
Leider sind aber die beiden B.Grounds zusammen "gekoppelt"
Egal wie ich sie einstelle, verändern sich immer beide zusammen.
Ich glaube das ist aber schon eine etwas aufwendige Programmierungssache. Trotzdem vielen leiben Dank nochmal.
LG
pixelpunk

Antworten

#10 | RE: Design Rom - Code Snippet funkt. nicht. datum

14.01.2017 18:57 (zuletzt bearbeitet: 14.01.2017 19:16)

az_

Informationen anzeigen

Beitr�ge:	2403
Registriert seit:	28.04.2015
Wohnort:	Berlin

...da gibt es auch einen eigenen Bezeichner für. Versuch mal .cc-nav-level-1 bez. des Untermenüs:

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

.navigation-colors a, .navigation-colors a:link, .navigation-colors a:visited {
    color: #333;
    background-color: Transparent;
}
 
.cc-nav-level-1 a, .cc-nav-level-1 a:link, .cc-nav-level-1 a:visited {
    color: #333;
    background-color: #ccc;
}
 

}
 

LG, az

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#11 | RE: Design Rom - Code Snippet für Top-Bar datum

14.01.2017 19:01 (zuletzt bearbeitet: 14.01.2017 20:09)

...ich hab übrg. noch einen Fehler gemacht (die Höhe bei background-size vergessen). Schreib mal:

.jtpl-header.navigation-colors    {
    background: url(https://image.jimcdn.com/app/cms/image/t...14618/image.jpg);
    background-repeat: no-repeat;
    background-size: 100vw 100%;
    background-position: 0 0;
    background-color:transparent;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.8);
}

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#12 | RE: Design Rom - Code Snippet für Top-Bar datum

18.01.2017 08:05

Jaaa!...das passt jetzt 100%. Das schöne ist ich kann mir das mit den Heaxacodes selbst nach belieben anpassen.
Du bist mein Held.
An diser Stelle nochmal vielen lieben Dank für dein Support.

LG
pixelpunk

Antworten

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an