CSS Button einbauen

To Parent Forum
  • November 15, 2013 at 10:13 #9773
    Patrick
    Guest

    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

    • This topic was modified 10 years, 11 months ago by Timo.
    • This topic was modified 10 years, 11 months ago by Timo.
    April 24, 2014 at 14:31 #10824
    PlayFront
    Guest

    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?

    June 9, 2014 at 10:45 #11364
    Timo
    Member

    Ich arbeite daran. 🙂

You must be logged in to reply to this topic.