Личный кабинет - оформление

Сегодня решил, что меня не устраивает стандартный вид личного кабинета в OpenCart.

Файлы, которые будут редактироваться:

1.

/catalog/view/theme/default/template/account/account.tpl

2.

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

Все это будет делаться на OpenCart 1.5.4.1

1. Первое что мы сделаем - это откроем файл аккаунта:

/catalog/view/theme/default/template/account/account.tpl

В нем находим:

<h1><?php echo $heading_title; ?></h1>

перед ним вставляем:

<div id="content-glob">

ищем после того же:

<h1><?php echo $heading_title; ?></h1>

вставляем:

<div class="content-my-account">

далее ищем:

<h2><?php echo $text_my_account; ?></h2>

заменяем его на:

<div class="content-title"><?php echo $text_my_account; ?></div>

2. И так нужно сделать с остальными блоками. Должно получится что то такое:

<div class="content-my-account">

<div class="content-title"><?php echo $text_my_account; ?></div>
<br><a href="<?php echo $edit; ?>"><?php echo $text_edit; ?></a>
<br><a href="<?php echo $password; ?>"><?php echo $text_password; ?></a>
<br><a href="<?php echo $address; ?>"><?php echo $text_address; ?></a>
<br><a href="<?php echo $wishlist; ?>"><?php echo $text_wishlist; ?></a>
</div>

<div class="content-my-orders">
<div class="content-title"><?php echo $text_my_orders; ?></div>
<br><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a>
<br><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a>
<?php if ($reward) { ?>
<br><a href="<?php echo $reward; ?>"><?php echo $text_reward; ?></a>
<?php } ?>
<br><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a>
<br><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a>
</div>

<div class="content-my-newsletter">
<div class="content-title"><?php echo $text_my_newsletter; ?></div>
<a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a>
</div>

!!! Примечание: !!! Обратите внимание на классы div:

<div class="content-my-account">
<div class="content-my-orders">
<div class="content-my-newsletter">

эти классы будут задавать позиционирование, а также оформление и еще 100 и 1 свойство блоков "Учетная запись", "Мои заказы" и "Подписка". Эти все классы будут вписаны в таблицу стилей в третьем пункте.

3. Работаем с файлом стилей:

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

находим:

/* content */

после него уставляем:

#content-glob {
 position: relative;
 width: 980px;
 text-align: left;
}

будет уместно описать: этот класс, который имеет название: #content-glob будет выступать в роли родителя для остальных блоков. Он нужен исключительно для позиционирование других блоков. Поэтому он имеет только 3 свойства: размер 980 - это стандартный размер OpenCart шаблона; position - позиционирование (кому нужно прочтите свойства этого свойства... тавтология блин); text-align: left - позиция текста слева.
можете закоментировать #content .content так как он уже не будет использоваться (или вообще удалить). Что бы закоментировать нужно вначале поставить /* и в конце после } поставить */

И так, продолжаем. Далее я выложу уже адаптированные свойства блоков. Кому нужно - изменяйте на свое усмотрение.

#content .content-my-account {
 position: absolute;
 padding: 0px 10px 10px 10px;
 overflow: auto;
 left: 170px;
 border: 1px solid #EEEEEE;
 -webkit-border-radius: 7px 7px 7px 7px;
 -moz-border-radius: 7px 7px 7px 7px;
 -khtml-border-radius: 7px 7px 7px 7px;
 border-radius: 7px 7px 7px 7px;
 -webkit-box-shadow: 0px 2px 3px #DDDDDD;
 -moz-box-shadow: 0px 2px 3px #DDDDDD;
 box-shadow: 0px 2px 3px #939393;
}

#content .content-my-orders {
 position: absolute;
 left: 0px;
 padding: 0px 10px 10px 10px;
 overflow: auto;
 border: 1px solid #EEEEEE;
 -webkit-border-radius: 7px 7px 7px 7px;
 -moz-border-radius: 7px 7px 7px 7px;
 -khtml-border-radius: 7px 7px 7px 7px;
 border-radius: 7px 7px 7px 7px;
 -webkit-box-shadow: 0px 2px 3px #DDDDDD;
 -moz-box-shadow: 0px 2px 3px #DDDDDD;
 box-shadow: 0px 2px 3px #939393;
}

#content .content-my-newsletter {
 position: absolute;
 left: 410px;
 padding: 0px 10px 10px 10px;
 overflow: auto;
 border: 1px solid #EEEEEE;
 -webkit-border-radius: 7px 7px 7px 7px;
 -moz-border-radius: 7px 7px 7px 7px;
 -khtml-border-radius: 7px 7px 7px 7px;
 border-radius: 7px 7px 7px 7px;
 -webkit-box-shadow: 0px 2px 3px #DDDDDD;
 -moz-box-shadow: 0px 2px 3px #DDDDDD;
 box-shadow: 0px 2px 3px #939393;
}

#content .content-title {
 padding: 10px 0px 0px 0px;
 text-align: center;
 font-size: 13pt;
 font-weight: bold;
 text-color: #808080;
}

Несколько букв о том, что было написано выше:

1 2 3 4

#content .content-my-account #content .content-my-orders #content .content-my-newsletter #content .content-title

1. этот класс отвечает за оформление блока "Учётная запись";
2. этот класс отвечает за оформление блока "Мои заказы";
3. этот класс отвечает за оформление блока "Подписка";
4. этот класс отвечает за оформление надписей: "Учётная запись" "Мои заказы" "Подписка".

Урок закончен. Результат: