1. Home
  2. /
  3. Форумы KamrBB wiki
  4. /
  5. Оформление элементов форума

Оформление элементов форума

Estyв

Оформляем подписи, таблицы, цитаты, вкладки в таблице форума KamrBB.

Сделаем подпись с верхней чертой, отодвинем её от сообщения и от черты.

/*собственно подпись*/
.podpis {background: transparent !important;
color: transparent !important;
border-top:1px #68482f solid !important; /*сплошная черта, отделяющая подпись от сообщения*/
width:100% !important;
text-align:center;
height:auto !important; /*толщина черты*/
padding:8px !important; /*отспуп от сообщения и от черты*/
margin:0px !important;
}
/*стиль теста подписи*/
.podpis i {color:#6c0303 !important; /*задаём цвет текста*/
}
Задачка по оформлению форума камрББ от Irreal Faces
…как задать фон для всплывающего окна предпросмотра? Он по умолчанию заливается тем же фоном, что установлен на форуме, а там очень тёмное изображение. Текст получается нечитабельным.

Надо “отвязать” элементы содержащие font1 на форуме от предпросмотра.
font1
Менять обязательно с !important;.
Уточняем классы и id
.USERPOST- стиль собщения на форуме.
.font1 основной шрифт и таблица сообщений 
.font1 {
background: url('http://.........................jpg')
repeat transparent !important ;/*укажите адрес картинки или только #цвет для
ВНУТРЕННИХ элементов форума с классом .font1*/
color:#цвет; /*укажит #цвет для
текста классом .font1*/}

.USERPOST {background: none transparent !important;}
.USERPOST .font1 {background:none transparent !important;}
/*стиль окна предпросмотра*/
Пусть будет криво с none

Добавим фон и изменим обводку таблицы.

Сначала найдём нужный нам фон

я выбрала в египетском стиле не яркий, на котором текст будет хорошо виден
нам понадобится ссылка на изображение
и фон заголовка

http://gifok.net/images/2012/06/26/dC03L.jpg

теперь займёмся стилями таблицы в сообщении

.BBTagTable{background:#F9F4DE !important; 
 padding: 1px; 
 border-color: #70583E !important; 
 border-style: solid !important; 
 border-width: 1px !important; 
 font:normal 11px Verdana; 
 color:#70583E;} 
 .BBTagTd {background: url(http://gifok.net/images/2012/06/26/TzMEJ.gif) repeat #faf9f4 !important; 
 padding: 3px; 
 border-color: #70583E !important; 
 border-style: solid; 
 border-width: 1px !important; 

 font:normal 11px Verdana; 
 color:#70583E;} 
 .BBTagTr {background: url(http://gifok.net/images/2012/06/26/TzMEJ.gif) repeat #faf9f4 !important; 
 padding: 3px; 
 border-color: #70583E !important; 
 border-style: solid !important; 
 border-width: 1px 0 0 1px !important; 
 font:normal 11px Verdana; 
 color:#70583E;} 
 .BBTagTh {background:url(http://gifok.net/images/2012/06/26/dC03L.jpg) repeat-x top #E7DEC4 !important; 
 padding: 3px; 
 border-color: #70583E !important; 
 border-style: solid; 
 border-width: 1px !important; 
 font: bold 12px Verdana; 
color:#70583E;}

Для формы ответа, таблиц и цитат на форуме подходят фоны, на которых хорошо виден текст.
Кнопки в меню форума
вставить в html-верх между тэгами style или редактор стилей
если у вас отдельный CSS Файл то в него и с !important. 

#forummenu a {
  color: rgb(0, 0, 0, 0) !important;
  font-size: 0px !important;
  height: 20px;
  line-height: 8px;
  margin-bottom: 20px;
  display: inline-block;
  *display: inline;
  zoom: 1;
  text-decoration: none;
  vertical-align: top;
}
#forummenu a[href="/./"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/forum.gif") no-repeat;
  width: 64px;
}
#forummenu a[href="/./?x=userlist"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/users.gif") no-repeat;
  width: 90px;
}
#forummenu a[href="/./?x=newtopics"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/new.gif") no-repeat;
  width: 100px;
}
#forummenu a[href*="./?x=prof&id="] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/info.gif") no-repeat;
  width: 73px;
}
#forummenu a[href="/./?x=lsread"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/pm.gif") no-repeat;
  width: 64px;
}
#forummenu a[href="/./?x=banlist"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/ban.gif") no-repeat;
  width: 73px;
}
#forummenu a[href="/./?x=config"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/tool.gif") no-repeat;
  width: 100px;
}
#forummenu a[href="/./?x=allread"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/all.gif") no-repeat;
  width: 120px;
}
#forummenu a[href*="./?x=clearcookie"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/out.gif") no-repeat;
  width: 64px;
}
#forummenu a[href="/./?x=premod"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/stop.gif") no-repeat;
  width: 120px;
}
#forummenu a[href="/./?x=reg#reg_tableform"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/in.gif") no-repeat;
  width: 98px;
}
#forummenu a[href="#login"] {background: transparent url("https://kamrbb.ru/skins/ftpimg/icon/in1.gif") no-repeat; width: 55px;}

