PRO-Замена элементов стандатрного дизайна

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

Поделиться12009-11-09 18:14:01

Автор: Марго
Администратор
Зарегистрирован: 2009-09-24
Приглашений: 0
Сообщений: 217
Уважение: [+5/-0]
Позитив: [+2/-0]
Провел на форуме:
2 дня 1 час
Последний визит:
2016-06-02 22:31:03

Фоновое изображение/задник

Код:

<style>
HTML, BODY {background-image: url(адрес картинки)}
</style>

(картинка) меняем на свою картинку

Шапка

Код:

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

Форум вправо

Код:

<style>
#pun {float: right; margin-right: 40px;}
</style>

задаем значение в рх или %

Код:

<style type="text/css">
#pun {float: right; }
</style>

Форум влево

Код:

<style>
#pun {float: left; margin-left: 40px;}
</style>

задаем значение в рх или %

Код:

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

Форум по центру

Код:

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

Код:

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

Шрифт на форуме

Код:

<style>
BODY A{font-family : "Verdana";}
</style>

"Verdana" меняем на свой

Размер форума

Код:

<style type="text/css">
#pun {width : 80%;
margin: auto;}
</style>

задаем значение в рх или %

Названия категорий по центру

Код:

<style type="text/css"> #pun-main h2 {
text-align: center;
}
</style>

Иконки тем

Код:

<style type="text/css">
.punbb table Div.icon {float: left; display: block; width: 100px; height: 100px; border-style: none; background-image: url(картинка "Нет новых сообщений");  background-repeat: no-repeat; position: relative;}
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; }
#pun-main table div.tclcon {padding-left: 110px;}
</style>

Поделиться22010-03-16 15:37:27

Автор: Марго
Администратор
Зарегистрирован: 2009-09-24
Приглашений: 0
Сообщений: 217
Уважение: [+5/-0]
Позитив: [+2/-0]
Провел на форуме:
2 дня 1 час
Последний визит:
2016-06-02 22:31:03

фон таблицы форума

Код:

<style type="text/css">
#pun {background-color: transparent; width: 76%;}
</style>

(тут прозрачность)

Логотип форума

Код:

<style type="text/css">
#pun-title .title-logo {background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/logo.gif);
background-repeat : no-repeat; height : 132px;
}
</style>

Если из под логотипа выглядывает название форума введите

Код:

<style type="text/css">
#pun-title .title-logo span {display: none;}
</style>

Меню навигации

Код:

<style type="text/css">
#pun-navlinks .container {
padding-top : 4px;  background-color : #C0C0C0;
background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/menu.gif);
font-weight: bold;
text-align: center;
}
</style>

если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву a . Это изменит вид ссылки во всех состояниях:

Код:

#pun-navlinks a {color: #FF0000;}

Код:

a:link - для нормальной ссылки
a:visited - для ссылки после посещения
a:hover - для ссылки при наведении мышкой

Пользовательские ссылки, цвет

Код:

<style type="text/css">
#pun-ulinks .container {
background-color : #00FFFF !important;
}
</style>

Заголовок объявления

Код:

<style type="text/css">
#pun-announcement h2 {background-color: #FF0000; color: red}
</style>

Объявление

Код:

<style type="text/css">
#pun-announcement .container {background-color: #FF0000; color: red}
</style>

Окно статуса

Код:

<style type="text/css">
#pun-status .container { color : red;
background-color : #9900CC;
}
</style>

Название форума

Код:

<style type="text/css">
#pun-crumbs2 .container {
color : red; background-color : #00FFFF !important;
}
</style>

Категории

Код:

<style type="text/css"> #pun-main h2 {
color : green;
background-color : transparent; background-image : url(адрес картинки);
}
</style>

раздел (форум, тем, сообщений, последнее сообщение)

Код:

<style type="text/css"> #pun th {
color: red; background-color : #FF00FF; background-image : url(адрес картинки);
}
</style>

1 столбик - Форум (#pun .tcl), 2 столбик - тем(#pun .tc2), 3 столбик - сообщений(#pun .tc3 ), 4 столбик - последнее сообщение(#pun .tcr)

Код:

}
#pun .tcl, #pun .tcr {width: 20%;}
#pun  .tc2, #pun .tc3 { color: red;
background-color : #FF0000;
}

Рамка внутри форума

Код:

<style type="text/css">#pun-main td {
border-color : #00FFFF;
}
</style>

источник

Поделиться32010-03-16 22:53:45

Автор: Марго
Администратор
Зарегистрирован: 2009-09-24
Приглашений: 0
Сообщений: 217
Уважение: [+5/-0]
Позитив: [+2/-0]
Провел на форуме:
2 дня 1 час
Последний визит:
2016-06-02 22:31:03

Фон в цитату

Код:

<style>
.punbb .quote-box {
  background: url(адрес изображения);
  }
</style>

Фон для кода

Код:

<style>
.punbb .code-box {
  background: url(адрес изображения);
  }
</style>

Размер и тип шрифта

Код:

<style>
#pun #pun-viewtopic, #pun .punbb, .formal textarea  {
font-family: Verdana;
font-size:14px;
font-style: italic;
}
</style>

рамка форума по контуру

Код:

<style>
#pun {

border-width: 0 1px 0 1px;

border-style: none dotted none dotted;

}
</style>

картинка в категорию

Код:

<style>
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
background : url(адрес изображения) no-repeat ;
}
</style>
<style>
.punbb .main h1 span, .punbb .main h2 span, #pun-stats h2 span {
display: none;
}
</style>

ProDesign

Меню навигации

Пользовательские ссылки

Объявление

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

PRO-Замена элементов стандатрного дизайна

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

Поделиться12009-11-09 18:14:01

Поделиться22010-03-16 15:37:27

Поделиться32010-03-16 22:53:45