test

Объявление


Сюжет | Свод правил | Лица на аватарах | Шаблон анкеты | Квесты | Гостевая книга
акция 1; | акция 2; | акция 3; | акция 4; | акция 5;

описание
игры

Администрация: админы
Рейтинг игры: NC-21
Время, дата: блабла
Погода: блабла
Новости: блабла
Действующие эпизоды: бла; бла;

дизайн by PVM

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

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


Вы здесь » test » Тестовый форум » Тестовое сообщение


Тестовое сообщение

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

1

Благодарим за выбор нашего сервиса!

0

2

Обязательно к прочтению для тех кто хочет научиться создавать стили!!!
Конечно желательно иметь под рукой тестовик, чтобы потом наглядно мы смогли все изменить!
Начнем мы с Цвета style_cs.css!
Ищем это окошко в Администрировании - Стиль, не забываем ставить галочку на "Да" - что мы хотим использовать свой стиль!
Первый пункт, он отвечает за фон, цвет фона, будет ли он фиксированным или неподвижным

/* CS1 Background and text colours
-------------------------------------------------------------*/
html, body {
background: #цвет фона url(адрес картинки);
background-repeat: no-repeat;
background-position: top center;
background-attachment: no-fixed;

}

#pun {
background-color: none;
background-image: url(адрес картинки);
background-repeat: repeat;
}

.lastedit {
display: none;
}

Разберем по порядку
Выделить код
html, body {
background: #цвет фона url(адрес картинки);
background-repeat: no-repeat;
background-position: top center;
background-attachment: no-fixed;

}

Пункт отвечает за основной цвет фона и за фоновую картинку (если ты будешь делать шапку совмещенную с фоном)
background: #цвет url(адрес картинки); - вместо "цвет" вставляешь цвет фона, вместо адрес - http изображения! Если у тебя не будет картинки, а просто цвет, убираешь пункт - url(адрес картинки)!
background-repeat:
no-repeat; - фон не повторяется
repeat; - фон будет повторяться.
background-position:позиция форума
top center; - по центру
left - слева
right - справа
background-attachment: - будет ли фон фиксированным или прокручивающимся
no-fixed; - прокручивающийся (для совмещеных шапок с фоном)
fixed; - фиксированный фон

Выделить код
#pun {
background-color: none;
background-image: url(адрес картинки);
background-repeat: repeat;
}

.lastedit {
display: none;
}
пункт отвечает за фон форумных таблиц
background-color: - цвет фона
none; - без цвета
#0000 - цвет фона
background-image: если вместо цвета хотим видеть картинку
url(адрес картинки); - вставляем адрес картинки
background-repeat: - отвечает, будет ли наш фон повторяться(для изображения) или не будет
repeat; - повторяется
no-repeat; - не повторяется

0

3

Продолжим!!!
По ходу дела меняйте и добавляйте в свой диз, при это показывайте и задавайте вопросы если нужно!
Далее идет пункт отвечающий за : цвет колонок сообщений и тем в форумной таблице, статистика, приветствие, меню форума.

