CSS Button einbauen

  • November 15, 2013 um 10:13 Uhr #9773
    Patrick
    Gast

    Hey,

    eins vorab ich bin noch blutiger Anfänger im Bereich css und html. Zu meiner Frage: Ich probiere einen komplett in css erstellten Button mit folgendem Code zu integrieren:

    
    <div class="asa_product_box">
    <div style="border: 1px solid #000; padding: 5px; margin-bottom: 15px; background: url({$AmazonLogoSmallUrl}) right bottom no-repeat #ffffff;">
    	<div style="width: {$MediumImageWidth}px; float: left; margin-right: 5px;">
    		<a href="{$AmazonUrl}" target="_blank"><img src="{$MediumImageUrl}" width="{$MediumImageWidth}" height="{$MediumImageHeight}" border="0" style="margin-top: 8px; margin-left: 16px; margin-bottom: 8px; border: 0;"></a>
    	</div>
    	<div style="margin-left: 170px;">
    		<p style="padding-bottom: 5px; styleborder: 1px solid rgba(0, 0, 0, .2); margin-bottom: 0;"><a href="{$AmazonUrl}" target="_blank">{$Title}</a></p>	
    		<p style="padding-bottom: 5px; margin-bottom: 0;"><strong>Preis:</strong> <span style="color: #990000; font-weight: bold;">{$AmazonPriceFormatted}</span></p>
    		<p style="padding-bottom: 5px; margin-bottom: 0;">{$RatingStars} ({$TotalReviews} Bewertungen)</p>
    	</div>
    			<!-- Kaufen-Button: -->
    		<div style="border: 1px solid rgba(0, 0, 0, .2);
    			color: #fff;
    			display: inline-block;
    			padding: .5em .8em;
    			text-decoration: none;
    			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    			border-radius: 4px;
    			-moz-border-radius: 4px;
    			-webkit-border-radius: 4px;
    			box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    			-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    			-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    			background: #30a146;
    			background: linear-gradient(top, #30a146 0%, #249334 100%);
    			background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);
    			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));
    			background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%);">
    		<a href="{$AmazonUrl}" rel="nofollow" target="_blank" >Jetzt ansehen</a>
    		</div>
    	<div style="clear: both;"></div>
    </div>
    </div>

    Öffne ich die .tpl datei im Browser, wird der Button dargestellt. Füge ich diesen jedoch in das Plugin-Verzeichnis ein und lasse mir das Produkt mit der neuen .tpl-Datei anzeigen, ist kein Button zu erkennen, bis auf 3 Striche am Rand die viel viel größer sind als der Button.

    Irgendeine Idee, wo der Fehler liegt?

    LG
    Patrick

    • Dieses Thema wurde geändert vor 10 Jahren, 9 Monaten von Timo.
    • Dieses Thema wurde geändert vor 10 Jahren, 9 Monaten von Timo.
    April 24, 2014 um 14:31 Uhr #10824
    PlayFront
    Gast

    Nur mal so, wer sich auf die schnell eine Button bauen möchte, dafür gibt es CSS Generator im Inet. Button nach Wunsch gestalten und in die Templates kopieren. Haben wir auch so gemacht, hat zwei Minuten gedauert. Haben diesen Generator dafür genutzt (ohne jetzt Werbung machen zu wollen). http://www.cssbuttongenerator.com Ergebnis gibt es auf unserer Seite.

    PS: Gibt es schon was Neues zur Pro Version?

    Juni 9, 2014 um 10:45 Uhr #11364
    Timo
    Mitglied

    Ich arbeite daran. 🙂

Du musst angemeldet sein, um auf dieses Thema antworten zu können.