Изменяем внешний вид шаблона vamshop css свойствами margin и float

[support 447]

В данной статье я просто покажу немного примеров, как можно менять внешний вид шаблона, используя исключительно 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.