CSS in die Jimdo-Seite einbinden

Antworten
  • Seite 2 von 3
#26
10.02.2016 20:29
avatar  az_
#26
avatar
az_

...genau!

LG, az

PS: Gratuliere! Genau so geht´s! nur du must aufpassen, dass die Bilder, die Du verwendest, auch die richtigen Abmessungen haben. (400x400px waren das, glaub ich) Sonst gibt´s Verzerrungen. Gefällt mir aber gut, was ich bisher bei Dir gesehen habe!


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
#27
10.02.2016 20:47
avatar  tschud61
#27
ts
tschud61

Hallo Andreas

Wenn ich aber die URL (z.B.: http://www.20min.ch) anstelle des "Gartenhages" eingebe ...
vorher:

1
 
<a href="#"></a>
 


nachher:

1
 
<a href="http://www.20min.ch"></a>
 


... kommt keine Linkhinweis.

lg Stefan


 Antworten

 Beitrag melden
#28
11.02.2016 10:33 (zuletzt bearbeitet: 11.02.2016 10:34)
avatar  Feemina
#28
Fe
Feemina

Hallo, Andreas und Stefan,

verlinken würde ich auch gern, hatte gedacht, dass ja in Ergänzung zu dem, was Andreas gemacht hat, auch noch irgendwo die Bild-URL reinmuss, aber jetzt hab ich nur noch Kuddelmuddel ;)

Aber eine Testseite habe ich jetzt angelegt: http://feemina-testseite.jimdo.com/

Grüße

Barbara


 Antworten

 Beitrag melden
#29
11.02.2016 13:54 (zuletzt bearbeitet: 11.02.2016 14:02)
avatar  az_
#29
avatar
az_

...geht doch! Du hast einen Fehler im html, aber sonst funzt es doch.

setz mal ein:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!-- Scale up-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect6 scale_up"><a href="#">
        <div class="img"><img src="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/images/assets/6.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect6 scale_up"><a href="#">
        <div class="img"><img src="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/images/assets/5.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored-->
 
  </div>
</div>
<!-- end Scale up-->
 
 



...das sieht dann so aus:



...und dann nur noch die Bilder austauschen.

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

Bildanhänge

 Antworten

 Beitrag melden
#30
12.02.2016 09:26
avatar  Feemina
#30
Fe
Feemina

... ich hab das jetzt als neues Element eingesetzt, aber es sieht in der Ansicht genauso aus wie vorher: kein Link?


 Antworten

 Beitrag melden
#31
12.02.2016 14:19
avatar  az_
#31
avatar
az_

...bei mir sieht es jetzt perfekt aus! Gratulation! Vielleicht musst Du mal einen Browser-Refresh machen (Seite neu laden, F5), damit Du es auch siehst.
Links müssen im html leider händisch eingefügt werden - aber da gibt es auch einen Trick...

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
#32
12.02.2016 16:13
avatar  Feemina
#32
Fe
Feemina

Hallo, Stefan,

da haben wir uns missverstanden: Bilder und Anpassungen waren nach deiner Hilfestellung vorgestern schon perfekt :)

Andreas und mir ging es ums Verlinken der Bilder - und bei dem Versuch, das einzufügen, hatte ich das Kuddelmuddel angerichtet (das ich zwischenzeitlich gelöscht habe) ...

... wäre also ganz toll, wenn du uns auch noch den Trick verrätst, wie wir die Bilder verlinken können.

Ganz liebe Grüße

Barbara


 Antworten

 Beitrag melden
#33
12.02.2016 19:43
avatar  az_
#33
avatar
az_

...ersetze das # in <a href="#"></a> durch die URL, auf die Du verlinken willst. Wenn Du nicht weißt, wie diese URL lautet, mach folgendes:

- schreibe die Namen der Link-Ziele in ein Text-Element untereinander als Liste, z.B.:
- Shop
- Kontakt
- Reiseziele
- etc.
- führe die Verlinkungen mit dem Jimdo-Tool durch
- öffne das Textelement im html-Modus
- kopiere die URLs bzw. die ganzen Links incl. Beschreibungen von <a href...> bis </a>
- füge die URLs oder die ganzen Links in das HTML-Widget ein anstelle von # bzw. von <a href="#"></a>

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
#34
13.02.2016 07:48
avatar  Feemina
#34
Fe
Feemina

