::cck::55::/cck::
::introtext::

В этой статье показано - как сделать стандартный шаблон Beez_20 "резиновым". Чтобы независимо от разрешения экрана, сайт занимал всю ширину экрана. Данный способ проверен на Joomla 1.7 и Joomla 2.5

::/introtext::
::fulltext::

Если используется файловый менеджер хостинг-провайдера или FTP-менеджер, то надо найти файл стилей "наш_сайт\templates\beez_20\css\position.css". Если же используется Панель управления Joomla, то нужно перейти в Расширения -> Менеджер шаблонов

menedger shablonov m

Далее переходим в  Шаблоны -> Параметры Beez_20. Откроется окно Менеджер шаблонов: Изменить шаблон.

izmenit shablon m

Справа перечислены все Таблицы стилей шаблона Beez_20. Находим строку Изменить css/position.css и нажимаем на нее. Откроется окно Менеджер шаблонов: Изменить файл.

izmenit fajl m

Здесь мы сможем отредактировать данный файл.
Находим ширину главного div‘a. Она равна 1050px.

#all
{
margin: 0 auto;
max-width: 1050px;
padding: 0px;
text-align: left;
}

Меняем это значение на 100%.

#all
{
margin: 0 auto;
max-width: 100%;
padding: 0px;
text-align: left;
}

Затем в этом же файле находим ширину футера. Она равна 1020px.

#footer-inner
{
max-width: 1020px;
margin: 0 auto;
font-size: 0.8em;
padding: 10px 15px 15px 10px;
}

Меняем это значение на 100%.

#footer-inner
{
max-width: 100%;
margin: 0 auto;
font-size: 0.8em;
padding: 10px 15px 15px 10px;
}

Сохраняем файл и заходим на свой сайт - смотрим, что получилось. Для того, чтобы сразу увидеть результат после изменения CSS необходимо, чтобы новые стили браузер заново загрузил. Для этого нажмите Ctrl+R

Последнее что нужно сделать - это откоректировать шапку. После того как сайт растянулся на всю ширину экрана картинка шапки сместилась вправо, а с лева появился синий прямоугольник. Это произошло потому что ширина картинки составляет 1060px. Картинка шапки находится в папке “наш_сайт\templates\beez_20\images\personal\personal2.jpg”. Можно создать свою картинку большего размера и заменить файл personal2.jpg на свой (имя файла нужно оставить personal2.jpg). Если нет подходящей картинки, то можно отключить вывод картинки в таблице стилей и вся шапка будет синего цвета.

Для отключения картинки нам нужен файл с настройками стилей, который находится по адресу "наш_сайт\templates\beez_20\css\personal.css". В нем находим:

.logoheader
{
    background:  #0c1a3e  URL(../images/personal/personal2.png) no-repeat bottom right ;
    color:#fff;
    min-height:200px;
    margin:0em 10px 0 10px !important;
}

Удаляем URL(../images/personal/personal2.png) no-repeat bottom right. Должно получиться следующее:

.logoheader
{
background: #0c1a3e;
color:#fff;
min-height:200px;
margin:0em 10px 0 10px !important;
}

Сохраняем файл. Вот и все.

::/fulltext:: ::cck::55::/cck::

Комментарии   

+1 #1 IIIIurik 19.03.2013 19:50
здраствуйте подскажите пожалуйста как можно изменить ширину левой и правой колонки?

В общем то хотел сделать примерно так - сам сайт 90% левая колонка 15% правая 10.

п.с. спасибо за статью очень помгла.
Цитировать
0 #2 Александр 31.07.2013 08:48
отлично!
Цитировать
0 #3 Спасибо! 05.10.2013 21:45
Спасибо.. Очень помогло.!
Цитировать
0 #4 Роман 04.06.2014 09:20
а как сделать шаблон резиновым?
мой маил:
Цитировать
0 #5 саша 19.03.2015 16:17
спасибо все получилось
Цитировать
0 #6 Марат 13.05.2016 17:26
Спасибо. получилось
Цитировать
0 #7 Lamer 28.08.2016 08:55
Спасибо за подсказку,сдела л))
Цитировать
0 #8 fish.ka.by 02.02.2017 11:14
не получилось.При изменении маштаба сайта в опере,фон кубиками так и остался
Цитировать

Добавить комментарий

Защитный код
Обновить

Форма входа

Яндекс.Метрика