Codepen Code einfügen

MAX1 · 13. Mai 2018

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!

Hanabi · 13. Mai 2018

Hallo Max,

Das geht erstmal grundsätzlich über das Widget „html-Quelltext“. Einfach mal ausprobieren, ob das schon reicht, ansonsten einfach nochmal melden.

MAX1 · 13. Mai 2018

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)

Hanabi · 13. Mai 2018

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 · 13. Mai 2018

„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

MAX1 · 13. Mai 2018

Super! Vielen Dank! und schönen Abend erstmal

Zitat von Hanabi

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

MAX1 · 13. Mai 2018

Zitat von Uwe Keim

„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 · 14. Mai 2018

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.

MAX1 · 15. Mai 2018

Zitat von Stefan S

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!

MAX1 · 15. Mai 2018

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...

Stefan S · 15. Mai 2018

Hallo,

bei CSS kann es halt generell zu Konflikten kommen, wenn eine Klasse z.B. auch in einem Layout definiert ist. Warum das so ist, lässt sich nur sagen, wenn man den entsprechenden Code genau ansehen kann.

MAX1 · 2. November 2018

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.

Code

<! ========================
Syed Sahar Ali Raza
======================== !>
<div id="generic_price_table">
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="price-heading clearfix">
<h1>Our Forex Signals Packages & Prices</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="generic_content clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span>Trial</span>
</div>
</div>
<div class="generic_price_tag clearfix">
<span class="price">
<span class="sign">€</span>
<span class="currency">29</span>
<span class="cent">.95</span>
<span class="month">/14days</span>
</span>
</div>
</div>
<div class="generic_feature_list">
<ul>
<li><span>1</span> Currency Pair (EUR/USD)</li>
<li><span></span> Signal via Email</li>
<li><span>1</span> Account</li>
<li><span></span> Live Chat</li>
<li><span>24/5</span> Support</li>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a class="" href="">Sign up</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="generic_content active clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span>Professional</span>
</div>
</div>
<div class="generic_price_tag clearfix">
<span class="price">
<span class="sign">€</span>
<span class="currency">199</span>
<span class="cent">.95</span>
<span class="month">/MON</span>
</span>
</div>
</div>
<div class="generic_feature_list">
<ul>
<li><span>4</span> Currency Pairs</li>
<li><span></span> Signal via Email</li>
<li><span>1</span> Account</li>
<li><span></span> Live Chat</li>
<li><span>24/5</span> Support</li>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a class="" href="">Sign up</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="generic_content clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span>Unlimited</span>
</div>
</div>
<div class="generic_price_tag clearfix">
<span class="price">
<span class="sign">€</span>
<span class="currency">299</span>
<span class="cent">.95</span>
<span class="month">/MON</span>
</span>
</div>
</div>
<div class="generic_feature_list">
<ul>
<li><span>12</span> Currency Pairs + DAX30, Gold, SP500</li>
<li><span></span> Signal via Email+Telegram</li>
<li><span>1</span> Account</li>
<li><span></span> Live Chat</li>
<li><span>24/7</span> Support</li>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a class="" href="">Sign up</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<a class="bottom_btn" href="#">© MRXYZ</a>
</footer>
</div>

Alles anzeigen

MAX1 · 2. November 2018

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

/* 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);

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 · 2. November 2018

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.

MAX1 · 2. November 2018

Zitat von Hanabi

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!

MAX1 · 2. November 2018

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

Hanabi · 2. November 2018

Hallo Max,

wenn ich den Code aus Beitrag #12 eingebe, erfolgt eine nicht formierte Anzeige des Inhalts, siehe http://www.hanabi-pirna.de/test.php. Füge ich dann den Code aus Beitrag #13 in den Seiteneigenschaften unter Attribute als "additional_css" hinzu, wird der komplette Code als Text in den Kopf der Seite geklatscht. Insgesamt erscheint mir der Code aus #13 wesentlich zu umfangreich, bin aber kein CSS-Spezialist und muss daher an dieser Stelle aussteigen.

NoName · 2. November 2018

CodePen ist eine Entwicklerumgebung zum Testen, Spielen, Probieren. Es ist nicht gewährleistet, dass jeder hier veröffentliche Quellcode durch einfaches Copy & Paste auch in jeder x-beliebigen Anwendung funktioniert. Manschmal fehlts im Quellcode eben an ein paar Zeilen, die für den Entwickler beim Veröffentlichen so nicht erforderlich sind.

Auf jeden Fall funktioniert es einwandfrei, wenn man sich ein wenig in die Thematik einliest: Bootstrap

Mario · 3. November 2018

Zitat von MAX1

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

Versuch es mal hiermit. LINK

MAX1 · 17. November 2018

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

Wollen Sie eine professionelle Website erstellen?