Jump to content

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


Recommended Posts

support

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

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

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

css1.png

т.е. левая колонка, центр, правая, ширина шаблона 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

css2.png

Пример 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.

css3.png

Пример 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.

css4.png

Пример 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.

css5.png

Пример 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.

css6.png

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...