Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Красивая главная страница + меню [phpBB2]

Предыдущая тема Следующая тема Перейти вниз

Красивая главная страница + меню [phpBB2]

Сообщение автор Сказочник Зазеркалья в Чт 28 Мар - 1:34

Здравствуйте уважаемые форумчане. rose

Решила выложить небольшой туториал по созданию на портале отдельного меню с логотипом форума для phpBB2(позже выложу для других движков). Знаю что для некоторых данный туториал покажется слишком простым и неинтересным. Но я думаю найдутся люди для которых данный туториал будет всё же полезен. И так речь идёт об таком отображении главной страницы:



Инструкция:

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

Виджет с логотипом должен быть создан по таким параметрам:

Спойлер:

Аналогично с виджетами меню.

Чтобы поставить картинку в виджет, используем такой код или любой другой:
Код:
<img src="Ссылка на изображение"/>

После всего проделанного ставим виджеты в таком порядке на портал:
Спойлер:


И так теперь когда почти всё готово, измеряем ширину двух блоков вместе с логотипом:

Спойлер:

Я думаю проблем с измерением ширины не должно быть и поэтому переходим к завершающим шагам. Изображение нужно будет создать такого размера, чтобы оно было равно блокам меню и логотипу, пример:



Когда мы создали изображение полоску с нужным размером, желательно в тонкой рамке, мы выгружаем её на хостинг, а ссылку помещаем в такой код:

Код:
<img src="Ссылка на изображение"/>

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

Теперь ставим данный виджет на портал и портал будет выглядеть так в ПА:

Спойлер:



Коды настроек CCS:

А теперь думаю пора перейти к последнему этапу, вставляем в отдельный виджет с отключенным шаблоном эти коды:

Код:
<style type="text/css">
.forumline{
-moz-border-radius:1px !important;
-khtml-border-radius:1px !important;
-webkit-border-radius:1px !important;
border-radius:1px !important;
border:2px double #FFFFFF !important;
padding:5-px !important; 
}

.bodyline{
-moz-border-radius:1px !important;
-khtml-border-radius:1x !important;
-webkit-border-radius:1px !important;
border-radius:1px !important;
border:7px double #FFFFFF !important;
padding:1px !important;
}
</style>

   
<style type="text/css">
body {
background: url(Поставьте ссылку на изображение фона); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}
</style>



<style type="text/css">
#fa_toolbar, #fa_toolbar_hidden {
display: none !important;
top: -50px !important;
}
</style>


<style>
#i_logo {display : none;}
</style>


<style type="text/css">
#toppanel {
display: none;
}
</style>

Вот инструкция за что отвечают коды. Красным выделены те, которые являются необязательными.

Спойлер:
Данные коды отвечают за рамки вокруг форума и внутри него:

Код:
.forumline{
-moz-border-radius:1px !important;
-khtml-border-radius:1px !important;
-webkit-border-radius:1px !important;
border-radius:1px !important;
border:2px double #FFFFFF !important;
padding:5-px !important; 
}

.bodyline{
-moz-border-radius:1px !important;
-khtml-border-radius:1x !important;
-webkit-border-radius:1px !important;
border-radius:1px !important;
border:7px double #FFFFFF !important;
padding:1px !important;
}


Данный код отвечает за отдельный фон портала:
Код:
body {
background: url(Поставьте ссылку на изображение фона); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}

Этот код скрывает Тулбар со страницы портала:
Код:
#fa_toolbar, #fa_toolbar_hidden {
display: none !important;
top: -50px !important;
}

Этот код убирает шапку:
Код:
#i_logo {display : none;}

Этот код скрывает Верхнюю панель, конечно если она у вас установлена:
Код:
#toppanel {
display: none;
}


Дополнительно:

Эти коды ставим в CCS:
Код:
/* Опустить сайт№1*/
body {
margin-top: 60px;
}

/* Опустить сайт №2 */
.bodylinewidth {
padding-top: 60px;
}

/*Поднять сайт№1*/
body {
margin-bottom:50px;


/* Поднять сайт№2 */
.bodylinewidth {
padding-bottom: 50px;
}

Можно поместить коды в начало portal_body, если не хотите применять данные настройки на основной форум.

Теперь всё готово и у нас в ПА должно получиться вот так:

Спойлер:

А на форуме будет выглядеть примерно вот так:



Надеюсь данный туториал будет полезен. wink

С уважением Мишель Али Картер aka Сказочница Зазеркалья. drinks

Сказочник Зазеркалья
Дизайнер
Дизайнер

Пол : Мужчина
Сообщения : 3672
Возраст : 25
Место обитания : Морг.
Карма : Без предупреждений
Благодарности : 687
Регистрация : 2012-11-16

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения