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

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


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

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

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


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

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Стена юзера в профиле. [phpBB2, punBB]

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

Стена юзера в профиле. [phpBB2, punBB]

Сообщение автор Сказочник Зазеркалья в Пн 15 Апр - 22:13

Всем приветик ребята. d_daisy

В данном туториале я хочу поделиться лёгким способом, добавления в профиль "Стены юзера". Собственно говоря это добавление нужно для "Неразвёрнутого профиля", в котором данной функции нет, по сравнению с "Развёрнутым профилем". 39



Этап первый - Создание изображения и виджета.

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



Имея изображения, можно перейти к следующему, более важному этапу. Топаем в эту тему:
http://help.forum2x2.ru/t24312-topic
И делаем всё по выложенной инструкции, чтобы получить виджет «комментариев». После создания и настройки виджета, копируем код для вставки и возвращаемся на свой форум. Теперь когда мы получили код виджета комментариев, можно перейти к следующему этапу, а если быть точнее к созданию Htlm страницы. Arrow



Этап второй - Создание Htlm страницы.


Панель Администратора ✄ Модули ✄ HTML & JAVASCRIPT ✄ Управление страницами HTML.

Создаём новую Htlm - страницу с такими параметрами:

Название * : Любое, к примеру Стена Юзера.
Вы хотите использовать верх и низ вашего форума? : НЕТ.
Использовать эту страницу в качестве Главной? : НЕТ.

Содержимое страницы:

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><div class="regulations">




<style>
body {
background: url(http://www.snapsnap.ru/i/ibackground.png); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}

.regulations{
background: url(http://img.bzdao.com/11151/7515699.jpg); /*фон поля с содержимым*/
width:50%; /*ширина поля с содержимым*/
font-size:17px; /*размер шрифта*/
border:double 7px #FFFFFF; /*рамка*/
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin: 0 auto;
padding:0px 30px 20px 30px;
min-width:700px !important;
line-height:1.3em;
}
</style>
</body>
</html>

Это создаст оформление для вашей страницы. Получив основу, нужно вставить код виджета в середину страницы:

Спойлер:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru" xml:lang="ru">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><div class="regulations">


Вот сюда вставляете ваш код виджета smile


<style>
body {
background: url(http://www.snapsnap.ru/i/ibackground.png); /*основной фон*/
background-attachment: fixed; /*Фиксация фона*/
}

.regulations{
background: url(http://img.bzdao.com/11151/7515699.jpg); /*фон поля с содержимым*/
width:50%; /*ширина поля с содержимым*/
font-size:17px; /*размер шрифта*/
border:double 7px #FFFFFF; /*рамка*/
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin: 0 auto;
padding:0px 30px 20px 30px;
min-width:700px !important;
line-height:1.3em;
}
</style>
</body>
</html>

Затем сохраняем изменения. plus

Оформление меняем на свой вкус и желание. drinks



Этап третий - Создание всплывающего окна.


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

<div style="position: absolute; right: 50px; bottom: 55%;">
<script type="text/javascript"><!--
function winopp()
{
windop = window.open("Ссылка на Htlm страницу","mywin","height=500,width=1000");
}
// --></script>
<a href="javascript:winopp();"><img src="Ссылка на изображение" border="0" /></a>
</div>

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

Код:
<div style="position: absolute; right: 50px; bottom: 55%;">
<script type="text/javascript"><!--
    function winopp()
    {
    windop = window.open("http://gothic-empire.mirbb.com/h39-page","mywin","height=500,width=1000");
    }
    // --></script>
    <a href="javascript:winopp();"><img src="http://savepic.org/3227502.png" border="0" /></a>
</div>




Этап четвёртый - Дополнительная настройка окна и картинки.

Ниже приведены параметры, которые можно заменить на свои:

position:absolute - Отвечает за прокрутку изображения. При absolute картинка будет прокручиваться вместе со страницей, а если указать fixed, это сделает картинку фиксированной на странице, а это будет не очень красиво, поэтому для лучшего отображения используйте absolute.

right:50px; - Отвечает за горизонтальное отображение. left можно заменить на right, а числовой параметр можно использовать как допустим 800px;, так и 80%. Т.е проще говоря указывать можно как в пикселях, так и в процентах, это уже как вам будет удобнее.

bottom:50% - Отвечает за вертикальное отображение. bottom можно заменить на top, а с числовым параметром тоже самое что и с горизонтальным отображением.

<a href="Ссылка на Htlm страницу"> - Собственно говоря этот параметр не так уж и важен и его можно удалить. Но если у вас есть к примеру желание создать описание ранга, то в определённой теме выкладываете описание, а затем вставляете ссылку на эту тему, заместо этих
слов "Ваша ссылка".

<img src="Ссылка на изображение" /> - Это самый важный параметр собственно отвечающий за изображение. Заместо моей ссылки на изображение, вставляете свои ссылки изображений рангов.

height=500 - Отвечает за высоту всплывающего окна со "стеной".

width=1000 - Отвечает за ширину всплывающего окна со "стеной".




Этап пятый - Встройка кода в шаблон.

Переходим к последнему этапу создания "Стены юзера" в профиле. Готовый код всплывающего окна, нужно вставить в шаблон Неразвёрнутого профиля. read

Панель Администрации ✄ Оформление ✄ Шаблоны ✄ Профиль ✄ profile_view_body.

В начало шаблона ставим этот код:

Код:
<div style="position: absolute; right:  50px; bottom: 55%;">
<script type="text/javascript"><!--
    function winopp()
    {
    windop = window.open("[color=green]Ссылка на Htlm страницу[/color]","mywin","height=500,width=1000");
    }
    // --></script>
    <a href="javascript:winopp();"><img src="[color=green]Ссылка на изображение[/color]" border="0" /></a>
</div>

Спойлер:

После чего сохраняем и опубликовываем шаблон. plus



Проверка на отображение.
Топаем в профиль и проверяем на отображение. Должно получиться примерно так:

Спойлер:



Если ничего не получилось, тогда просто очистите кеш. Зачастую это и бывает причиной неправильного отображения форума. Exclamation



Советы по туториалу.

№1 - Положение кнопки можно прикреплять к разным углам профиля, можно даже попробовать поиграть с вставкой стены в блок инфы. 12

№2 - Виджет комментариев можно заменить на другие виджеты, например Виджет комментариев от Вконтакте или виджет комментариев от Disqus. Также можно написать свою форуму "Стены юзера", ну это конечно если вы владеете определёнными навыками веб программиста. biggrin



Примечание.

Уважаемые форумчане: Если вы найдёте в туториале ошибки или неправильные шаги туториала, пожалуйста напишите мне об этом в л/с. Туториал хоть и писала не на скорую руку, но всё же могла допустить ошибки в грамматике или инструкции. punish


С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.
avatar
Сказочник Зазеркалья
Дизайнер
Дизайнер

Мужчина

Сообщения : 3533
Возраст : 26
Регистрация : 2012-11-16
Благодарности : 690

Без предупреждений

http://help.forum2x2.ru

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

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


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