Anleitung EyeCandy 3-spaltig

Thema wurde von Steffen (indiv-style.de), 6. Januar 2013 erstellt.

  1. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    #1 Steffen (indiv-style.de), 6. Januar 2013
    Zuletzt bearbeitet: 6. Januar 2013
    Um das EyeCandy-Templates 3-spaltig zu machen sind nur wenige Eingriffe notwendig!

    dreispaltig.jpg

    Suche in der /templates/EyeCandy/index.html nach:
    HTML:
                <div id="main" class="clearfix">
                    {if $BANNER}<div id="shop_top_banner">{$BANNER}</div>{/if}
                    <div id="main_inside">
                        {$IMGSLIDER}
                        {$main_content}
                                        
                    </div>
                </div>
    
                <div id="left" class="clearfix">
                    {gm_menuboxes first=1 last=100 html='<div id="gm_box_pos_[COUNTER]" class="gm_box_container">[CONTENT]</div>'}
                    {gm_menuboxes first=101 last=200 html='<div id="gm_box_pos_[COUNTER]" class="gm_box_container">[CONTENT]</div>'}
                </div>
    ersetze es mit:
    HTML:
                            <div id="dreiright" class="clearfix">
                    {gm_menuboxes first=101 last=200 html='<div id="gm_box_pos_[COUNTER]" class="gm_box_container">[CONTENT]</div>'}
                            </div>
                <div id="main" class="clearfix">
                    {if $BANNER}<div id="shop_top_banner">{$BANNER}</div>{/if}
                    <div id="main_inside">
                        {$IMGSLIDER}
                        {$main_content}
                                        
                    </div>
                </div>
    
                <div id="left" class="clearfix">
                    {gm_menuboxes first=1 last=100 html='<div id="gm_box_pos_[COUNTER]" class="gm_box_container">[CONTENT]</div>'}
                </div>
    dann nur noch die angehängte dreispaltig.css in den Ordner /templates/EyeCandy/usermod/css kopieren. Cache löschen und dann kann man mit dem StylesEditor die Boxen nach rechts verschieben!

    Wie immer!!! Keine Garantie!! Vorher alle Daten und Datenbanken sichern!!

    Sollte ich irgend einen Style vergessen haben, gebt ne kleine Info!
     

    Anhänge:

  2. balou...sagt "Auf Wiedersehn"

    balou...sagt "Auf Wiedersehn" Erfahrener Benutzer

    Registriert seit:
    7. Juni 2011
    Beiträge:
    1.766
    Danke erhalten:
    374
    Danke vergeben:
    134
    #2 balou...sagt "Auf Wiedersehn", 6. Januar 2013
    Zuletzt bearbeitet: 6. Januar 2013
    und Du mal eben so. RESPEKT
     
  3. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Ja, das hab ich gesehen! ;)

    Hab analysiert, und den Termin auf heute gesetzt! ;) ;) ;)
     
  4. Stephan Ho.

    Stephan Ho. Erfahrener Benutzer

    Registriert seit:
    12. Juli 2012
    Beiträge:
    178
    Danke erhalten:
    37
    Danke vergeben:
    16
    Das wäre jetzt ungerecht ...
    Es in den Shop standardmäsig zu integrieren heisst für Gambio vermtl. auch das sich die Spaltenbreiten etc. automatisch beim umschalten anpassen?
    Ich finde es wichtig, für alle die es mit Steffen's Lösung umsetzten wollen, zu wissen das noch einiges an Anpassung notwendig ist und es nicht damit getan ist einfach die Boxen rüber zu schieben.

    Aber grundsätzlich funzt es- Super Sache,
    Danke Steffen.
     
  5. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    #5 Steffen (indiv-style.de), 6. Januar 2013
    Zuletzt bearbeitet: 7. Januar 2013
    Welche Anpassungen sind noch notwendig??? Versteh ich nicht ganz, da die betreffenden Styles in der dreispaltig.css schon drin sind.
     
  6. Stephan Ho.

    Stephan Ho. Erfahrener Benutzer

    Registriert seit:
    12. Juli 2012
    Beiträge:
    178
    Danke erhalten:
    37
    Danke vergeben:
    16
    Bei mir lagen die die Boxen über dem Content,
    Formularfelder ragten in die Boxen .....

    Die css ist im "usermod" verzeichnis, Cache geleert ???

    Ich wollte damit auch nicht Deine Arbeit kritisieren sondern darauf aufmerksam machen das es unter Umständen nicht damit getan ist einfach Deine Anpassung durchzuführen.

    Ich sehe schon wieder diese Postings...

    Habe mir den Shop zerschossen,
    unlösbares Problem- jetzt ist der Slider zu breit,
    wie kann ich wieder zurück zum Eye Candy, Sicherungen habe ich keine ......
     

    Anhänge:

  7. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Danke für den Tip! Den Anmeldeprozess hatte ich nicht beachtet. Werde dies noch mit in die CSS reinpacken.
     
  8. Stephan Ho.

    Stephan Ho. Erfahrener Benutzer

    Registriert seit:
    12. Juli 2012
    Beiträge:
    178
    Danke erhalten:
    37
    Danke vergeben:
    16
    Ein Problem habe ich noch mit den Boxen auf der rechten Seite.

    Diese kleben direkt am Rand- siehe Bild.
    311 2013-01-14, 17_43_43.jpg
    Egal welchen CSS Befehl ich anwende (margin, padding), die Box will nicht vom äussersten rechten Rand weg.
    Ich hätte gerne 5px Zwischenraum.

    Ich habe versucht diesen Bereich der dreispaltig.css zu editieren- kein Erfolg

    #dreiright {
    float: right;
    margin: 10px 0px;
    position: relative;
    width: 200px;
    }

    Dann habe ich natürlich auch versucht im Style Edit bzw. dort im css Editor entweder direkt die Box zu verrücken oder auch beim Hintergrund einen Randabstand einzugeben- kein Erfolg.

    Weiß jemand Rat?
     
  9. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Link???
     
  10. Stephan Ho.

    Stephan Ho. Erfahrener Benutzer

    Registriert seit:
    12. Juli 2012
    Beiträge:
    178
    Danke erhalten:
    37
    Danke vergeben:
    16
  11. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    in dreispaltig.css

    #dreiright {
    float: right;
    margin: 10px 0 ;
    position: relative;
    width: 200px;
    padding-right: 10px;
    }
     
  12. Stephan Ho.

    Stephan Ho. Erfahrener Benutzer

    Registriert seit:
    12. Juli 2012
    Beiträge:
    178
    Danke erhalten:
    37
    Danke vergeben:
    16
    Vielen Dank Steffen.

    Es ist mir zwar nicht klar warum aber ich habe folgenden Effekt.
    Genau den Befehl hatt ich angewandt, allerdings mit 3px Abstand.
    Die Box klebt dann aber ganz rechts.
    Deswegen hatte ich keine Verschiebung bemerkt.
    Gebe ich 5px Abstand ein so ist der effektive Abstand genau 1px???
    Derzeit sind links 1px und rechts 5px eingestellt und auf beiden Seiten ist der Abstand derselbe???

    Dies nur als Hinweis für Dich- mein Problem ist damit gelöst.
     
  13. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Das liegt an deiner Änderung! Du hast den #container mit 1000px und den #container_inner auch mit 1000px! Im Standart ist der #container_inner mit 980px und margin: 10px; !!!
    standart3sp.jpg

    Man sollte sich bei Änderungen die Standart-Logik des Templates zu Nutze machen oder eine eigene Struktur aufbauen, wo solche Efekte berücksichtigt sind. ;)
     
  14. Stephan Ho.

    Stephan Ho. Erfahrener Benutzer

    Registriert seit:
    12. Juli 2012
    Beiträge:
    178
    Danke erhalten:
    37
    Danke vergeben:
    16
    Vor allem sollte man dran denken das man das geändert hat.:confused:
    Überlegt habe ich ja aber die grauen Zellen haben wohl nicht so ganz ...... :rolleyes:
     
  15. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    hihi, das nennt man "Wald -> Bäume Syndrom" ;) ;) ;)
     
  16. Stephan Ho.

    Stephan Ho. Erfahrener Benutzer

    Registriert seit:
    12. Juli 2012
    Beiträge:
    178
    Danke erhalten:
    37
    Danke vergeben:
    16
    Ja wahrscheinlich ist mir so ein Baum auf die Birne gefallen :D

    PS: wir müllen übrigens grade das Forum zu :p
     
  17. softairelite

    softairelite Aktives Mitglied

    Registriert seit:
    4. Mai 2012
    Beiträge:
    40
    Danke erhalten:
    0
    Danke vergeben:
    37
    HI,

    habe den Shop auf 1200 verbreitert.

    Leider rutscht der Main Inner nicht nach links mit.

    Weiß jemand warum?

    SNAG-0000.png

    Danke,

    Philipp
     
  18. Steffen (indiv-style.de)

    Steffen (indiv-style.de) G-WARD 2013/14/15/16

    Registriert seit:
    30. Juni 2011
    Beiträge:
    5.143
    Danke erhalten:
    1.466
    Danke vergeben:
    452
    Beruf:
    Systemadmin, Webentwickler bei Indiv-Style
    Ort:
    PhpStorm
    Weil der mit float:right; bestückt ist. Wenn du die Breite vergrösserst, musste auch die ganzen(nicht nur main_inner) Breiten auch vergrössern.
    shopping_cart, account usw.
     
  19. softairelite

    softairelite Aktives Mitglied

    Registriert seit:
    4. Mai 2012
    Beiträge:
    40
    Danke erhalten:
    0
    Danke vergeben:
    37
    Danke STeffen, habs rausgenommen . ;-)

    Gruß,

    Philipp
     
  20. SusannMe

    SusannMe Aktives Mitglied

    Registriert seit:
    21. Januar 2013
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    7
    Hallo Steffen,
    ich verfolge Deine Beiträge mit riesen Augen, was da alles so möglich zu sein scheint, ist ja enorm (ICH ANFÄNGER)

    Ehm, jetzt hab ich mir das in dem html Dings mal angeschaut .... aber es sieht bei mir nicht ganz so aus, wie Du das da aufgeschrieben hast.

    BZW. stehen die beiden (main und left) wirklich so untereinander? Oder steht da noch Haufen Zeug dazwischen?

    Bei mir sieht das so aus:

    Zeile 150

    <divid="main" class="clearfix">


    <divid="main_inside">



    <divid="jcarousel_box" class="jcarousel-skin-tango" style="width:314px; height:235px;">

    Zeile 390


    <divid="left" class="clearfix">


    <divid="gm_box_pos_2" class="gm_box_container">


    <divid="menubox_categories_box" class="c_categories content-box white clearfix">


    <divid="menubox_categories_box_head" class="c_boxhead content-box-header clearfix">


    <divclass="content-box-header-inner">



    Kannst Du mir einen Tip geben.

    LG
    Susann