Moushe.ru

Блог обо всём

OcStore 1.5.4 Bootstrap template (5 часть)



Сегодня мы с вами переделаем блок категорий.

bootsme

Список задач на сегодня:

1. Переделаем блок категорий

2. Дополним css

Приступим:

1. Откроем файл ../catalog/view/theme/bootsmy/template/module/category.tpl и вместо этого кода (1-31):

<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<div class="box-category">
<ul>
<?php foreach ($categories as $category) { ?>
<li>
<?php if ($category['category_id'] == $category_id) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if ($category['children']) { ?>
<ul>
<?php foreach ($category['children'] as $child) { ?>
<li>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>

вставим этот:

<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header"><?php echo $heading_title; ?></li>
<li class="divider"></li>
<?php foreach ($categories as $category) { ?>
<li>
<?php if ($category['category_id'] == $category_id) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if ($category['children']) { ?>
<ul>
<?php foreach ($category['children'] as $child) { ?>
<li>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>

2. Откроем файл ../catalog/view/theme/bootsmy/stylesheet/stylesheet.css и
изменим эти строки (13-17):

a, a:visited, a b {
color: #38B0E3;
text-decoration: underline;
cursor: pointer;
}

на эти:

a, a b {
color: #38B0E3;
text-decoration: underline;
cursor: pointer;
}

после этих строк (21-30):

/* bootstrap */
address {
position: absolute;
top: 15px;
left: 290px;
font-family: Verdana;
}
.navbar a:hover {
background: url('../image/fonnavbar.png');
}

вставим эти:

.sidebar-nav > ul > li ul {
display: none;
list-style: none;
}
.sidebar-nav > ul > li a.active {
font-weight: bold;
}
.sidebar-nav > ul > li a.active + ul {
display: block;
}
.sidebar-nav > ul > li ul > li > a {
text-decoration: none;
display: block;
}
.sidebar-nav > ul > li ul > li > a.active {
font-weight: bold;
}

смотрим на результат:

bootsme

не так уж и плохо. Улыбка

2 Комментария

  1. Подскажите:
    У меня
    a, a:visited, a b {
    color: #38B0E3;
    text-decoration: underline;
    cursor: pointer;
    }
    строка с 35-
    А
    этих строк и вовсе нет
    /* bootstrap */
    address {
    position: absolute;
    top: 15px;
    left: 290px;
    font-family: Verdana;
    }
    .navbar a:hover {
    background: url(‘../image/fonnavbar.png’);
    }

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика