Boxen auf linker Seite anzeigen lassen V2next 2.5.2 CE

  • Hallo!

    Ich weis es gehört nicht direkt hier rein aber es gibt noch keine Kategorie für die Version V2next 2.5.2.

    Ich versuche gerade die Boxen wie Login, Kategorien,Informationen statt auf der rechten Seite links anzeigen zu lassen.

    Wenn ich mit Firebug folgende Änderungen durchführe:

    Code
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {    float: right;}

    dieser code steht in der bootstrap.min.css die generiert wird.

    Wenn ich jetzt in der CSS /admin/defaults/templates/css/bootstrap.css die entsprechenden Zeilen z.B. in Zeile 1246

    Code
    @media (min-width: 1200px) {
      .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
      }
      }

    ändere werden die Änderung in die bootstrap.min.css nicht übernommen. es müssten natürlich auch die anderen Werte wie 992px, 768px und die Werte in Zeile 774 geändert werden.

    Gibts es eine Möglichkeit die Ausrichtung der Boxen im Backend zu ändern oder wo muß ich Änderungen vornehmen um die Darstellung zu ändern.

    Danke im vorraus!

  • So gehts auch!

    Also als erstes Firebug für Firefox installieren, dann die Datei bootstrap.min.css über einen Klick auf CSS und dort die bootstrap.min.css auswählen.
    Alles markieren und kopieren. Mit einenm Editor eine Textdatei anlegen und bootstrap.min.txt benennen und den kopierten Inhalt einfügen und speichern.
    Danach per FTP am besten ins Template Verzeichnis v2next-boot-flat kopieren.

    Wichtig
    Ein Aufruf über netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
    funktioniert nicht da dann einige Zeilen des CSS Codes in der unter der Subdomain netdna.bootstrapcdn.com fehlen und es somit zu Fehlern in der Darstellung kommt.

    Danach unter /templates/v2next-boot-flat/javascript/general.js mit einem Editor öffnen und den Eintrag

    Code
    echo '<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">';


    in

    Code
    echo '<link rel="stylesheet" href="http://www.deine-domain/templates/v2next-boot-flat/bootstrap.min.css">';


    Die Pfadangabe zur CSS muss stimmen eine relativer Pfad hat nicht funktioniert.
    Vorher am besten noch einen Screenshot machen und die Navigationslogo mit einenm Bildbearbeitungsprogramm so bearbeiten, dass sie einen transparenten Hintergrund haben und z.B. als name.png abspeichern.
    Da die Logos vor der Header Navigation nur noch als Kästchen angezeigt werden, müssen diese noch angepasst werden.

    Folgende CSS Einstellungen beziehen sich auf die der Bootstrap.min.css (Die Zeilen können abweichen, da ich den Code bereits verändert habe)

    Um die Boxen links anzuzeigen Zeile 1528 anpassen

    Code
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {    [COLOR='#FF0000']float: right;[/COLOR]}


    Es gibt sicherlich auch hier bessere Lösungen,

    Die Bennung der Symboldateien ist jedem selbst überlassen, die Links müssen stimmen sowie Groß- und Kleinschreibung beachten.
    Die Navigationsymbole:

    Home Button in Zeile 4058.

    Code
    .navbar-brand {    [COLOR='#FF0000']background-image: url("http://www.meine-domain.de/shop/templates/v2next-boot-flat/img/home.png");    background-position: center center;    background-repeat: no-repeat;[/COLOR]    float: left;    font-size: 0;    height: 50px;    line-height: 20px;    padding-bottom: 15px;    padding-left: 15px;    padding-right: 15px;    padding-top: 15px;}

    Warenkorb Symbol in Zeile 2629

    Code
    .glyphicon-shopping-cart:before {    [COLOR='#FF0000']content: url("http://www.meine-domain.de/shop/templates/v2next-boot-flat/img/cart.png");    position: relative;    top: 2px;[/COLOR]}

    Merkzettel Symbol in Zeile 2604

    Code
    .glyphicon-star:before {  [COLOR='#FF0000']  content: url("http://www.meine-domain.de/shop/templates/v2next-boot-flat/img/merkzettel.png");    position: relative;    top: 2px;[/COLOR]}

    Konto Symbol bei mir in Zeile 2612

    Code
    .glyphicon-user:before {    [COLOR='#FF0000']content: url("http://www.meine-domain.de/shop/templates/v2next-boot-flat/img/konto.png");    position: relative;    top: 2px;[/COLOR]}

    Das Suchen Symbol (Lupe) habe ich wie folgt gelöst.

    Zeile 2606

    Code
    .glyphicon-search:before {    [COLOR='#FF0000']content: url("http://www.meine-domain.de/shop/templates/v2next-boot-flat/img/lupe.png");[/COLOR]}

    Da es unschöne Rahmen ums Symbol gab habe ich in der Zeile Zeile 2562 noch etwas geändert.

    Code
    .glyphicon {    display: inline-block;    font-family: 'Glyphicons Halflings';    font-style: normal;    font-weight: 400;    line-height: 1;[COLOR='#FF0000']    margin-bottom: -3px;    margin-left: -3px;    margin-right: -3px;    margin-top: -3px;[/COLOR]    padding-bottom: 0;    padding-left: 0;    padding-right: 0;    padding-top: 0;    position: relative;    top: 1px;}

    Jetzt ist noch ein kleines Problem vorhanden, der Text "Ihr Konto" ist nicht auf der selben Zeile wie die anderen Textbutton der Header Navigation.
    Das ist ein Schönheitsfehler muß dann noch den ganzen Shop testen ob die Symbole da sind wo sie sein müssen, ich denke da gibsts noch Arbeit ;)

    Es geht sicherlich auch anders aber ohne Hilfe ist es gar nicht so einfach. Viel Spaß beim experimentieren.

    Achja nicht vergessen die bootstrap.min.css wieder komprimieren (bessere Shop Performance). Gibt ja genug Tools online hierfür.

    Ich hoffe es hilft denen die das selbe Problem haben.


    8 Mal editiert, zuletzt von Siggit (20. Mai 2014 um 12:19)