Дизайн-форум [Rainbow]

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Дизайн-форум [Rainbow] » Дизайн форумов ~BB » Простые и чаще используемые скрипты.

Простые и чаще используемые скрипты.

Страница: 1

Сообщений 1 страница 15 из 15

1

  • Автор: [ВаFFлик]
  • °•° Начальник морга°•°
  • [ВаFFлик]
  • Откуда: я упала? О_о
  • Зарегистрирован: 2009-03-22
  • Приглашений: 0
  • Сообщений: 72
  • Уважение: [+7/-1]
  • Позитив: [+0/-1]
  • Пол: Женский
  • Возраст: 33 [1991-09-11]
  • Провел на форуме:
    10 часов 17 минут
  • Последний визит:
    2009-04-11 17:02:29

Тут будут скриптики вроде смены иконок новые сообщения/старые сообщения, фон, логотип и прочее, прочее. Вы так же смело выкладывайте=) Помощь зала очень приветствуется=)

Так же, хочу заметить, что при создании всех графических процесс в дизайне форума, вам не обойтись без бесплтного фото-хостинга http://radikal.ru

Все скрипты взяты с форума технической поддержки MyBB.
Большое им за это СПАСИБО!!! ^_^ 


Иконки

Самый наираспрастранненейший скрипт. Без него просто НИКАК XD

Код:
<style type="text/css">
Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(фдрес картинки);
background-repeat: no-repeat;
}
</style>

Думаю, и так понятно, что и куда. Но на всякий пожарный объясню:

Div. icon - иконка "нет новых сообщений"
TR.inew Div.icon - иконка "есть новые сообщения"
TR.isticky Div.icon - "Важно!"
TR.iclosed Div.icon - "Закрыто"
TR.iredirect Div.icon - иконка перемещенного сообщения.

Если у вас не помещается картинка в окошко для иконки, то надо просто вашу иконку подвести под размер уже имеющуюсих там (родных) иконок.  Что бы узнать размер родной картинки, достаточно лишьщелкнуть на родную иконку правой кнопкой мыши и выбрать графу "сохранить фон как" . Выбираете папку, куда сохранить и вуа-ля! Вы можете просто узнать размер картинки и подвести вашу под тот же размер, либо рисовать поверх сохраненной. =) Все гениально и просто=)
Есть так же другой вариант:

Код:
#pun-main .category Div.icon {float: left; display: block; border-style: none none none none; height: 52; width: 48;}

height - высота картинки; width - ширина

Ставим желаемуюю высоту и ширину вашей картинки, прописываем и ставим данный скрипт  между

<style type="text/css"> и Div.icon

Получается так:

<style type="text/css">
#pun-main .category Div.icon {float: left; display: block; border-style: none none none none; height: 52; width: 48;}

Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}

  :) 

0

2

  • Автор: [ВаFFлик]
  • °•° Начальник морга°•°
  • [ВаFFлик]
  • Откуда: я упала? О_о
  • Зарегистрирован: 2009-03-22
  • Приглашений: 0
  • Сообщений: 72
  • Уважение: [+7/-1]
  • Позитив: [+0/-1]
  • Пол: Женский
  • Возраст: 33 [1991-09-11]
  • Провел на форуме:
    10 часов 17 минут
  • Последний визит:
    2009-04-11 17:02:29

ЛОГОТИП

Разработка шапки идет двумя спосабами:

Оснавная фоновая картинка со всем нужным и все...

Так же можно сделать фон один и свой маленький логотипчик.

Разберем по порядку!

Самый легкий простой способ (на мое мнение). Из выбранного вами стиля форума, сохраняем фон шапки ( так же, как и иконки, жмякаем правой кнопкой мыши на фон >>> сохранит как фон ) . И творим из сохраненной картинки все, что душе удобно. Но не забываем про рекламный баннер, чтоб он не загораживал нам картинку основательно.
Затем, перегоняем полученный результат через фото-радикал и прописываем скрипт в хтмл-верх.

Код:
<style type="text/css">
#pun-title table {background-image: url(код картиинки);}
</style>

А для тоого, чтоп стандартный логотип "Mybb - мы создаем общение" не мазолил глазки, прописываем туда же

Код:
<style type="text/css">
#pun-title TABLE {background-image: none;}
</style>

Готово!!

Получается примерно так:

http://s41.radikal.ru/i091/0812/1b/a8794e2c166c.jpg

Видите, рекламный баннер расположен в углу, а вокруг него серая полоса? Это тоже один из приемов скриптов, но об этом позже.

Теперь, другой вариант:

Фон трогать не обязательно, но если вы хотите, то пользуйтесь скриптом

Код:
<style type="text/css">
#pun-title table {background-image: url(код картиинки);}
</style>

Затем, нарисовав свой логотип, и проматав его через радикал, пользуемся кодом

либо этим  <a href="Адрес твоей картинки" target=_blank>

Либо этим

Код:
<img id="Mylogo" src="адрес картинки" />
<style type="text/css">
#Mylogo {width: 100%; margin: 0 0 0 0;}
</style>

Там, где width: 100% , выбираем ширину логотипчика. 100% - чтоб лого занимал всю ширину шапки.

0

3

  • Автор: [ВаFFлик]
  • °•° Начальник морга°•°
  • [ВаFFлик]
  • Откуда: я упала? О_о
  • Зарегистрирован: 2009-03-22
  • Приглашений: 0
  • Сообщений: 72
  • Уважение: [+7/-1]
  • Позитив: [+0/-1]
  • Пол: Женский
  • Возраст: 33 [1991-09-11]
  • Провел на форуме:
    10 часов 17 минут
  • Последний визит:
    2009-04-11 17:02:29

Расширение окна под аватар.

Ведь бывает такое, что ставишь аватар, а он не помещается...  :'(

<style type="text/css"> #pun-main .post-author ul {width: 200px;}
</style>

Цифру на свою. :cool:

0

4

  • Автор: [ВаFFлик]
  • °•° Начальник морга°•°
  • [ВаFFлик]
  • Откуда: я упала? О_о
  • Зарегистрирован: 2009-03-22
  • Приглашений: 0
  • Сообщений: 72
  • Уважение: [+7/-1]
  • Позитив: [+0/-1]
  • Пол: Женский
  • Возраст: 33 [1991-09-11]
  • Провел на форуме:
    10 часов 17 минут
  • Последний визит:
    2009-04-11 17:02:29

Форум вправо/влево/по центру

<style type="text/css">#pun {margin-left: 0;}</style>

left - влево.  right - вправо. center - центрик =)

Фоновая картинка влево/вправо/по центру

<style type="text/css"> body {background: url(ссылка на картинку фона) right;}</style>

left - влево.  right - вправо. center -  центрик =)

0

5

  • Автор: [ВаFFлик]
  • °•° Начальник морга°•°
  • [ВаFFлик]
  • Откуда: я упала? О_о
  • Зарегистрирован: 2009-03-22
  • Приглашений: 0
  • Сообщений: 72
  • Уважение: [+7/-1]
  • Позитив: [+0/-1]
  • Пол: Женский
  • Возраст: 33 [1991-09-11]
  • Провел на форуме:
    10 часов 17 минут
  • Последний визит:
    2009-04-11 17:02:29

Картинка в форме ответа

Код:
<style type="text/css">
.punbb textarea {
background-image: url(ссылка на картинку) ;
}
</style>

Замена "мужской/женский" (пол) на картинки

<script type="text/javascript">
var sex=document.getElementById('pun-main').getElementsByTagName("li")
var sx=0
for (sx=0; sx<=(sex.length-1); sx++)
{if (sex[sx].className=="pa-sex")
{if (sex[sx].innerHTML.indexOf("Мужской")!=-1)
{sex[sx].innerHTML="Пол: "+"<img src='мужская картинка' />"}
else if (sex[sx].innerHTML.indexOf("Женский")!=-1)
{sex[sx].innerHTML="Пол: "+"<img src='женская картинка' />"}
}}
</script>

0

6

  • Автор: [ВаFFлик]
  • °•° Начальник морга°•°
  • [ВаFFлик]
  • Откуда: я упала? О_о
  • Зарегистрирован: 2009-03-22
  • Приглашений: 0
  • Сообщений: 72
  • Уважение: [+7/-1]
  • Позитив: [+0/-1]
  • Пол: Женский
  • Возраст: 33 [1991-09-11]
  • Провел на форуме:
    10 часов 17 минут
  • Последний визит:
    2009-04-11 17:02:29

Меняем надписи при регестрации

Вместо "Ник", "Пароль" и прочее, свое  8-)

Код:
<script type="text/javascript">
if(document.URL.indexOf("register.php")!=-1){
document.getElementsByTagName("label")[0].innerHTML="Введите ник"
document.getElementsByTagName("label")[1].innerHTML="Введи кодовое слово"
document.getElementsByTagName("label")[2].innerHTML="Повтори кодовое слово"
document.getElementsByTagName("label")[3].innerHTML="Дай свой e-mail"
}
</script>

0

7

  • Автор: Ранетка
  • Новичок
  • Зарегистрирован: 2009-03-25
  • Приглашений: 0
  • Сообщений: 3
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 час 4 минуты
  • Последний визит:
    2009-03-25 17:01:37

А куда последний код вставлять?

0

8

  • Автор: Стина
  • Администратор
  • Стина
  • Зарегистрирован: 2009-03-22
  • Приглашений: 0
  • Сообщений: 62
  • Уважение: [+4/-0]
  • Позитив: [+2/-1]
  • Провел на форуме:
    15 часов 18 минут
  • Последний визит:
    2010-01-09 13:40:53

Ранетка
В HTML низ

0

9

  • Автор: Анечка-Ранеточка
  • Участник
  • Анечка-Ранеточка
  • Зарегистрирован: 2009-03-29
  • Приглашений: 0
  • Сообщений: 18
  • Уважение: [+0/-2]
  • Позитив: [+1/-1]
  • Пол: Женский
  • Провел на форуме:
    4 часа 5 минут
  • Последний визит:
    2010-01-29 16:21:56

[ВаFFлик написал(а):

]Замена "мужской/женский" (пол) на картинки
<script type="text/javascript">
var sex=document.getElementById('pun-main').getElementsByTagName("li")
var sx=0
for (sx=0; sx<=(sex.length-1); sx++)
{if (sex[sx].className=="pa-sex")
{if (sex[sx].innerHTML.indexOf("Мужской")!=-1)
{sex[sx].innerHTML="Пол: "+"<img src='мужская картинка' />"}
else if (sex[sx].innerHTML.indexOf("Женский")!=-1)
{sex[sx].innerHTML="Пол: "+"<img src='женская картинка' />"}
}}
</script>

У меня картинка не поевляется=(

0

10

  • Автор: Amanda
  • Администратор
  • Amanda
  • Зарегистрирован: 2009-03-25
  • Приглашений: 0
  • Сообщений: 6
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    3 часа 28 минут
  • Последний визит:
    2009-04-04 13:53:05
Анечка-Ранеточка написал(а):

У меня картинка не поевляется=(

Вместо слов

'женская и мужская картинка'

Надо вставлять сделанные Вами картинки. Вернее ссылки на эти картинки.

0

11

  • Автор: Анечка-Ранеточка
  • Участник
  • Анечка-Ранеточка
  • Зарегистрирован: 2009-03-29
  • Приглашений: 0
  • Сообщений: 18
  • Уважение: [+0/-2]
  • Позитив: [+1/-1]
  • Пол: Женский
  • Провел на форуме:
    4 часа 5 минут
  • Последний визит:
    2010-01-29 16:21:56

Amanda
Через радикал и какую ссылку, под каким номером?

0

12

  • Автор: Amanda
  • Администратор
  • Amanda
  • Зарегистрирован: 2009-03-25
  • Приглашений: 0
  • Сообщений: 6
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    3 часа 28 минут
  • Последний визит:
    2009-04-04 13:53:05

Анечка-Ранеточка
Первый код в радикале

0

13

  • Автор: Анечка-Ранеточка
  • Участник
  • Анечка-Ранеточка
  • Зарегистрирован: 2009-03-29
  • Приглашений: 0
  • Сообщений: 18
  • Уважение: [+0/-2]
  • Позитив: [+1/-1]
  • Пол: Женский
  • Провел на форуме:
    4 часа 5 минут
  • Последний визит:
    2010-01-29 16:21:56

Amanda
Понятно, спасибо!

0

14

  • Автор: Анечка-Ранеточка
  • Участник
  • Анечка-Ранеточка
  • Зарегистрирован: 2009-03-29
  • Приглашений: 0
  • Сообщений: 18
  • Уважение: [+0/-2]
  • Позитив: [+1/-1]
  • Пол: Женский
  • Провел на форуме:
    4 часа 5 минут
  • Последний визит:
    2010-01-29 16:21:56

А куда 1 код встовлять:

Код:
<style type="text/css">
Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(адрес картинки);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(фдрес картинки);
background-repeat: no-repeat;
}
</style>

0

15

  • Автор: L' mili
  • Новичок
  • Зарегистрирован: 2009-04-26
  • Приглашений: 0
  • Сообщений: 1
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    2 часа 8 минут
  • Последний визит:
    2009-11-13 22:55:48

Девчонки! А вы можете дать скрипт на статистику!

0

Страница: 1

Вы здесь » Дизайн-форум [Rainbow] » Дизайн форумов ~BB » Простые и чаще используемые скрипты.