/* пример для своих ссылок в шапке форума: */
#forummenu a[href="https://a.kamrbb.ru/?x=dir&razdel=7"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/faq.gif") no-repeat;
  width: 59px;}
#forummenu a[href="https://kamrbb.ru/#out"] {
  background: transparent url("https://gibisk.us/skins/ftpimg/icon/site.gif") no-repeat;
  width: 55px;
}

общая высота кнопок, и разная ширина кнопок для тех кто захочет поменять на свои.

Будем делать красивую подсказку к аббривеатуре
я не меняла стили теней и закруглений углов подсказки!


Начнём с выбора фона-подходят фоны или градмиенты, на которых хорошо виден текст.

.tp { 
border-bottom-style: dashed !important; 
border-bottom-width: 1px; 
cursor: help;
font-weight: 400; 
position: relative; 
text-indent: 0; 
} 
.noabbr .tp { 
border-bottom-style: none; 
cursor: pointer; 
} 
.tp em { 
display: none; 
} 
.tp:hover em { 
background: url(http://gifok.net/images/2012/06/26/mG5Hh.png) repeat #f9ecd7 !important; 
border-color: #895A23; 
border-bottom-style: solid; 
border-bottom-width: 1px; 
border-top-style: solid; 
border-top-width: 1px; 
color: #2D1301 !important; 
font-style: normal; 
padding: 8px !important; 
position: absolute; 
text-align: left; 
width: 230px !important; 
}

Стандартные курсоры

  • auto – курсор по умолчанию для текущего элемента.
  • crosshair – простое перекрестие (напоминающее символ “+”).
  • default – курсор, используемый по умолчанию на данной платформе. Зачастую представляется в виде стрелки.
  • pointer – курсор представляется указателем, обозначающим ссылку.
  • move – курсор, определяющий объект, который можно переместить.
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – курсоры, обозначающие возможность перемещения некоторого края объекта.
  • text – курсор, обозначающий текст, который может быть выделен. Зачастую представляется в виде вертикальной линии “|”.
  • wait – курсор, обозначающий занятость программы, и говорящий пользователю, что следует подождать. Зачастую представляется в виде циферблата или песочных часов.
  • help – курсор, означающий, что для объекта, на который он указывает, имеется справочная информация. Зачастую представляется в виде вопросительного знака или воздушного шара.

*Проведите курсором над каждым значением свойства cursor в списке выше, чтобы увидеть какую форму принимает курсор для каждого значения свойства cursor в вашем браузере.

Ставим дополнительные кнопки над формой ответа


Итак, одна строка кода – одна кнопка.

Первая кнопка всегда будет иметь такой код:

</td><td><a href=”/адрес или функция”><img src=”/картинка кнопки” border=0></a></td>

Все последущие:

<td><a href=”/адрес или функция”><img src=”/картинка кнопки” border=0></a></td>

Самая последняя кнопка:

<td><a href=”/адрес или функция”><img src=”/картинка кнопки” border=0></a>

Но если у вас только одна кнопка будет, тогда все иначе:

</td><td><a href=”/адрес или функция”><img src=”/картинка кнопки” border=0></a>

А теперь все те же варианты если нужен перенос строки:


Первая кнопка всегда будет иметь такой код:

</td></tr><tr><td><a href=”/адрес или функция”><img src=”/картинка кнопки” border=0></a></td>

Все последущие:

<td><a href=”/адрес или функция”><img src=”/картинка кнопки” border=0></a></td>

Самая последняя кнопка:

<td><a href=”/адрес или функция”><img src=”/картинка кнопки” border=0></a>

Но если у вас только одна кнопка будет, тогда все иначе:

</td></tr><tr><td><a href=”/адрес или функция”><img src=”/картинка кнопки” border=0></a>

Вставляем в “Свои кнопки над окном сообщения” в настройках форума.

Изменяем шрифты на форуме KamrBB.

.font1{} основной шрифт сообщений
.font2{} мелкий шрифт, ссылки навигации по форуму
.font3{} шрифт заголовков тем в таблице форума или ответов в гостевых книгах. Он же шрифт ников (дополнительно ники заключены между тегами b)
.font4{} шрифт текстовых кнопок при выборе в профиле замены графических кнопок на текстовые
.font5{} шрифт заголовка в шапках
.font6{} шрифт разделительной полосы между разделами на главной форума
input.sender{} стиль кнопки отправки сообщения
Если Вы не разобрались, где какие шрифты – сделайте один шрифт крупным и красным и посмотрите, где этот шрифт.

Облегчаем работу с редактором разделов и смайлов

/* список разделов*/
#list > .row > .tree_row {
padding: 4px 1px !important;
}
/*редактор дополнительных смайлов*/
#smile_list .row {
padding: 6px 1px !important;
}
предыдущий
следующий


  1. Home
  2. /
  3. Форумы KamrBB wiki
  4. /
  5. Оформление элементов форума

Архивы

Рубрики

Друзья сайта

Метки

color css css3 facebook facebook header font free design hover effects icons kamrbb logo Photoshop site Typography VK header WordPress Анимация Иконки Превью помёта Сайт анимация css выставка дизайн кнопки для форума логотип открытки питомник кошек псевдоэлементы тестовые эффекты фигуры css форум шаблон шрифты
Яндекс.Метрика