Hilfe beim Template anpassen BS24 Ocean

[gun]

Hallo Leute,

ich habe mir vor ca. 10 Monaten bei BS24 das Template "Ocean" gekauft
Link zum DemoShop: http://techdemo.bannershop24.de/index.php?tpl=bs24_ocean

Nun habe ich gesehen, dass die mittlerweile neue Design´s haben. Und bei Template Redmond gibt es 2 Sachen die ich gerne bei mir übernehmen würde.
Link zum DemoShop: http://demo13.bannershop24.de/index.php?tpl=bs24_redmond

Ich habe zu allen folgenden Punkten ein Screenshot beigelegt, damit es leichter zum nachvollziehen ist.

1. Die Seite breiter machen - So schaut es momentan aus -
[ Für Gäste sind keine Dateianhänge sichtbar ]

So würde ich es gerne haben
[ Für Gäste sind keine Dateianhänge sichtbar ]

Habe in der "bootstrap-responsive.min" folgenden Eintrag gefunden

Code: CSS  [Auswählen]

.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}

Wenn ich hier die Größe ändere habe ich auf dem ersten Blick den erwünschten Erfolg. Reicht diese Änderung hier oder habe ich noch was vergessen ?

2. Nachdem ich den Container im gesamten etwas breiter gemacht habe würde ich gerne links die Login Box, WhatsNewBox usw. etwas dünner machen, damit wirklich der Hauptcontent den größten Platz einfängt und ein Eyecather wird.

Habe mit Firebug im Browser den Content mal in die Breite gezogen, damit ich euch zeigen kann was ich meine
[ Für Gäste sind keine Dateianhänge sichtbar ]

3. Und dadurch, dass links die NavBox weg fallen würde müsste ich die NavBox im Top Menü beim scrollen oben anheften lassen, damit der Kunde jederzeit die Möglichkeit in den Kategorien zu wechseln.

Hier ein Beispielbild von den Redmond Design
3.1 Ausgangssituation
[ Für Gäste sind keine Dateianhänge sichtbar ]

3.2 Im gescrollten Zustand
[ Für Gäste sind keine Dateianhänge sichtbar ]

Das wären diese zwei Änderungen die ich gerne anpassen würde. Und ich möchte wegen diesen Zwei Sachen nicht nochmal das gesamte Template kaufen, da der Rest beim Ocean Template mir sehr gut gefällt.

Kann mir jemand dabei helfen oder mir zumindest Tipps geben wo ich anpacken muss um diese Änderung zu erreichen ? Das wäre echt spitze
Falls jemand eine Ahnung hat was ich da tun muss einfach bescheid geben, was du von mir noch an Infos brauchst

Linkback: https://www.modified-shop.org/forum/index.php?topic=34900.0

[gun]

EDIT: Habe die BOX links nun dünner gemacht.

Ein Codeauschnitt in der index.html schaut so aus

Code: PHP  [Auswählen]

 <div class="span2 pull-left leftcolumn">
       
          {$box_CATEGORIES}
            {*$box_ADMIN*}
                    <div class="hidden-phone">
          {*$box_HISTORY*}
          </div>
          {$box_LOGIN}
          {*$box_ADD_QUICKIE*}
          <div class="hidden-phone">
          {*$box_LAST_VIEWED*}
          </div>
          {$box_SPECIALS}
         
            <div class="well well-small adbanner">
         {if $BANNER}{$BANNER|replace:'window.open':'window.self'}{/if}
          </div>
          {*$box_SOCIAL*}
          {*$box_REVIEWS*}
          <div class="hidden-phone">
              {$box_WHATSNEW}            
          </div>
          {$box_BESTSELLERS}
          {$box_CURRENCIES}
          {*$box_MANUFACTURERS_INFO*}
         
        </div><!-- /left -->

Standard war "div class="span3 ..."
Einfach in "div class="span2 ..." abändern und die Box wir dünner.
Dann in der bootstrap-responsive.min .content auf 1800px stellen und schon schaut das ganze ganz ordentlich aus ...

Ich muss jetzt nur noch herausfinden wie ich diesen Spalt zwischen den Boxen weg bringe indem ich die Content Box weiter nach links raus ziehe
[ Für Gäste sind keine Dateianhänge sichtbar ]

[gun]

EDIT:

Wenn ich in der stylesheet.min

Code: PHP  [Auswählen]

.content {
margin: -20px 0px 20px -150px;
}

die Margin so setze, dann verschiebt sich der content genauso wie ich es brauche. Aber ist die Lösung "sauber" ? Oder könnte ich da wo anders mal Probleme bekommen ?

Siehe Screenshot
[ Für Gäste sind keine Dateianhänge sichtbar ]

[gun]

Wirklich niemand der mir den ein oder anderen Tipp geben ?

Das mit der -margin funktioniert natürlich nicht, da ich responsiv Probleme bekomme (war klar wie konnte ich das übersehen)

[Bonsai]

Geht schon. Darfst das negative margin eben nur bei bestimmten Auflösungen nehmen.

Befasse Dich mal mit Media queries!
https://wiki.selfhtml.org/wiki/CSS/Media_Queries

[gun]

Danke .... das werde ich mir auf jedenfall bei Zeiten genauer anschauen um evtl damit in Zukunft besser arbeiten zu können.

Nur denke ich, dass ich hierzu dennoch etwas Hilfe benötige, da es doch etwas komplizierter verschachtelt ist im Shop und ich trau mich da nicht ganz alleine ran.

[Bonsai]

Einfaches Beispiel:

Ab 600pixel Bildschirmbreite gilt das:

Code: CSS  [Auswählen]

@media (min-width: 600px) {
        .autors_info_image, .autors_thumbnail_image {
                float: left;
        }
}
 

Unter 600 px gilt das:

Code: CSS  [Auswählen]

@media (max-width: 599px) {
        .autors_block {
                text-align: center;
        }
}
 

Lässt sich auch kombinieren:

Code: CSS  [Auswählen]

@media (min-width: 500px) and (max-width: 800px) {
     /* Das CSS hier wird nur zwischen 500px und 800px ausgeführt
}

[gun]

ich werd mir das heute Abend mal in ruhe anschauen

[gun]

Habe hier ein Code gefunden, welches die Funktion für den Menüheader gewährleisten soll.
Soadass der Header oben fixiert wird, wenn gescrollt wird.

Code: PHP  [Auswählen]

function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) {
        $div.css({'position': 'fixed', 'top': '0', 'width': '100%'});
    }
    else {
        $div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);

Wenn ich nur eine "normale" Webseite hätte mit einer index wüsste ich wo ich den code rein tue doch beim Shop bin ich mir nicht so sicher -.-
In die general.js ?

[Bonsai]

Könnte da rein ... ich tendiere aber solche Dinge im Footer zu laden ..... bezüglich blockierende Ressourcen ....
Oder bei HTML so:
http://www.w3schools.com/tags/att_script_defer.asp

[gun]

Hmmm so langsam verzweifle ich -.-
Immer wenn ich was ändern zerschiess ich was anderes. Da hängen so viele Sachen zusammen und ich hab einfach nicht den Überblick.

[Roberto75]

Hallo gun,

warum fragst du nicht den Verkäufer des Templates, bevor du lange experimentieren musst? Habe ich auch gemacht und Antwort erhalten.

Gruß

Robert

[gun]

Jop, daran hab ich auch schon gedacht und werde es wohl so tun.