Perfecto CMS - Система управления контентом
  • Русский язык
  • English version
Вход на сайт
Регистрация
Online документация
Online документация
Вы можете найти лучшие практичные процедуры по настройки, которые помогут вам лучше спланировать свои сайты.

Как оформлять и перемещать блоки

2,399 просмотров / 02 Фев 2015 обновлено

Здравствуйте, сегодня в нашей короткой инструкции мы научимся оформлять и перемещать левый блок навигации сайта созданного на платформе Perfecto CMS.

Как изменить расположение блоков  - Шаг 1

Как переместить блок с навигацией

Как вы помните в стандартном дизайне сайта на платформе Perfecto CMS вспомогательный блок находиться с левой стороны, чтобы изменить его месторасположение нам понадобиться открыть файл style.css, который находится в папке /templates/frontend/default/css/. Далее найти в нем вот эти строки кода:

#sideLeft{
float:left;
width:250px;
margin-left:-100%;
position:relative;
}

Далее изменить в этом коде всего лишь один параметр, это - float:left;, который и определяет в какой именно стороне будет находиться наша навигация, вписать значение float:right;

#sideLeft{
float:right;
width:250px;
margin-left:-100%;
position:relative;
}

Сохранив изменения в файле style.css загрузите его на хостинг (если работаете удаленно), и замените старый файл style.css.

После этого вы сможете увидеть, что ваше меню с навигацией переместилась в правую сторону сайта, но при этом, основной контентный блок остался на своем месте. Получится что наш навигационный блок 'заползет' над основным контентом сайта.

Как изменить расположение блоков  - Шаг 2

Не беспокойтесь, для решения этого мелкого недоразумение - нам всего лишь нужно снова открыть файл style.css, найти в нем строчку:

#content{
padding:10px 0 10px 270px;
margin-bottom:10px;
}

И изменить в нем параметры padding:

#content{
padding:10px 265px 0px 0px;
margin-bottom:10px;
}

Сохранив изменения в файле style.css загрузите обратно на ваш хостинг (если работа делается удаленно)

Теперь все будет выглядит именно так, как мы и ожидали изначально.

Как изменить расположение блоков  - Шаг 3

Как оформить блоки в Perfecto CMS

В заключении как мы и обещали, будем учится изменять внешний вид блоков - на сайте на платформе Perfecto CMS. Для этого нам нужно открыть файл style.css и опять найти в нем строки отвечающих за внешний облик самих блоков, далее изменить их, сохранить, и перекинуть файл style.css обратно на свой хостинг.

Строки кода в файле style.css отвечающие за внешний вид самих блоков:

Как изменить расположение блоков  - Шаг 4

Стиль для блоков это:

#sideLeft .sideBox{
margin:20px 0;
background:#fff;
-moz-border-radius:15px 0;
-webkit-border-radius:15px 0;
border-radius:15px 0;
box-shadow:0 2px 2px #ddd;
}

Стиль для заголовка блоков:

#sideLeft .sideBox h3{
font-size: 12px;
margin-bottom: 5px;
padding: 7px 10px;
color: #fff;
-moz-border-radius: 15px 0;
-webkit-border-radius: 15px 0;
border-radius: 15px 0;
text-transform: uppercase;
background: #309fcc;
background: url(images/leftH3.jpg);
font-weight: normal;
}

Для изменение месторасположения блоков – по вертикали, изменяем:

#sideLeft .sideBox{
margin:20px 0;
background:#fff;
-moz-border-radius:15px 0;
-webkit-border-radius:15px 0;
border-radius:15px 0;
box-shadow:0 2px 2px #ddd;
}

на:

#sideLeft .sideBox{
margin:62px 0 -45px;
background:#fff;
-moz-border-radius:15px 0;
-webkit-border-radius:15px 0;
border-radius:15px 0;
box-shadow:0 2px 2px #ddd;
}

Сохраняем изменения в файле style.css и загружаем. После данных манипуляций получаем:

Как изменить расположение блоков  - Шаг 5

При необходимости редактируем также выделенные параметры в коде:

#sideLeft .sideBox{
margin:20px 0;
background:#fff;
-moz-border-radius:15px 0;
-webkit-border-radius:15px 0;
border-radius:15px 0;
box-shadow:0 2px 2px #ddd;
}

background:#fff; для смены фона блоков, значение #fff;

Для отключения сглаживания углов блока удаляем строчки:

-moz-border-radius:15px 0;
-webkit-border-radius:15px 0;
border-radius:15px 0;

Как изменить стили блоков  - Шаг 1

Для редактирования заголовков, соответственно в коде:

#sideLeft .sideBox h3{
font-size: 12px;
margin-bottom: 5px;
padding: 7px 10px;
color: #fff;
-moz-border-radius: 15px 0;
-webkit-border-radius: 15px 0;
border-radius: 15px 0;
text-transform: uppercase;
background: #309fcc;
background: url(images/leftH3.jpg);
font-weight: normal;
}

Вы можете изменить размер шрифта в заголовке - font-size: 12px;

А также удалить строки отвечающие за сглаживание углов в заголовке:

-moz-border-radius: 15px 0;
-webkit-border-radius: 15px 0;
border-radius: 15px 0;

Сменить фон заголовка: background: url(images/leftH3.jpg);

Заменить цвет шрифта: color: #fff; и все остальные параметры.

#sideLeft .sideBox h3{
font-size:12px;
margin-bottom:5px;
padding:7px 10px;
color:#fff;
text-transform:uppercase;
background:rgb(0, 96, 134);
background:url(images/leftH3.jpg);
font-weight:normal;
}

Все зависит от ваших познаний в языке css. Добавляйте свои собственные параметры в css стили, изменяйте место расположения любых элементов, меняйте их шрифт, все это позволяет сделать css!

Вот как в итоге может выглядеть наши блоки с навигацией после прочтения сегодняшней инструкции:

Как изменить стили блоков  - Шаг 2

Заказ дизайна
Уникальное предложение для клиентов Perfecto CMS. Если вы хотите оригинальный дизайн дайте нам знать и мы с вами свяжемся для обсуждения деталей.
Для минимизации времени на обсуждение и разработку, рекомендуем скачать бланк, заполнить его и отправить нам на электронный адрес: Our email
Приметная оценка проекта
600 USD

Ваш браузер устарел!

Пожалуйста, скачайте последнюю версию Internet Explorer
Кстати, мы рекомендуем использовать другой браузер ;)