Jump to content

"zur Produktseite" Button in der Produkt Liste css formatierung


Recommended Posts

Hallo

 

Ich möchte eine CSS formatierung vornehmen !

 

Dazu der code im file product-list.tpl

<div class="button-container">
     <a class="zumProdukt" href="{$product.link|escape:'html':'UTF-8'}"  title="produktlink" itemprop="url">
          <h1>Produktseite</h1>
     </a>

Nun steht da dieser Textlink! den möchte ich als button formatieren!

 

ich habe versucht. in der product_list.css

.zumProdukt

hinzuzufügen macht aber einen fehler!

 

wie kann ich das nun formatieren?

 

GRüsse

Phil Max

Edited by phisch_max (see edit history)
Link to comment
Share on other sites

Sieht eigentlich nicht so schlecht aus.

 

Nimm mal das h1 raus; der Code in der prouct-list.css könnte dann z.B. so aussehen:

 

 

 
 .zumProdukt {
            background-color:red;
            }            
 

 

Grüsse

Whiley

Link to comment
Share on other sites

Hallo Phil,

 

das was du vorhast ist absoluter Standard und muß so wie oben skizziert funktionieren!

 

Ich habe das mal im Demoshop eingegeben http://quintilius-varus.de/de/5-tshirts

(oben rechts auf Listenansicht stellen)

 

In der product-list.tpl sieht das so aus:

 

                            {hook h="displayProductPriceBlock" product=$product type="price"}
                            {hook h="displayProductPriceBlock" product=$product type="unit_price"}
                            {hook h="displayProductPriceBlock" product=$product type='after_price'}
                                                                        
                                <div class="button-container">
                                <a class="zumProdukt" href="{$product.link|escape:'html':'UTF-8'}"  title="produktlink" itemprop="url">
                                Produktseite
                                </a>

 

und in der css-datei so:

 

 

 
 .zumProdukt {
                background-color: red;
                border: yellow;
                border-radius: 8px;
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
            }            
 

 

Das Ergebnis ist dann:

post-467854-0-52852400-1473074504_thumb.jpg

 

Alles Caches löschen, falls CCC eingeschaltet, dann erstmal abschalten.

 

Viele Erfolg

Whiley

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...