Codepen Code einfügen

Hallo zusammen,

wie kann ich einen html Code inkl. CSS von Codepen in ZP 13 einbinden?
Es geht speziell um ein Pricing Table welches ich gerne auf einer Seite einbinden möchte.

Freue mich über Ideen und/oder Lösungen

Viele Grüße und Merci!

Hallo Thomas,

das habe ich bereits versucht, klappt leider nicht.

Ich Versuche diesen Code einzubinden: Pricing Tables (ohne Member Login)

Ich benutze das Layout: Clean Style Responsive (Falls es wichtig ist)

Super! Vielen Dank! und schönen Abend erstmal

Hanabi schrieb:

Weitere Ideen morgen im Tagesverlauf über den Zeta-Support oder spätestens am Abend nach Rückkehr an den heimatlichen Rechner über mich.

Uwe Keim schrieb:

„Klappt nicht“ ist eine furchtbar unspezifische Fehlerbeschreibung.

Damit wird eine Hilfe quasi unmöglich.

Hier steht, wie es besser geht:

https://www.chiark.greenend.org.uk/~sgtatham/bugs-de.html

Alles anzeigen

Nur der Content wird übernommen, nicht das Layout.

Stefan S schrieb:

Das CSS sollten Sie nicht im Quelltext-Widget einfügen, sondern wie hier beschrieben: https://docs.zeta-producer.com/eigenes-css-einfuegen.html (gilt Projektweit). Wenn das CSS nur für die eine, spezifische Seite benötigt wird, dann fügen Sie es besser über ein seitenspezifisches Attribut namens additional_css ein.

Super! Das hat geklappt...vielen Dank!

Ok "neues Problem":

Habe mich etwas zu früh gefreut...

Füge ich den Code über additional_css ein, ändert sich die Farbe allerdings nur in einem Bereich.

Die Überschrift ist eigentlich weiß und nicht dunkelgrau und es entstehen 2 unschöne "Listen-Punkte"

Ändere ich die Farbe direkt im Attribut verändert sich nichts

Woran kann das liegen?

Ich habe mal ein Screenshot eingefügt...

Hallo,

hier sind noch mal zwei Sachen die ich gerne von Codepen übernehmen würde.

Füge ich den HTML Code über das Quelltext Widget und den CSS Code über das Attribut additional_css ein, wird leider nichts übernommen.

Ich sehe weder Text noch Layout.

Wie kann ich das ändern?

Vielen Dank im Voraus.

/* ======================== */

/* Syed Sahar Ali Raza */

/* ======================== */

@import url(https://fonts.googleapis.com/c…0italic,700,900italic,900);

@import url(https://fonts.googleapis.com/c…0,300,500,600,700,800,900);

@import url(https://fonts.googleapis.com/c…0,300,500,600,700,800,900);

body{background-color:#eee;}

#generic_price_table{

background-color: #f0eded;

}

/*PRICE COLOR CODE START*/

#generic_price_table .generic_content{

background-color: #fff;

}

#generic_price_table .generic_content .generic_head_price{

background-color: #f6f6f6;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{

border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{

color: #525252;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{

color: #414141;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{

color: #414141;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{

color: #414141;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{

color: #414141;

}

#generic_price_table .generic_content .generic_feature_list ul li{

color: #a7a7a7;

}

#generic_price_table .generic_content .generic_feature_list ul li span{

color: #414141;

}

#generic_price_table .generic_content .generic_feature_list ul li:hover{

background-color: #E4E4E4;

border-left: 5px solid #2ECC71;

}

#generic_price_table .generic_content .generic_price_btn a{

border: 1px solid #2ECC71;

color: #2ECC71;

}

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{

border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71;

color: #fff;

}

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span,

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{

color: #fff;

}

#generic_price_table .generic_content:hover .generic_price_btn a,

#generic_price_table .generic_content.active .generic_price_btn a{

background-color: #2ECC71;

color: #fff;

}

#generic_price_table{

margin: 50px 0 50px 0;

font-family: 'Raleway', sans-serif;

}

.row .table{

padding: 28px 0;

}

/*PRICE BODY CODE START*/

#generic_price_table .generic_content{

