No replies to this topic

[support]

В данной статье я просто покажу немного примеров, как можно менять внешний вид шаблона, используя исключительно css средства, а именно, меняя css свойства margin и float.

Мы будем менять только css файл /templates/vamshop/stylesheet.css, трогать html и уж тем более php код мы не будем.

Допустим, не устраивает нас стандартное отображение шаблона vamshop - рис. 1.


т.е. левая колонка, центр, правая, ширина шаблона 100%.

Пример 1.

Изменим порядок вывода колонок - поменяем местами левую и правую колонку, т.е. левую колонку поставим направо, правую колонку - налево.

Сразу скажу, что во всех примерах мы будем менять максимум четыре css класса:
div#wrapper
div#content
div#left
div#right

Для примера 1, меняем div#left на:

div#left
{
float: left;
width: 18%; /* Ширина левой колонки */
margin-left: -18%;
background: #fff;
}

а также меняем div#right на:
на:

div#right
{
float: left;
overflow: auto;
width: 18%; /* Ширина правой колонки */
margin-left: -100%;
background: #fff;
}

Просто меняет значение свойства margin-left местами.
Всё, мы поменяли местами левую и правую колонку, теперь наш шаблон выглядит так: рис. 2


Пример 2.

Сделаем порядок вывода колонок - центр, затем левая колонка, затем правая.

Открываем файл /templates/vamshop/stylesheet.css и меняем div#content на:

div#content
{
margin-right: 36%; /* отступ центра от боковых колонок */
}

а также меняем div#left на:

div#left
{
float: left;
width: 18%; /* Ширина левой колонки */
margin-left: -36%;
background: #fff;
}

Теперь наш шаблон выглядит так - рис. 3.


Пример 3.

Сделаем шаблон не "резиновый", а фиксированной ширины (800 пикселей, к примеру).

Открываем файл /templates/vamshop/stylesheet.css и добавляем стиль для div#container:

div#container
{
width: 800px;
margin: 0 auto;
}

меняем div#left на:

div#left
{
float: left;
width: 150px; /* Ширина левой колонки */
margin-left: -800px;
background: #fff;
}

меняем div#right на:

div#right
{
float: left;
overflow: auto;
width: 150px; /* Ширина правой колонки */
margin-left: -150px;
background: #fff;
}

Теперь наш шаблон выглядит так - рис. 4.


Пример 4.

Сделаем шаблон не в три колонки, а в две. Перенесём правую колонку под левую.

Открываем файл /templates/vamshop/stylesheet.css и меняем div#wrapper на:

div#wrapper
{
float: right;
width: 100%;
margin-left: -150px;
}

меняем div#content на:

div#content
{
margin-left: 150px; /* отступ центра от боковых колонок */
}

меняем div#left на:

div#left
{
float: left;
width: 150px;
background: #fff;
}

меняем div#right на:

div#right
{
float: left;
overflow: auto;
width: 150px; /* Ширина правой колонки */
clear: left;
background: #fff;
}

меняем div#footer на:

div#footer
{
clear: both;
width: 100%;
background: #f1f1f6;
border-top: 3px solid #67748B;
text-align: center;
color: #000;
}

Теперь наш шаблон выглядит так - рис. 5.


Пример 5.

Сделаем шаблон не в три колонки, а в две. Перенесём левую колонку направо, а правая колонка будет под перенесённой левой.

Открываем файл /templates/vamshop/stylesheet.css и меняем div#wrapper на:

div#wrapper
{
float: left;
width: 100%;
margin-left: -150px;
}

меняем div#content на:

div#content
{
margin-left: 150px; /* отступ центра от боковых колонок */
}

меняем div#left на:

div#left
{
float: right;
width: 150px;
background: #fff;
}

меняем div#right на:

div#right
{
float: right;
overflow: auto;
width: 150px; /* Ширина правой колонки */
clear: right;
background: #fff;
}

меняем div#footer на:

div#footer
{
clear: both;
width: 100%;
background: #f1f1f6;
border-top: 3px solid #67748B;
text-align: center;
color: #000;
}

Теперь наш шаблон выглядит так - рис. 6.