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)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi Whiley

 

Wenn ich das h1 rausnehme ist nichts mehr zu sehen.

Anstelle des h1 kann ich auch ein p machen!

 

Doch die Formatierung funktioniert nicht.

am liebsten hätte ich ein Icon wie beim Vergleichsbutton, der vor dem Text steht!

 

Gruss Phil

Share this post


Link to post
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

Share this post


Link to post
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
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More