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

Оформляем подписи, таблицы, цитаты, вкладки в таблице форума 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;
}

предыдущий
следующий


Архивы

Рубрики

Друзья сайта

Метки

Яндекс.Метрика