ДИЗАЙН.
и так, попытаюсь придельно ясно и просто объяснить.
- первой будет Структура style.css;
/* A5 Basic page layout and borders
-------------------------------------------------------------*//* A5.1 */
#pun {
margin: auto;
position: auto; width: 785px;
}
position: auto; width: 785px; - здесь можно отригулировать ширину форума;
на данный момент она 785 пикселей, можешь менять её по своему вкусу)
главное не преборщи, тк если форум сильно уменьшить или растянуть то он будет не очень хорошо смотреться.
тк сама мало что понимаю в цсс, не могу сказать точно, где какой шрифт меняется;
/* A3.2 */
.punbb {
font: normal 68.75% verdana, arial, helvetica, sans-serif;
}/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
font: 1em verdana, arial, helvetica, sans-serif
}
verdana, arial, helvetica, sans-serif; - тебе нужно сменит вердану на свой шрифт.
font: 1em verdana, arial, helvetica, sans-serif - тут аналогично)
в основном я хреново понимаю, у меня просто есть какие то структуры, и я делаю по ним, меняю цвета, шрифты и коды, так что если надо я потом скину ещё какие либо структуры.
дальше у нас пойдет уже второе окошко, то есть Цвета style_cs.css, в них я понимаю немного лучше. советую тебе скачать справочник цсс, с ним гораздо легче что либо исправлять в цветах) (ссылка на справочник)
( прошу прщения за хреновую орфографию, быстро пишу - не вижу хд )
BODY {background-image: url(""); background-attachment: fixed;background-color:#000000;background-position: top left;background-repeat:repeat;}
BODY {background-image: url(""); - здесь ты можешь поставить картинку, которая будет служить тебе общим фоном.
background-attachment: fixed; - здесь ты можешь регулировать положение форума, тоесть зафиксирован он или нет.
background-color:#000000; - цвет форума
background-position: top left; - положение фона форума, на данный момент она по середине слева, если захочешь, что бы он стоял по середине замени на top center;
/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
background-color: transparent;
color: #151515;
}/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
background-color: transparent;
color: #151515;
}/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {background-color : transparent; background-position:center;
background-color: transparent;
color: #151515;text-align: center;font-weight: bold;font-family: Verdana;font-size: 10px; }/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
background-color: transparent;
color: #151515;
}/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
background-color: transparent;
color: #151515;font-size: 10px;
}/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl {
background-color: transparent;
color: #151515;
}/* CS1.8 */
#pun-navlinks .container {
background-color: transparent;
color: #151515;
}.offline li.pa-online strong {
font-weight: normal
}
color: #151515; - цвет шрифта, меняем по своему вкусу)
продолжаем мучится с Цвета style_cs.css
/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
background-color: transparent;
color: #1e1e1e;background-color:#6e6e6e;background-image: url("http://xmage.ru/images/tumblrtdt.png"); border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
}
background-image: url("http://xmage.ru/images/tumblrtdt.png") - фон окошек при выборе часового пояса, или даты рождения в профиле и тд.
color: #1e1e1e; - насколько помнится, цвет шрифта в окошках.
background-color:#6e6e6e; - цвет фона этих окошек;
/* CS1.9 */
.punbb textarea, .punbb select, .punbb input {background-image: url("http://xmage.ru/images/tumblrtdt.png");background-color: #6e6e6e;
color: #6e6e6e; background-image: url("http://xmage.ru/images/tumblrtdt.png");color:#1e1e1e;border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;border: none;}
здесь же аналогично пункту CS1.7, только здесь фоны окошек цитировать и ввода сообщений
#pun{background-color: transparent;background-image: url("http://xmage.ru/images/tumblrlfwy.png");}
background-image: url("http://xmage.ru/images/tumblrlfwy.png"); - это фон форума, не общий, а одного форума.
/* CS3 Links
-------------------------------------------------------------*/
/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
color: #161616; text-decoration:none;font-weight: bold;
}.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
color: #161616; text-decoration:none;font-weight: bold;
}/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active, .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {font-family: Verdana;
color: #161616; text-decoration:none;font-weight: bold;
}/* CS3.3 */
#pun-navlinks a {
color: #161616;
text-decoration:none;font-weight: bold;
}/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
color: #161616;
text-decoration:none;font-weight: bold;
}#pun-pagelinks a:active, #pun-pagelinks a:focus {
color: #525252; text-decoration:none;font-weight: bold; font-family:
}a:link{color:#605d51;text-decoration:none;font-weight: bold;}
a:visited{color:#232120;text-decoration:none;font-weight: bold;}
a:hover{color: #151515;text-decoration:none;font-weight: bold;}
color: #161616;
color: #525252;
color:#605d51;
color:#232120;
color: #151515;
всё это цвета активного текста, то есть ссылок, каких точно щас не могу сказать, позже как будет время, допишу какие куда) поэксрпереминтируй сама
/* CS4 Post status icons
-------------------------------------------------------------*/div.icon {
background: url() no-repeat;
}tr.inew div.icon {
background: url() no-repeat;
}tr.iclosed div.icon {
background: url() no-repeat;
}tr.isticky div.icon {
background: url() no-repeat;
тут все давольно просто, здесь ты можешь вставить так называемые кнопки:
div.icon {
background: url() no-repeat;
} - старое;
tr.inew div.icon {
background: url() no-repeat;
} - новое;
tr.iclosed div.icon {
background: url() no-repeat;
} - закрытое;
tr.isticky div.icon {
background: url() no-repeat;
} - важное.
ДОПОЛНЕНИЯ.
- и так, поскольку мы тут с дизайнами возимся, я дам тебе пару скриптов, которые помогут сделать форум интереснее. первым будет скрипт на замену картинками первой строки меню навигации, то есть "форум", "участники" и т.д.
<script>
<!--
indexof="<img src='ссылка на картинку' >"
str = document.getElementById("navindex").innerHTML
pos = str.indexOf("Форум")
document.getElementById("navindex").innerHTML=str.substring(0,pos)+indexof+str.substring(pos+5,str.length-1)
-->
</script>
<script>
<!--
userof="<img src='ссылка на картинку' >"
str = document.getElementById("navuserlist").innerHTML
if( (pos=str.indexOf("Участники")) != -1 )
document.getElementById("navuserlist").innerHTML=str.substring(0,pos)+userof+str.substring(pos+9,str.length-1)
-->
</script>
<script>
<!--
findof="<img src='ссылка на картинку' >"
str = document.getElementById("navsearch").innerHTML
pos = str.indexOf("Поиск")
document.getElementById("navsearch").innerHTML=str.substring(0,pos)+findof+str.substring(pos+5,str.length-1)
-->
</script>
<script>
<!--
faseof="<img src='ссылка на картинку' >"
str = document.getElementById("navprofile").innerHTML
pos = str.indexOf("Профиль")
document.getElementById("navprofile").innerHTML=str.substring(0,pos)+faseof+str.substring(pos+14,str.length-1)
-->
</script>
<script>
<!--
pismaof="<img src='ссылка на картинку' >"
str = document.getElementById("navpm").innerHTML
pos = str.indexOf("Сообщения")
document.getElementById("navpm").innerHTML=str.substring(0,pos)+pismaof+str.substring(pos+9,str.length-1)
-->
</script>
<script>
<!--
godof="<img src='ссылка на картинку' >"
str = document.getElementById("navadmin").innerHTML
pos = str.indexOf("Администрирование")
document.getElementById("navadmin").innerHTML=str.substring(0,pos)+godof+str.substring(pos+17,str.length-1)
-->
</script>
<script>
<!--
valiof="<img src='ссылка на картинку' >"
str = document.getElementById("navlogout").innerHTML
pos = str.indexOf("Выход")
document.getElementById("navlogout").innerHTML=str.substring(0,pos)+valiof+str.substring(pos+5,str.length-1)
-->
</script>
<script>
<!--
vxodiof="<img src='ссылка на картинку' >"
str = document.getElementById("navlogin").innerHTML
pos = str.indexOf("Войти")
document.getElementById("navlogin").innerHTML=str.substring(0,pos)+vxodiof+str.substring(pos+5,str.length-1)
-->
</script>
<script>
<!--
regof="<img src='ссылка на картинку' >"
str = document.getElementById("navregister").innerHTML
pos = str.indexOf("Регистрация")
document.getElementById("navregister").innerHTML=str.substring(0,pos)+regof+str.substring(pos+18,str.length-1)
-->
</script>
<script>
<!--
indexof="<img src='ссылка на картинку' >"
str = document.getElementById("navindex").innerHTML
pos = str.indexOf("Форум")
document.getElementById("navindex").innerHTML=str.substring(0,pos)+indexof+str.substring(pos+5,str.length-1)
-->
</script>
"<img src='ссылка на картинку' >" - ссылка на твою картинк, сохраняю в псд не забудь отменять задний белый слой, а то потом будешь мучаться и переделывать по себе знаю
pos = str.indexOf("Форум") - тут идет название той ссылки которую ты заменяешь, обращай внимание, а то можно запутаться х)
***
- и так, с первой строкой навигации мы разобрались, теперь приступим ко второй, скрипт тоже давольно легкий и простой, взят со стайла хд;
<script>
ulinks=new Array(
"Новые сообщения", // Новые сообщения
"ссылка на картинку","ссылка на картинку при наведении",
"Активные темы", // Активные темы
"ссылка на картинку","ссылка на картинку при наведении",
"Темы без ответов", // Темы без ответов
"ссылка на картинку","ссылка на картинку при наведении",
"Мои сообщения", // Мои сообщения
"ссылка на картинку","ссылка на картинку при наведении",
"Подписка", // Подписка
"ссылка на картинку","ссылка на картинку при наведении",
"Все прочитано", // Все прочитано
"ссылка на картинку","ссылка на картинку при наведении" //
)
var s0,s1,s2,s3,i; for (i=0; i < ulinks.length; i++){s0=ulinks[i+1];s1="onmouseover=\"this.src='"+ulinks[i+2]+"'\""; s2="onmouseout=\"this.src='"+s0+"'\"";s3='<img class="ulinks" src="'+s0+'" '+s1+' '+s2+' border="0" />';$("#pun-ulinks li").find("a:contains('"+ulinks[i]+"')").html("<span>"+s3+"</span>");i++;i++; }
</script>
"Новые сообщения", // Новые сообщения - название ссылки ло и после, чтобы, опять же, не путаться хд
"ссылка на картинку" - то какой картинка будет до наведения.
"ссылка на картинку при наведении" - то какой картинка будет после наведения.
к примеру, на стайле, наводя на вторую строку навигации, ссылка "Новые сообщения" становится ярче и рядом появляются точечки хд
***
- ну если мы решили весь текст на форуме заменять такими картинками, а точнее красивым шрфитом, остаются ещё, так называемые, ссылки профиля, которые находятся внизу, например "цитировать", "удалить" и тд;
<script type="text/javascript">
var trr=document.getElementsByTagName("div")
var fi=0
for (fi=0; fi<=(trr.length-1);fi++)
{if (trr[fi].className=="post-links")
{var drr=trr[fi].getElementsByTagName("a")
drr[0].innerHTML="<img src='ссылка на картинку'/>"
drr[1].innerHTML="<img src='ссылка на картинку' />"
var er=2
for (er=2; er<=(drr.length-1); er++)
{if (drr[er].innerHTML.indexOf("E-mail")!=-1)
{drr[er].innerHTML="<img src='ссылка на картинку' />"}
else if (drr[er].innerHTML.indexOf("Вебсайт")!=-1)
{drr[er].innerHTML="<img src='ссылка на картинку' />"}
else if (drr[er].innerHTML.indexOf("Цитировать")!=-1)
{drr[er].innerHTML="<img src='ссылка на картинку'/>"}
else if (drr[er].innerHTML.indexOf("Редактировать")!=-1)
{drr[er].innerHTML="<img src='ссылка на картинку' />"}
else if (drr[er].innerHTML.indexOf("Удалить")!=-1)
{drr[er].innerHTML="<img src='ссылка на картинку' />"}
else if (drr[er].innerHTML.indexOf("Жалоба")!=-1)
{drr[er].innerHTML="<img src='ссылка на картинку' />"}
}}}
</script>
drr[0].innerHTML="<img src=''/>" - ссылка на профиль.
drr[1].innerHTML="<img src='' />" - ссылка на сообщения
дальше идет уже все с названиями, и там разобраться куда легче;
else if (drr[er].innerHTML.indexOf("Жалоба")!=-1) - название ссылки;
{drr[er].innerHTML="<img src=[b]'ссылка на картинку' />[/b]"} - ссылка на твою картинку.
}}}
***
- перейдем к остальному наполнению форума. один их скриптов, который мне почему то безумно нравится хд он делает вокруг окошек цитировать пунктирную рамочку, смотрится давольно здорово :3
<style>
#pun-main .code-box, #pun-main .quote-box, #pun-main .hide-box {
border: dashed 1px #000000;
}
</style>
border: dashed 1px #000000; - цвет пунктира;
- тоже чудесная штука хд весь щрифт на форуме становится размера, который ты выберешь, не как не действует на бб код в сообщениях, только если текст там не выделен определенным размером.
<style type="text/css">
.punbb {
font-size: 10px;
}
</style>
font-size: 10px; - размер текста, меняем по своему вкусу )
***
- ставишь это в цсс цвета в /* CS1 Background and text colours, /* CS1.9 */ в самый конец
#pun-stats h2 {
height : 68px;
background-image : url("");
background-repeat : no-repeat;
background-position : center bottom;
}
#pun-category1 h2 {
height : 68px;
background-image : url("");
background-repeat : no-repeat;
background-position : center bottom;
}
#pun-category2 h2 {
height : 68px;
background-image : url("");
background-repeat : no-repeat;
background-position : center bottom;
}
#pun-category3 h2 {
height : 68px;
background-image : url("");
background-repeat : no-repeat;
background-position : center bottom;
}
#pun-category4 h2 {
height : 68px;
background-image : url("");
background-repeat : no-repeat;
background-position : center bottom;
}
#pun-category5 h2 {
height : 68px;
background-image : url("");
background-repeat : no-repeat;
background-position : center bottom;
}
#pun-category6 h2 {
height : 68px;
background-image : url("");
background-repeat : no-repeat;
background-position : center bottom;
}
#pun-stats h2 { - картинка к локации статистики;
#pun-category6 h2 { - категория6, то есть здесь картинка к шестому блоку;
height : 68px; - высота картинки;
background-image : url(""); - ссылка на картинку;
background-repeat : no-repeat; - повторение картинки;
background-position : center bottom; - положение картинки;