/* 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: #58564d;
}

background-color: # - цвет этих ячеек
background-image: url(http://Адрес картинки); - можно также вставить картинку
background-color: transparent; - фон будет прозрачным
color: # - цвет текста в этих пунктах

Пункт отвечающий за: цвет фона и шрифта в колонке названий форумов и последних сообщений

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: none;
  color: #58564d;
  font-style: Times;
}

background-color: # - цвет этих ячеек
background-image: url(http://Адрес картинки); - можно также вставить картинку
background-color: none; - фон будет прозрачным
color: # - цвет текста в этих пунктах
font-style: Times; - можно изменить шрифт текста (если он не меняется, этот пункт можно убрать)

Пункт отвечающий за категории форума

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #цвет;
background-image: url();
  color: #dadcdb;
  font-weight: normal;
font-style: normal;
text-align:center;
font-size: 15px;
  font-family: "Arial";
height: 40px;
padding-top: 25px!important;
  }

background-color: - цвет фона категорий
background-image: url(); - можно вставить картинку
color: - цвет шрифта
font-weight: -начертание шрифта:
normal - нормальный
bold - жирный
font-style: - стиль шрифта:
normal -нормальный
italic - курсив
text-align: - расположение текста:
center, left, right - по центру, слева, справа
font-size: - размер шрифта в пикселях
font-family: - можно менять шрифт текста
height: - высота ячейки
padding-top: 25px!important; - выравнивания текста в зависимости от высоты ячейки

0

4

Далее пункт отвечающий за....(даже не знаю как обозвать)фон и цвет шрифта надписей, например таких как

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: transparent;
  color: #58564d;
  }

background-color: - цвет фона (можно так же вставить картинку)
  color: - цвет шрифта

Пункт отвечающий за графу форумных таблиц «Форум-Тем-Сообщений-Последнее сообщение»

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: transparent;
  color: #58564d
  }

background-color: - цвет фона (можно так же вставить картинку)
  color: - цвет шрифта

Пункт отвечающий за заливку фона цитаты, кода и  шрифт

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #82827b;
background-image: url(адрес картинки);
  color: #58564d
}

background-color: - цвет фона
background-image: - можно вставить изображение
  color: - цвет шрифта

0

5

жирный
наклон
подчеркнуть
зачеркнуть
обычный

0

6

Код:
http://imglink.ru/show-image.php?id=b738b18872e8f5081a59cfd782fcef41

0

7

http://imglink.ru/show-image.php?id=b738b18872e8f5081a59cfd782fcef41

0

8

<style>
.punbb table Div.icon {float: right; display: block; width: 52px; height: 40px; border-style: none; background-image: url("http://xmages.net/i/3242144");  background-repeat: no-repeat; position: relative;}
.punbb table div.inew {background: url("http://xmages.net/i/3242151") no-repeat;}
TR.isticky Div.icon {background: url("http://xmages.net/i/3242156") no-repeat;}
TR.iclosed Div.icon {background: url("http://xmages.net/i/3242164") no-repeat;}
</style>
<style type="text/css">
.punbb td div.tclcon { padding-right: 75px; }
</style>

0

9

Post status icons
-------------------------------------------------------------*/
    div.icon {
            background: url(http://xmages.net/i/3242144) no-repeat;
    }

    tr.inew div.icon {
            background: url(http://xmages.net/i/3242151) no-repeat;
    }

    tr.iclosed div.icon {
            background: url(http://xmages.net/i/3242164) no-repeat;
    }

    tr.isticky div.icon {
            background: url(http://xmages.net/i/3242156) no-repeat;

     
    }

0

10

<style> #pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 510px; top: 0px
}
</style>
<style type="text/css">
#pun-title h1 span  {display: none;}
</style>

<style type="text/css">
#pun-announcement h2 {
display: none;
}
#pun-announcement .container
{padding-top: 1em;
}
</style>

<style type="text/css">
.lastedit {display: none; }
</style>

<style type="text/css">
.title-logo-tdr * {
  filter:alpha(opacity=50);
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
}
.title-logo-tdr *:hover {
filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>

<style type="text/css">
#pun-navlinks {
  margin-top: -72px;
  }

</style>

<style>
.punbb table Div.icon {float: right; display: block; width: 52px; height: 40px; border-style: none; background-image: url(http://xmages.net/i/3242144);  background-repeat: no-repeat; position: relative;}
.punbb table div.inew {background: url(http://xmages.net/i/3242151) no-repeat;}
TR.isticky Div.icon {background: url(http://xmages.net/i/3242156) no-repeat;}
TR.iclosed Div.icon {background: url(http://xmages.net/i/3242164) no-repeat;}
</style>
<style type="text/css">
.punbb td div.tclcon { padding-right: 75px; }
</style>

0

11

http://xmages.net/storage/10/1/0/e/4/upload/c5c21ea7.png

0

12

спойлер

<style>
#button-spoiler {background-image:url('http://forumupload.ru/uploads/0000/12/13/488-1.gif'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat; height:26px; width:100%}
</style>
<script type="text/javascript">
function tag_spoiler(){
var y = prompt("Введите описание закрытой кнопки",'');
if(y!='null' && y!='' && typeof(y)!='object' && typeof(y)!='undefined'){
var x = prompt("Введите описание открытой кнопки",'');
if(x=='null' || x=='' || typeof(x)=='object' || typeof(x)=='undefined') bbcode('

+y+

','

'); else bbcode('

+y+'|'+x+

','

');}
else bbcode('

Свернутый текст

','

')
}
function addSpoiler(str,from,internal){
var pos=0,pos2=0,pos_c=0,pos_l=0,newpos=0,string='',close='',open='';
if((pos=str.indexOf("[spoiler",from))==-1) return str;
if((pos2=str.indexOf("[/spoiler]"),pos+9)==-1) return str;
if(((pos_c=str.indexOf("]",pos+8))!=-1) && ((pos_c!=pos+8)&&(pos_c!=pos+9))){
string = str.substring(pos+9,pos_c);
if((pos_l = string.indexOf("|"))!=-1){
close = string.substring(0,pos_l);
open = string.substring(pos_l+1,string.length);
}
else{
close = string;
open = string;
}
}
else{
close = 'Показать спойлер';
open = 'Скрыть спойлер';
}
newpos=str.indexOf("[spoiler",pos+9)
if(newpos<pos2 && newpos!=-1) str=addSpoiler(str,pos+9,true)
if((pos2=str.indexOf("[/spoiler]",pos+9))==-1) return str;
str=str.substring(0,pos)+makeSpoiler(str.substring(pos_c+1,pos2),open,close)+str.substring(pos2+10,str.length)
if( str.indexOf("[spoiler")!=-1 && internal==false) str=addSpoiler(str,0,false)
return str;
}

function makeSpoiler(txt,open,close){
txt='<div class="quote-box" style="padding:1px;background: none; border: 0;"><cite style="width:100%;margin:0;"><input id="'+open+'" class="spoiler-button" style="width:140px;font-size:10px; margin:0;" type="button" value="'+close+'"></cite><blockquote class="quote-box" style="display:none; width: 80%;border: 1px solid black;margin:0;">'+txt+'</blockquote></div>'
return txt;
}

$(document).ready(function(){
$("div.quote-box > cite > input.spoiler-button").click(function(){
$(this).parents("div.quote-box:first").find("blockquote.quote-box:first").toggle("slow");
var a = $(this).attr('value');$(this).attr('value',$(this).attr('id'));$(this).attr('id',a);
});
});

if((document.URL.indexOf("viewtopic.php")!=-1) || (document.URL.indexOf("post.php")!=-1)){
elm=document.getElementById("pun-main").getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content"){
var post=elm[x]
post.innerHTML=addSpoiler(post.innerHTML,0,false)
}
}
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(16).innerHTML="<img  id=\"button-spoiler\" title=\"Спойлер\" onclick=\"tag_spoiler('

Свернутый текст

','

')\" src=\"/i/blank.gif\" />"
</script>

0

13

блабла

0


Вы здесь » test » Тестовый форум » Тестовое сообщение


Рейтинг форумов | Создать форум бесплатно