![Стена юзера в профиле. [phpBB2, punBB] Fdf10](https://i.servimg.com/u/f39/18/45/41/65/fdf10.png)
Навигатор по ПА
ФорумСтена юзера в профиле. [phpBB2, punBB]
Страница 1 из 1
Стена юзера в профиле. [phpBB2, punBB]
автор Сказочник Зазеркалья Пн 15 Апр - 22:13
Всем приветик ребята. 
В данном туториале я хочу поделиться лёгким способом, добавления в профиль "Стены юзера". Собственно говоря это добавление нужно для "Неразвёрнутого профиля", в котором данной функции нет, по сравнению с "Развёрнутым профилем".
![Стена юзера в профиле. [phpBB2, punBB] 3253396](http://savepic.org/3253396.png)
Этап первый - Создание изображения и виджета.
Для начала вам нужно создать графическое изображение, которое будет служить кнопкой для открытия стены, к примеру вот такое:
![Стена юзера в профиле. [phpBB2, punBB] 3240791](http://savepic.org/3240791.png)
Имея изображения, можно перейти к следующему, более важному этапу. Топаем в эту тему:
http://help.forum2x2.ru/t24312-topic
И делаем всё по выложенной инструкции, чтобы получить виджет «комментариев». После создания и настройки виджета, копируем код для вставки и возвращаемся на свой форум. Теперь когда мы получили код виджета комментариев, можно перейти к следующему этапу, а если быть точнее к созданию Htlm страницы.
Этап второй - Создание Htlm страницы.
Панель Администратора ✄ Модули ✄ HTML & JAVASCRIPT ✄ Управление страницами HTML.
Создаём новую Htlm - страницу с такими параметрами:
Название * : Любое, к примеру Стена Юзера.
Вы хотите использовать верх и низ вашего форума? : НЕТ.
Использовать эту страницу в качестве Главной? : НЕТ.
Содержимое страницы:
Это создаст оформление для вашей страницы. Получив основу, нужно вставить код виджета в середину страницы:
Затем сохраняем изменения.
Оформление меняем на свой вкус и желание.
Этап третий - Создание всплывающего окна.
После настройки копируем ссылку Htlm - страницы и вставляем её в этот код, аналогично вставляем и ссылку на изображение "стены юзера".
Готовый код будет выглядеть на моём пример вот так:
Этап четвёртый - Дополнительная настройка окна и картинки.
Ниже приведены параметры, которые можно заменить на свои:
position:absolute - Отвечает за прокрутку изображения. При absolute картинка будет прокручиваться вместе со страницей, а если указать fixed, это сделает картинку фиксированной на странице, а это будет не очень красиво, поэтому для лучшего отображения используйте absolute.
right:50px; - Отвечает за горизонтальное отображение. left можно заменить на right, а числовой параметр можно использовать как допустим 800px;, так и 80%. Т.е проще говоря указывать можно как в пикселях, так и в процентах, это уже как вам будет удобнее.
bottom:50% - Отвечает за вертикальное отображение. bottom можно заменить на top, а с числовым параметром тоже самое что и с горизонтальным отображением.
<a href="Ссылка на Htlm страницу"> - Собственно говоря этот параметр не так уж и важен и его можно удалить. Но если у вас есть к примеру желание создать описание ранга, то в определённой теме выкладываете описание, а затем вставляете ссылку на эту тему, заместо этих
слов "Ваша ссылка".
<img src="Ссылка на изображение" /> - Это самый важный параметр собственно отвечающий за изображение. Заместо моей ссылки на изображение, вставляете свои ссылки изображений рангов.
height=500 - Отвечает за высоту всплывающего окна со "стеной".
width=1000 - Отвечает за ширину всплывающего окна со "стеной".
Этап пятый - Встройка кода в шаблон.
Переходим к последнему этапу создания "Стены юзера" в профиле. Готовый код всплывающего окна, нужно вставить в шаблон Неразвёрнутого профиля.
Панель Администрации ✄ Оформление ✄ Шаблоны ✄ Профиль ✄ profile_view_body.
В начало шаблона ставим этот код:
После чего сохраняем и опубликовываем шаблон.
Проверка на отображение.
Топаем в профиль и проверяем на отображение. Должно получиться примерно так:
Если ничего не получилось, тогда просто очистите кеш. Зачастую это и бывает причиной неправильного отображения форума.
Советы по туториалу.
№1 - Положение кнопки можно прикреплять к разным углам профиля, можно даже попробовать поиграть с вставкой стены в блок инфы.
№2 - Виджет комментариев можно заменить на другие виджеты, например Виджет комментариев от Вконтакте или виджет комментариев от Disqus. Также можно написать свою форуму "Стены юзера", ну это конечно если вы владеете определёнными навыками веб программиста.
Примечание.
Уважаемые форумчане: Если вы найдёте в туториале ошибки или неправильные шаги туториала, пожалуйста напишите мне об этом в л/с. Туториал хоть и писала не на скорую руку, но всё же могла допустить ошибки в грамматике или инструкции.
С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.![Стена юзера в профиле. [phpBB2, punBB] 3224725](http://savepic.org/3224725.png)
В данном туториале я хочу поделиться лёгким способом, добавления в профиль "Стены юзера". Собственно говоря это добавление нужно для "Неразвёрнутого профиля", в котором данной функции нет, по сравнению с "Развёрнутым профилем".
Этап первый - Создание изображения и виджета.Для начала вам нужно создать графическое изображение, которое будет служить кнопкой для открытия стены, к примеру вот такое:
Имея изображения, можно перейти к следующему, более важному этапу. Топаем в эту тему:
http://help.forum2x2.ru/t24312-topic
И делаем всё по выложенной инструкции, чтобы получить виджет «комментариев». После создания и настройки виджета, копируем код для вставки и возвращаемся на свой форум. Теперь когда мы получили код виджета комментариев, можно перейти к следующему этапу, а если быть точнее к созданию Htlm страницы.
Этап второй - Создание 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">
Вот сюда вставляете ваш код виджета
<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>
Затем сохраняем изменения.
Оформление меняем на свой вкус и желание.
Этап третий - Создание всплывающего окна.После настройки копируем ссылку 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 - Отвечает за ширину всплывающего окна со "стеной".
Этап пятый - Встройка кода в шаблон.Переходим к последнему этапу создания "Стены юзера" в профиле. Готовый код всплывающего окна, нужно вставить в шаблон Неразвёрнутого профиля.
Панель Администрации ✄ Оформление ✄ Шаблоны ✄ Профиль ✄ 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>
- Спойлер:
![Стена юзера в профиле. [phpBB2, punBB] 3235690](http://savepic.org/3235690.jpg)
После чего сохраняем и опубликовываем шаблон.
Проверка на отображение.Топаем в профиль и проверяем на отображение. Должно получиться примерно так:
- Спойлер:
![Стена юзера в профиле. [phpBB2, punBB] 3221335](http://savepic.org/3221335.jpg)
![Стена юзера в профиле. [phpBB2, punBB] 3272534](http://savepic.org/3272534.jpg)
Если ничего не получилось, тогда просто очистите кеш. Зачастую это и бывает причиной неправильного отображения форума.
Советы по туториалу.№1 - Положение кнопки можно прикреплять к разным углам профиля, можно даже попробовать поиграть с вставкой стены в блок инфы.
№2 - Виджет комментариев можно заменить на другие виджеты, например Виджет комментариев от Вконтакте или виджет комментариев от Disqus. Также можно написать свою форуму "Стены юзера", ну это конечно если вы владеете определёнными навыками веб программиста.
Примечание.Уважаемые форумчане: Если вы найдёте в туториале ошибки или неправильные шаги туториала, пожалуйста напишите мне об этом в л/с. Туториал хоть и писала не на скорую руку, но всё же могла допустить ошибки в грамматике или инструкции.
С уважением автор данного туториала Мишель Картер aka Сказочница Зазеркалья.
Сказочник Зазеркалья- Дизайнер
-
Сообщения : 3537
Возраст : 29
Место обитания : Земля Обетованная...
Настроение :![Стена юзера в профиле. [phpBB2, punBB] 5503931m](http://savepic.net/5503931m.png)
Регистрация : 2012-11-16
Благодарности : 648
-
Похожие темыСтраница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения|
|
|