overflow: hidden;

position: relative;

text-align: center;

}

#generic_price_table .generic_content .generic_head_price {

margin: 0 0 20px 0;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content{

margin: 0 0 50px 0;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{

border-style: solid;

border-width: 90px 1411px 23px 399px;

position: absolute;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head{

padding-top: 40px;

position: relative;

z-index: 1;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{

font-family: "Raleway",sans-serif;

font-size: 28px;

font-weight: 400;

letter-spacing: 2px;

margin: 0;

padding: 0;

text-transform: uppercase;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag{

padding: 0 0 20px;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price{

display: block;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{

display: inline-block;

font-family: "Lato",sans-serif;

font-size: 28px;

font-weight: 400;

vertical-align: middle;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{

font-family: "Lato",sans-serif;

font-size: 60px;

font-weight: 300;

letter-spacing: -2px;

line-height: 60px;

padding: 0;

vertical-align: middle;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{

display: inline-block;

font-family: "Lato",sans-serif;

font-size: 24px;

font-weight: 400;

vertical-align: bottom;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{

font-family: "Lato",sans-serif;

font-size: 18px;

font-weight: 400;

letter-spacing: 3px;

vertical-align: bottom;

}

#generic_price_table .generic_content .generic_feature_list ul{

list-style: none;

padding: 0;

margin: 0;

}

#generic_price_table .generic_content .generic_feature_list ul li{

font-family: "Lato",sans-serif;

font-size: 18px;

padding: 15px 0;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table .generic_content .generic_feature_list ul li:hover{

transition: all 0.3s ease-in-out 0s;

-moz-transition: all 0.3s ease-in-out 0s;

-ms-transition: all 0.3s ease-in-out 0s;

-o-transition: all 0.3s ease-in-out 0s;

-webkit-transition: all 0.3s ease-in-out 0s;

}

#generic_price_table .generic_content .generic_feature_list ul li .fa{

padding: 0 10px;

}

#generic_price_table .generic_content .generic_price_btn{

margin: 20px 0 32px;

}

#generic_price_table .generic_content .generic_price_btn a{

border-radius: 50px;

-moz-border-radius: 50px;

-ms-border-radius: 50px;

-o-border-radius: 50px;

-webkit-border-radius: 50px;

display: inline-block;

font-family: "Lato",sans-serif;

font-size: 18px;

outline: medium none;

padding: 12px 30px;

text-decoration: none;

text-transform: uppercase;

}

#generic_price_table .generic_content,

#generic_price_table .generic_content:hover,

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg,

#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2,

#generic_price_table .generic_content .price,

#generic_price_table .generic_content:hover .price,

#generic_price_table .generic_content .generic_price_btn a,

#generic_price_table .generic_content:hover .generic_price_btn a{

transition: all 0.3s ease-in-out 0s;

-moz-transition: all 0.3s ease-in-out 0s;

-ms-transition: all 0.3s ease-in-out 0s;

-o-transition: all 0.3s ease-in-out 0s;

-webkit-transition: all 0.3s ease-in-out 0s;

}

media (max-width: 320px) {

}

media (max-width: 767px) {

#generic_price_table .generic_content{

margin-bottom:75px;

}

}

media (min-width: 768px) and (max-width: 991px) {

#generic_price_table .col-md-3{

float:left;

width:50%;

}

#generic_price_table .col-md-4{

float:left;

width:50%;

}

#generic_price_table .generic_content{

margin-bottom:75px;

}

}

media (min-width: 992px) and (max-width: 1199px) {

}

media (min-width: 1200px) {

}

#generic_price_table_home{

font-family: 'Raleway', sans-serif;

}

.text-center h1,

.text-center h1 a{

color: #7885CB;

font-size: 30px;

font-weight: 300;

text-decoration: none;

}

.demo-pic{

margin: 0 auto;

}

.demo-pic:hover{

opacity: 0.7;

}

#generic_price_table_home ul{

margin: 0 auto;

padding: 0;

list-style: none;

display: table;

}

#generic_price_table_home li{

float: left;

}

#generic_price_table_home li + li{

margin-left: 10px;

padding-bottom: 10px;

}