... tut mir leid, hab das jetzt 2x gemacht, aber irgendwas mache ich immer noch falsch... :( http://feemina-testseite.jimdo.com/

Liebe Grüße
Barbara


 Antworten

 Beitrag melden
#35
13.02.2016 09:08 (zuletzt bearbeitet: 13.02.2016 09:15)
avatar  tschud61
#35
ts
tschud61

... das Verlinken klappt bei mir immer noch nicht. Ich habe es gemäss deiner Anleitung (Text-Element) gemacht. Es erscheint links oben vom Bild der Name der aktuellen Unterseite, von der ich den Link machen wollte (siehe Bild 1 und 2)



Und so sieht es im html aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!-- Left to right-->
 
<div class="row">
    <div class="col-sm-6">
        <!-- normal -->
 
        <div class="ih-item circle effect2 left_to_right">
            <a href="http://www.schuleerstfeld.ch" target="_blank" title="http://www.schuleerstfeld.ch">Testseite</a>
            <div class="img">
                <img src="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/images/assets/4.jpg" alt="img" />
            </div>
 
            <div class="info">
                <h3>
                    Stefan Arnold
                </h3>
 
                <p>
                    Tschudipoker
                </p>
            </div>
        </div>
        <!-- end normal -->
    </div>
</div>
 



... und wenn ich im html <Testseite wegnehme; erscheint zwar "Testseite" im Ansichtmodus nicht mehr - aber immer noch keine Verlinkung möglich!

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#36
13.02.2016 09:44 (zuletzt bearbeitet: 13.02.2016 21:02)
avatar  Feemina
#36
Fe
Feemina

... genauso ist es bei mir auch:

1
2
3
4
 
<a href="/app/s50d76e29d5a474ca/pd5dd5ad0dc32ca07/" title="Kontakt">Kontakt</a>
            <div class="img">
                <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=842x10000:format=jpg/path/s50d76e29d5a474ca/image/i7cac812d6ef7cc6b/version/1455178322/image.jpg" alt="img" />
            </div>[img][/img]
 



Bildanhänge

 Antworten

 Beitrag melden
#37
13.02.2016 19:11 (zuletzt bearbeitet: 14.02.2016 10:41)
avatar  az_
#37
avatar
az_

tmsl, Ihr hab absolut Recht! Mein Fehler - das kann ja gar nicht gehen, denn durch das CSS schiebt sich der Layer mit dem Text vor das Bild!

Deshalb müssen wir den Link auch genau da hin legen - hier mein neuer html-Code für das erste Bild auf http://ihovertest.jimdo.com/ihovertest/:

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

<div class="ih-item circle effect1">
    <div class="spinner">    </div>
    <div class="img">
        <img src="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/images/assets/7.jpg" alt="img">
    </div>
    <div class="info">
        <div class="info-back">
            <h3>
                <a href="http://gudh.github.io/ihover/dist/index.html" target="_blank" title="http://gudh.github.io/ihover/dist/index.html">Heading</a>
            </h3>
 
            <p>
                <a href="http://gudh.github.io/ihover/dist/index.html" target="_blank" title="http://gudh.github.io/ihover/dist/index.html">Descripption</a>
            </p>
        </div>
    </div>
</div>
 
 




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
#38
14.02.2016 13:05 (zuletzt bearbeitet: 14.02.2016 20:51)
avatar  tschud61
#38
ts
tschud61

Hallo Andreas

Danke für die Anpassung des html-code. Das Verlinken hat so geklappt. Leider hat sich die Schrift der beiden Texte dadurch verändert (siehe Bild); weiss sähe natürlich besser aus!
Könnte man den Link auch noch zusätzlich auf das ganze Bild aktivieren; also nicht nur auf die beiden Textstellen?

lg Stefan


Bildanhänge

 Antworten

 Beitrag melden
#39
14.02.2016 20:59 (zuletzt bearbeitet: 14.02.2016 21:08)
avatar  az_
#39
avatar
az_

...das mit der Schriftfarbe lässt sich leicht heilen:

1
2
3
4
5
6
7
8
9
 

.ih-item a, .ih-item a:visited {
    color: #fff;
}
 
.ih-item a:hover {
    color: #ccc;
}
 
 



...dann bleibt die Schrift weiß (#fff=white), und wenn der Curser drüber geht, wird sie grau (#ccc):




LG, az


PS: Ich habe es auf http://tschudi61-testseite.jimdo.com/testseite1/ getestet. Den Patch bitte hinten an das CSS-Script anhängen!


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

Bildanhänge

 Antworten

 Beitrag melden
#40
15.02.2016 21:20
avatar  tschud61
#40
ts
tschud61

Hallo Andreas

Danke für den Patch. Es hat bestens geklappt.
... und danke für die Geduld mit meinen ständigen Fragen.

mit liebem Gruss
Stefan


 Antworten

 Beitrag melden
#41
20.02.2016 13:44
avatar  Max Ostermaier
#41
Ma
Max Ostermaier

Hallo, vielleicht kann mir jemand von euch weiterhelfen, bei dem der iHover-Effekt schon geklappt hat, denn ich kapiere es irgendwie nicht so ganz :(

Was muss ich in meinen Jimdo-Head einsetzen?
Und was muss ich in ein HTML-Widget einsetzen, damit das klappt?

Danke und Grüße
max


 Antworten

 Beitrag melden
#42
20.02.2016 14:54
avatar  az_
#42
avatar
az_

Hallo Max,

...es ist ganz einfach: das html-Zeug kommt ins html-Widget:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!-- Scale up-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect6 scale_up"><a href="#">
        <div class="img"><img src="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/images/assets/6.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect6 scale_up"><a href="#">
        <div class="img"><img src="http://51023348.swh.strato-hosting.eu/_test/ihover/dist/images/assets/5.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored-->
 
  </div>
</div>
<!-- end Scale up-->
 



...und das CSS-Zeug kommt in den Head-Bereich.

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
#43
10.07.2016 11:02
avatar  tschud61
#43
ts
tschud61

Hallo Andreas

Ich melde mich wieder.
Nachdem ich das Einbinden von ihover Circle mit deiner Hilfe geschafft habe, bin ich am Ausprobieren von ihover Square. Dies gelingt mir leider nicht. Im Besonderen gefallen mir Hover-Effect 6 und 13. Kannst du mir weiterhelfen. Falls es für dich zu aufwändig ist (ich bekam von dir für diese Effekte die CSS und html-codes), lass es einfach sein.

mit liebem Gruss
Stefan

http://gudh.github.io/ihover/dist/index.html
http://ihovertest.jimdo.com/ihovertest/?


 Antworten

 Beitrag melden
#44
28.06.2017 20:57
avatar  Joshee Dee
#44
Jo
Joshee Dee

Hallo, kann mir hier irgend jemand helfen? Ich habe meinen head Bereich angepasst ( Helsinki) also etwas vergrößert... aber der untere Bereich weicht von der Größe ab und wird nicht mit angepasst.. nun ist der Bereich der auf allen Unterseiten ist schmaler und das sieht echt blöde aus.

Kann mir vielleicht jemand helfen?

Sorry das es hier vielleicht nicht rein passt.

Danke euch allen


 Antworten

 Beitrag melden
#45
29.06.2017 15:07
avatar  Charles
#45
avatar
Charles

Link zur Seite?

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
#46
24.02.2018 11:08
avatar  Markus Hentschel
#46
Ma
Markus Hentschel

Hallo Az,

ich bin ganz neu über dieses Forum gestossen. Mein bisheriger Wissenstand: Kenne alle Funktionen des Jimdo Creators und weis, wie man CSS in den Header einfügt. CSS Kenntnisse: kein / HTML : Anfänger
Ich würde auf meiner Seite gerne einen Mouseover - Effekt umsetzen. Das scheitert aber schon daran, das ich nicht weis, wie man Bilder in ein Textelement einfügt (per Copy & Paste) um HTML Code zu ergänzen.
Mich faszinieren die CSS auf iHoverTest (GitHub) . Wenn es reicht , die jeweilige CSS Klasse in den Header einzufügen, wie komme ich dann an den HTML-Part, um das jew. Bild anzusteuern? Ich wäre um Hilfe wirklich dankbar.


 Antworten

 Beitrag melden
#47
24.02.2018 11:34
avatar  Markus Hentschel
#47
Ma
Markus Hentschel

Hallo. Bin Anfänger. Wo muss ich den CSS Code einfügen und wo den HTML? Wie füge ich HTML Code einem Bildelement zu? Wie kann man ein Bild in ein Textelement einfügen, um den HTML Code einzubauen? Entschuldigt mir meine Unwissenheit :-)


 Antworten

 Beitrag melden
#48
24.02.2018 12:23
avatar  TiJo
#48
Ti
TiJo

bitte lies dir den kompletten Thread mal durch (alle 2 Seiten). Dadurch dürften sind schon ein paar deiner Fragen beantworten.


 Antworten

 Beitrag melden
#49
11.02.2019 14:23
avatar  Cano
#49
Ca
Cano

Hallo zusammen, ich hab mich mal mit diesem Thread beschäftigt aber leider ohne Erfolg.
es geht um iHover, hab alles genau so gemacht wie az beschrieben hat.
Wenn ich nach den Anleitungen der Demo Seite mache, klappt es auch nicht. Mein aktueller stand ist:
im Head:

1
 
<link rel="stylesheet" href="https://u.jimcdn.com/cms/o/s54bb1b433f517428/userlayout/css/ihover.css?t=1549874704" />
 



und im Html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!-- normal -->
 
        <div class="ih-item circle effect1">
            <a href="#"></a>
            <div class="spinner">
            </div>
 
            <div class="img">
                <img src="https://www.meta-cluster.com/wp-content/uploads/wassercluster-2.jpg" alt="img" />
            </div>
 
            <div class="info">
                <div class="info-back">
                    <h3>
                        Heading here
                    </h3>
 
                    <p>
                        Description goes here
                    </p>
                </div>
            </div>
        </div>
        <!-- end normal -->
 



Die Kreise mit dem Bildern werden angezeigt aber der gewünschten Effekt nicht.
Über einen kleinen Tipp wäre ich euch sehr verbunden.
lg


 Antworten

 Beitrag melden
#50
11.02.2019 16:52 (zuletzt bearbeitet: 13.02.2019 18:21)
avatar  Cano
#50
Ca
Cano

Nach endlosem Suchen hab ich endlich die Lösung! man muss in der CSS-Datei beim ".... a :hover", das "a" und das Leerzeichen entfernen.


 Antworten

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