Opencart Polska

[borubar]

Wersja 151.
Mam na razie standardowy layout i chciałbym go zmienić. Otóż pasek, który istnieje miałby być zastąpiony trzema w tej same linii, ale tak, by na każdym wyświetlała się inna kategoria. I od razu rodzi się kolejne pytanie gdzie, jak to zrobić? Bo teraz mam 3 główne kategorie, a jak będę chciał dodać kolejne?
Załącznik pokazuje o co mi chodzi.
Biżuteria, Odzież, Zaproszenia miałyby być na tych osobnych paskach/kwadratach, obok siebie, rozciągnięte po szerokości strony.

Jeśli ktoś podjął by się roboty za kasę, nie szukam frajerów, proszę o kontakt na PM.

[adikon.oc]

Nie znam złotego środka aby CSS mógł automatycznie rozciągać divy po całej stronie,
ale udało bez najmniejszego problemu osiągnąć efekt jaki zamieściłem na obrazkach.


edytuj catalog/view/theme/default/stylesheet/stylesheet.css
znajdz

Kod: Zaznacz cały

#menu {
   width: auto;
   background: #585858;
   border-bottom: 1px solid #000000;
   height: 37px;
   margin-bottom: 15px;
   -webkit-border-radius: 5px 5px 5px 5px;
   -moz-border-radius: 5px 5px 5px 5px;
   -khtml-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
   -webkit-box-shadow: 0px 2px 2px #DDDDDD;
   -moz-box-shadow: 0px 2px 2px #DDDDDD;
   box-shadow: 0px 2px 2px #DDDDDD;
   padding: 0px 5px;
}

zamień na

Kod: Zaznacz cały

#menu {
   width: auto;
   background: #585858;
   border-bottom: 1px solid #000000;
   height: 37px;
   margin-bottom: 15px;
   -webkit-border-radius: 5px 5px 5px 5px;
   -moz-border-radius: 5px 5px 5px 5px;
   -khtml-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
   -webkit-box-shadow: 0px 2px 2px #DDDDDD;
   -moz-box-shadow: 0px 2px 2px #DDDDDD;
   box-shadow: 0px 2px 2px #DDDDDD;
   padding: 0px 5px;
   float: left;
   margin-right: 20px;
}

dodaj także w tym pliku (może być na końcu)

Kod: Zaznacz cały

.clearfix {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

/* IE hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* IE hack */

edytuj catalog/view/theme/default/template/common/header.tpl
znajdz

Kod: Zaznacz cały

<?php if ($categories) { ?>
<div id="menu">
  <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
    <?php } ?>
  </ul>
</div>
<?php } ?>

i zamień na

Kod: Zaznacz cały

<?php if ($categories) { ?>
<?php foreach ($categories as $category) { ?>
<div id="menu">
  <ul>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
      <?php if ($category['children']) { ?>
      <div>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      </div>
      <?php } ?>
    </li>
  </ul>
</div>
<?php } ?>
<div class="clearfix"></div>
<?php } ?>

na sam koniec edytuj catalog/view/javascript/common.js
znajdz

Kod: Zaznacz cały

$(this).css('margin-left', '-' + (i + 5) + 'px');

zamień na

Kod: Zaznacz cały

$(this).css('margin-left', '0px');

powinien wyjść końcowy efekt taki jaki jest na obrazkach i nie ma problemu przy dodawaniu kolejnych kategorii czy podkategorii.

pozdrawiam

[borubar]

ok, dzięki, na pewno to pozmieniam.

A powiedz jak powiększyć czcionkę na tych nowych buttonach? Bo ta ze skryptu gotowego jest ciut za mała i do tego nie jest pogrubiona.
Ewenatualnie jakbyś mógł podać gdzie zmienić rozmiar tych buttonów, tzn topowego paska kategorii.


Ps. wielkie dzięki za udostępnienie Twojej wiedzy, jest naprawdę przydatna.

[adikon.oc]

szukaj w catalog/view/theme/default/stylesheet/stylesheet.css

Kod: Zaznacz cały

#menu > ul > li > a {
   font-size: 13px;
   color: #FFF;
   line-height: 14px;
   text-decoration: none;
   display: block;
   padding: 12px 15px 11px 15px;
   z-index: 6;
   position: relative;
}

czcionke zmieniasz poprzez zwiększenie cyfry przy font-size: 13px;, np. font-size: 15px;
a pogrubienie można zrobić przez dodanie do kodu wyżej wstawki: font-weight: bold;

[borubar]

szukaj w catalog/view/theme/default/stylesheet/stylesheet.css

Kod: Zaznacz cały

#menu > ul > li > a {
   font-size: 13px;
   color: #FFF;
   line-height: 14px;
   text-decoration: none;
   display: block;
   padding: 12px 15px 11px 15px;
   z-index: 6;
   position: relative;
}

czcionke zmieniasz poprzez zwiększenie cyfry przy font-size: 13px;, np. font-size: 15px;
a pogrubienie można zrobić przez dodanie do kodu wyżej wstawki: font-weight: bold;

Dzięki. Trochę źle się wysłowiłem, bo wiem jakich atrybutów użyc do zwiększenia czcionki, zastanawiałem się gdzie to zrobić.

[borubar]

kurna coś mi nie poszło, bo menu kategorii porypało się troszkę.
Adikon możesz zerknąć co zrobiłem nie tak?

[adikon.oc]

daj link do sklepu bo nie mam