RobertGSRobertGS MitgliedKommentare: 11 Danke erhalten: 0 Mitglied seit: September 2014 bearbeitet 10. April

Hallo,

ich möchte gern den Header & Footer anpassen. Wenn Ihr mal auf www.steinemann-shop.de schaut, dann seht Ihr

das z.B. im Footer in der mitte alles weiß ist.

 

Mit welchen Formeln / Befehlen kann ich diese in den jeweiligen .less Datein anpassen?

(Ja, habe ein neues Theme angelegt und das ich die jeweilige .less anlegen muss)

 

Genau so möchte ich für die Suchleiste, Merkzettel, Mein Konto und Warenkorb jeweils die Hintergundfarbe anpassen sowie den Rahmen (Border).

 

Und kann man über die .less Datein auch punktuell die Schriftfarbe ändern?

 

Danke Euch schon mal! =)

Kommentare

  • useguseg MitgliedKommentare: 2231 Danke erhalten: 520 bearbeitet 10. April Mitglied seit: Januar 2013

    Schau mal bei shopwareianer vorbei, da hat er es eigentlich auch für Anfänger gut beschrieben.
    https://shopwareianer.com/tutorials/shopware-eigene-less-datei-anlegen

    Uwe

    Danke von 1RobertGS
  • RobertGSRobertGS MitgliedKommentare: 11 Danke erhalten: 0 Mitglied seit: September 2014

    Ok Danke.

    Warum kann ich eigentlich FireLESS als PlugIn nicht in Firefox hinzufügen? Also es ist installiert, aktiviert und neugestartet, aber irgendwie kann ich es nicht aufrufen.

  • useguseg MitgliedKommentare: 2231 Danke erhalten: 520 Mitglied seit: Januar 2013

    Firefox nutze ich schon sehr lange nicht mehr ich habe den Eindruck das es total langsam geworden ist, deshalb Google Chrome mit entsprechenden Plugin.

    Uwe

    Danke von 1RobertGS
  • RobertGSRobertGS MitgliedKommentare: 11 Danke erhalten: 0 Mitglied seit: September 2014

    Ok, habe alle anpassungen soweit gut hinbekommen.

     

    Das einzige was ich noch nicht habe, ist wie ich das Logo in der Mobil- & Tablet-Version mittig hinbekomme. Auch da habe ich schon viel gelesen und gestöbert und probiert, aber hat noch nichts funktioniert. Hat da noch jemand eine Idee?

     

    Genau so stört es mich, das gaaaanz unten im Footer " * Alle Preise inkl. gesetzl. Mehrwertsteuer zzgl. Versandkosten und ggf. Nachnahmegebühren, wenn nicht anders beschrieben " der Link "Versandkosten" eine andere Farbe hat als die Links darüber. Jemand eine Idee? =)

  • MomosMomos MitgliedKommentare: 5 Danke erhalten: 1 Mitglied seit: Dezember 2016

    In der footer.less die Linkfarbe anpassen

  • RobertGSRobertGS MitgliedKommentare: 11 Danke erhalten: 0 Mitglied seit: September 2014

    Habe ich schon, ändert sich nichts :(

     

    so schaut meine footer.less aus:

     

    
    
    .footer-main {
        
         background: #571234;
         color: #f5f5f5;
    
    
    .container {
         background: #571234;
         }
    
    .navigation--link {
         color: #f5f5f5;
         }
    	 
    .footer-minimal{
         color: #f5f5f5;
         }
    
    
    .column--headline {
         color: #f5f5f5;
         }
    
    }
    
    .footer-main .column--headline::after {
        font-size: 18px;
        font-size: 1.125rem;
        font-family: 'shopware';
        color: #f5f5f5;
        font-weight: 700;
        content: "\e68f";
        float: right;
    }
    
    .footer-minimal .footer--service-menu .service--list .service--link {
        padding: 8px 2px 8px 2px;
        padding: .5rem .125rem .5rem .125rem;
        display: inline-block;
    	color: #f5f5f5;
        text-decoration: none;
    }

     

  • MomosMomos MitgliedKommentare: 5 Danke erhalten: 1 Mitglied seit: Dezember 2016

    hast du sie auch in deine all.less eingebunden?

  • MomosMomos MitgliedKommentare: 5 Danke erhalten: 1 Mitglied seit: Dezember 2016

    Die Farbanweisung musst du für footer--bottom setzen

    Danke von 1RobertGS
  • RobertGSRobertGS MitgliedKommentare: 11 Danke erhalten: 0 bearbeitet 22. April Mitglied seit: September 2014

    Ändert nichts, habe es so eingefügt:

     

    .footer-main {
        
         background: #571234;
         color: #f5f5f5;
    
    
    .container {
         background: #571234;
         }
    
    .navigation--link {
         color: #f5f5f5;
         }
    	 
    .footer-minimal{
         color: #f5f5f5;
         }
    
    
    .column--headline {
         color: #f5f5f5;
         }
    	 
    .footer--bottom .navigation--link {
         color: #f5f5f5;
         }
    
    }

    oder auch so:

    .footer-main {
        
         background: #571234;
         color: #f5f5f5;
    
    
    .container {
         background: #571234;
         }
    
    .navigation--link {
         color: #f5f5f5;
         }
    	 
    .footer-minimal{
         color: #f5f5f5;
         }
    
    
    .column--headline {
         color: #f5f5f5;
         }
    	 
    .footer--bottom {
         color: #f5f5f5;
         }
    
    }

    Theme neugeladen, Cache geleert und auch STRG-F5. Ja in all.less ist alles eingefügt ...

  • hdshds MitgliedKommentare: 124 Danke erhalten: 22 Mitglied seit: Dezember 2012

    Probier mal so aus

    .footer-main a {
        color: #deine Farbe;
        text-decoration: none oder ändern wenn gewünscht;
    }

     

    Danke von 1RobertGS
  • trixxtrixx MitgliedKommentare: 967 Danke erhalten: 98 Mitglied seit: Mai 2014

    Den zzgl. Versandkostenlink musst du in den Textbausteinen suchen und anpassen. So hatte ich das auch gemacht, wenn ich das jetzt noch richtig im Kopf habe.

    Danke von 1RobertGS
  • RobertGSRobertGS MitgliedKommentare: 11 Danke erhalten: 0 Mitglied seit: September 2014

    Probier mal so aus

    .footer-main a {
        color: #deine Farbe;
        text-decoration: none oder ändern wenn gewünscht;
    }

     

    Super - hat geklappt, vielen Dank!.

     

    Jetzt geht es weiter: wie kann ich das Logo in der Mobile- und Tabletversion so anpassen, das es etwas größer ist und vorallem mittig?

    Der Code schaut derzeit so aus:

    header-main {
    
        // Logo
        .logo-main {
            .logo--link {
                .unitize-height(800, 300); // Anpassen der Höhe, Angabe in px
            }
            // Smaller logo for mobile viewports
            .logo--shop {
                .unitize-height(800, 300); // Anpassen der Höhe, Angabe in px
            }
        }
    }
    
    @media screen and (min-width: @tabletViewportWidth) {
        // View für Tablets und Desktops
        .header-main {
            .logo-main {
                .logo--link {
                    .unitize-height(300, 100); // 50 auf eure Höhe anpassen
                }
                .logo--shop {
                    .unitize-height(300, 100); // 50 auf eure Höhe anpassen
                }
            }
        }
    }

     

  • RobertGSRobertGS MitgliedKommentare: 11 Danke erhalten: 0 Mitglied seit: September 2014

    *push*

Anmelden oder Registrieren, um zu kommentieren.