#generic_price_table_home li a{

display: block;

width: 50px;

height: 50px;

font-size: 0px;

}

#generic_price_table_home .blue{

background: #3498DB;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table_home .emerald{

background: #2ECC71;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table_home .grey{

background: #7F8C8D;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table_home .midnight{

background: #34495E;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table_home .orange{

background: #E67E22;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table_home .purple{

background: #9B59B6;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table_home .red{

background: #E74C3C;

transition:all 0.3s ease-in-out 0s;

}

#generic_price_table_home .turquoise{

background: #1ABC9C;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table_home .blue:hover,

#generic_price_table_home .emerald:hover,

#generic_price_table_home .grey:hover,

#generic_price_table_home .midnight:hover,

#generic_price_table_home .orange:hover,

#generic_price_table_home .purple:hover,

#generic_price_table_home .red:hover,

#generic_price_table_home .turquoise:hover{

border-bottom-left-radius: 50px;

border-bottom-right-radius: 50px;

border-top-left-radius: 50px;

border-top-right-radius: 50px;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table_home .divider{

border-bottom: 1px solid #ddd;

margin-bottom: 20px;

padding: 20px;

}

#generic_price_table_home .divider span{

width: 100%;

display: table;

height: 2px;

background: #ddd;

margin: 50px auto;

line-height: 2px;

}

#generic_price_table_home .itemname{

text-align: center;

font-size: 50px ;

padding: 50px 0 20px ;

border-bottom: 1px solid #ddd;

margin-bottom: 40px;

text-decoration: none;

font-weight: 300;

}

#generic_price_table_home .itemnametext{

text-align: center;

font-size: 20px;

padding-top: 5px;

text-transform: uppercase;

display: inline-block;

}

#generic_price_table_home .footer{

padding:40px 0;

}

.price-heading{

text-align: center;

}

.price-heading h1{

color: #666;

margin: 0;

padding: 0 0 50px 0;

}

.demo-button {

background-color: #333333;

color: #ffffff;

display: table;

font-size: 20px;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

margin-bottom: 50px;

outline-color: -moz-use-text-color;

outline-style: none;

outline-width: medium ;

padding: 10px;

text-align: center;

text-transform: uppercase;

}

.bottom_btn{

background-color: #333333;

color: #ffffff;

display: table;

font-size: 28px;

margin: 60px auto 20px;

padding: 10px 25px;

text-align: center;

text-transform: uppercase;

}

.demo-button:hover{

background-color: #666;

color: #FFF;

text-decoration:none;

}

.bottom_btn:hover{

background-color: #666;

color: #FFF;

text-decoration:none;

}

Hanabi schrieb:

Hallo Max,

ich habe den Beitrag mal in die Plauderecke verschoben. Support zur Fehlersuche in solch umfangreichem Quelltext ist aber eigentlich nicht Sinn dieses Forums. Auch wäre es sinnvoll, außer dem Code etwas an Text dazuzuschreiben, was denn nun nicht funktioniert.

Hallo,

Danke für´s verschieben!

Also das Problem ist nicht der Code...der funktioniert bei Codepen einwandfrei....oder vielleicht doch?!

Mein Problem ist eher wie ich diesen in ZP13 einfügen kann.

Ich gehe wie folgt vor:

Widget -> Sonstige -> Quelltext -> HTML Code einfügen

Am Ende sieht das ganze dann so aus ...siehe Bild im Anhang

Ich sehe weder Text noch irgendein Format...deswegen dachte ich, ich füge noch die Codes hinzu.

Css habe ich hier noch nicht hinzugefügt...das mache ich dann im nächsten Schritt...mich wundert eben, dass ich bereits an dieser Stelle nichts sehe außer das Copyright Zeichen.

Über jede Hilfe wäre ich sehr dankbar!

Ps.: Eigentlich sollte das Ganze so aussehen (siehe Bild)

Hallo zusammen,

entschuldigt bitte die verspätete Rückmeldung.

Vielen Dank für die Antworten.

Ich werde es nochmal mit Codepen versuchen und sollte es vorne und hinten nicht klappen, nehme ich Marios Vorschlag.

Danke nochmal!

Beste Grüße

Max