Техническая поддержка SpyBB

Объявление

Ответы на часто задаваемые вопросы  |  FAQ по администрированию форума  |  FAQ по дизайну форума в CSS  |  Абсолютный помощник по дизайну  |  Навигатор по форуму

Перед регистрацией прочтите правила форума
При поиске ответа на заданный вопрос рекомендуем пользоваться «Поиском».
В случае проблемы с форумом, обязательно указывайте его адрес, иначе мы не сможем Вам помочь!

● 24 марта 2012г. - Закрепление первого сообщения
● 23 марта 2012г.: Изменения в форме ответа - Добавлен стандартный спойлер. Доработан функционал кнопок

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

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


Вы здесь » Техническая поддержка SpyBB » Оформление форума » Вопросы по "Оформлению" - 3


Вопросы по "Оформлению" - 3

Сообщений 301 страница 320 из 375

301

Трейси.
не за что. и ещё. на замену предыдущему коду.
html-верх
(возможно этот код будет более значимым)

Код:
<style type="text/css">
#pun-ulinks .container { 
  text-align: center;
}
</style>

0

302

ещё два вопороса, всё никак найти не могу.
1.можно как-нибудь скрыть подчёркнутые поля?

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

http://uploads.ru/i/l/i/W/liW06.png

2.никак не могу убрать выделенную полоску.

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

http://uploads.ru/i/0/t/3/0t3b5.png

использую этот код:

Код:
<style type="text/css">
#pun-title table {background-image : url(http://uploads.ru/i/d/F/E/dFEjJ.png);
height : 364px;
background-repeat : no-repeat;
background-position: bottom center;
} </style>

уже искала свою ошибку, но так и не нашла. на форуме без совего стиля, всё нормально отображается, а со своим появляется эта полоса.
Hayase
спасибо ещё раз)

Отредактировано Трейси. (5 Дек 2011 13:57:55)

0

303

Трейси.
1. В администрировании есть пункт "Поля". Там можно выбрать любое поле профиля и указать "показано" или "скрыто" оно будет. Так же можно перемещать их между собой (менять местами).
2. Если можно - ссылку на форум. Можно скрытым текстом. Будем разбираться) Скорее всего ошибка в отступе, но где именно - нужно посмотреть.

0

304

Hayase
спасибо)
вот ссылка ahmad.spybb.ru/

0

305

Трейси.

Код:
<style type="text/css">
#pun { 
margin-top: 0px;
 }
</style>

Попробуйте этот код. HTML-верх.

0

306

Hayase
спасибо, спасибо, спасибо.
огромное спасибо)

0

307

Трейси.
У вас там остался ещё кусочек этой полоски) Равный одному пикселу. Чтобы его полностью спрятать нужно изменить тот код, что я вам дала на этот:

Код:
<style type="text/css">
#pun { 
margin-top: -1px;
 }
</style>

Но эта полоска не так существенна и практически не видна.

0

308

Теперь уже у меня вопрос))
По скрипту новых иконок в форму ответа - Визуальные эффекты. Скрипты.
В общем интересно вот что. Можно ли это перенести в css? В форму ответа если ставить - работает, но я хочу именно в css. Я вставляла вот этот код, но он его не реализует. Уже не знаю, что с этим делать.

Код:
#form-buttons table, .punbb .formal textarea {width:99%}
#form-buttons td {padding:0; line-height:0; background-position:center; background-repeat:no-repeat}
#form-buttons td img {height:26px; width:100%}
#button-font {background-image:url('http://img100.imageshack.us/img100/7872/fontag6.png')}
#button-size {background-image:url('http://img233.imageshack.us/img233/8052/sizefontft7.png')}
#button-bold {background-image:url('http://img296.imageshack.us/img296/5051/boldew7.png')}
#button-italic {background-image:url('http://img233.imageshack.us/img233/9614/italwy4.png')}
#button-underline {background-image:url('http://img233.imageshack.us/img233/7743/underlineul7.png')}
#button-strike {background-image:url('http://img233.imageshack.us/img233/1989/97155150ze9.png')}
#button-left {background-image:url('http://img233.imageshack.us/img233/8444/leftalignxj8.png')}
#button-center {background-image:url('http://img296.imageshack.us/img296/9294/centeralignxq3.png')}
#button-right {background-image:url('http://img233.imageshack.us/img233/866/rightalignvo6.png')}
#button-link {background-image:url('http://img233.imageshack.us/img233/9210/urlpr3.png')}
#button-email {background-image:url('http://img233.imageshack.us/img233/533/mailta3.png')}
#button-image {background-image:url('http://img233.imageshack.us/img233/9349/piccr2.png')}
#button-hide {background-image:url('http://img100.imageshack.us/img100/1556/hideso3.png')}
#button-quote {background-image:url('http://img233.imageshack.us/img233/8871/quoterb4.png')}
#button-code {background-image:url('http://img120.imageshack.us/img120/2010/coderr7.png')}
#button-color {background-image:url('http://img120.imageshack.us/img120/2382/colorsln2.png')}
#button-smile {background-image:url('http://img233.imageshack.us/img233/1204/smiles2ud2.png')}
#button-keyboard {background-image:url('http://img233.imageshack.us/img233/673/keyboardae5.png')}
#button-imageup {background-image:url('http://img233.imageshack.us/img233/2074/loadimagelg9.png')}

0

309

Hayase, интересный вопрос, заставил вспомнить мат.часть ))
Вся проблема заключается в том, что если два селектора имеют один приоритет(в данном случае стандартный и данной код используют #id, а значит приоритет равный), то используется идущий последним в коде.
Иконки кнопок определяются в совершенно левом файле extra.14.css :mad:

Код:
<link rel="stylesheet" type="text/css" href="http://your.forum/.../style.1323296097.css"/>
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="http://st1.bbcorp.ru/style/style_fix.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="http://st1.bbcorp.ru/style/style_fix7.css" /><![endif]-->
<link rel="stylesheet" type="text/css" href="http://st1.bbcorp.ru/style/extra.14.css"/>

Как видно из кода страницы - этот файл идет позже, а значит используется именно он.

Решение - использование селектора более высокого приоритета. Тут есть несколько вариантов, и из них нужно выбрать один. Тут поможет CSS Lint
1) !important в конце каждого правила.

Код:
#button-font {background-image:url('http://img100.imageshack.us/img100/7872/fontag6.png') !important;}

На что CSS Lint нам говорит: Too many !important declarations (19), try to use less than 10 to avoid specifity issues. (Слишком много !important (19), попробуйте использовать меньше 10 для избежания специфических проблем)

2) td#id мы увеличиваем приоритет за счет уточнения элемента (в случае с #id это слегка перебор)

Код:
td#button-font {background-image:url('http://img100.imageshack.us/img100/7872/fontag6.png');}

На что CSS Lint нам говорит: Element (td#button-font) is overqualified, just use #button-font without element name. (Элемент (td#button-font) излишне квалифичирован, просто используйте #button-font без названия элемента)

3) #form-buttons #id увеличиваем приоритет за счет уточнения родителя элемента

Код:
#form-buttons #button-font {background-image:url('http://img100.imageshack.us/img100/7872/fontag6.png');}

Тут CSS Lint уже слегка издевается: 2 IDs in the selector, really? (2ID в селекторе, серьезно?) :D

В итоге выбираем второй вариант, как наиболее адекватный + небольшой бонус - меньше символов
Код

Свернутый текст
Код:
#form-buttons table, .punbb .formal textarea {width:99%}
#form-buttons td {padding:0; line-height:0; background-position:center; background-repeat:no-repeat}
#form-buttons td img {height:26px; width:100%}

td#button-font {background-image:url('http://img100.imageshack.us/img100/7872/fontag6.png')}
td#button-size {background-image:url('http://img233.imageshack.us/img233/8052/sizefontft7.png')}
td#button-bold {background-image:url('http://img296.imageshack.us/img296/5051/boldew7.png')}
td#button-italic {background-image:url('http://img233.imageshack.us/img233/9614/italwy4.png')}
td#button-underline {background-image:url('http://img233.imageshack.us/img233/7743/underlineul7.png')}
td#button-strike {background-image:url('http://img233.imageshack.us/img233/1989/97155150ze9.png')}
td#button-left {background-image:url('http://img233.imageshack.us/img233/8444/leftalignxj8.png')}
td#button-center {background-image:url('http://img296.imageshack.us/img296/9294/centeralignxq3.png')}
td#button-right {background-image:url('http://img233.imageshack.us/img233/866/rightalignvo6.png')}
td#button-link {background-image:url('http://img233.imageshack.us/img233/9210/urlpr3.png')}
td#button-email {background-image:url('http://img233.imageshack.us/img233/533/mailta3.png')}
td#button-image {background-image:url('http://img233.imageshack.us/img233/9349/piccr2.png')}
td#button-hide {background-image:url('http://img100.imageshack.us/img100/1556/hideso3.png')}
td#button-quote {background-image:url('http://img233.imageshack.us/img233/8871/quoterb4.png')}
td#button-code {background-image:url('http://img120.imageshack.us/img120/2010/coderr7.png')}
td#button-color {background-image:url('http://img120.imageshack.us/img120/2382/colorsln2.png')}
td#button-smile {background-image:url('http://img233.imageshack.us/img233/1204/smiles2ud2.png')}
td#button-keyboard {background-image:url('http://img233.imageshack.us/img233/673/keyboardae5.png')}
td#button-imageup {background-image:url('http://img233.imageshack.us/img233/2074/loadimagelg9.png')}

upd. Когда стиль вставляется в форму ответа, он идет позже чем внешний файл, и соответственно работает без ухищрений.

+1

310

zloy.MH
чёрт. я сейчас поняла, что я такой нуб. от незнания сути я пыталась это решить через z-index =_=" стыд и срам...
спасибо огромное, проверила - работает)))

p.s. а CSS Lint в закладки добавила себе)))

0

311

снова я  :D
можно ли как-нибудь вывести самых активных пользователей в таблицу? чтобы отображались их аватары (100х100), а под ними было написано, сколько у них сообщений. Чтоб только пять самых активных человек было.
http://uploads.ru/i/q/b/l/qblYj.jpg

0

312

Hayase, на эти форумы много каких костылей написать, но это занимается много времени.
Сделать такое реально, но не в ближайшие пару недель. Начались зачетные недели(
P.S. Но вот смысла мало, т.к. тока по общему кол-ву сообщений будет рейтинг, а не "за последнюю неделю", "за последний месяц"

0

313

zloy.MH
ладно, как появится время, попробуй сделать, ладно?) мне не к спеху, если что)
p.s. удачи на зачётах

0

314

С помощью генератора стилей сгенерила стиль и пытаюсь вставить его как там написано. При сохранении выдается ошибка "500 Internal Server Error". Вставляю вот что:

Свернутый текст
Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/

body {
	background-color: #afa08d;
}

/* 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: #b1a493;
  color: #330000;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #b1a493;
  color: #330000;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #776b5d;
  color: #663333;
  font-weight: bold;
font-style: normal;

  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #543226;
  color: #FFFFCC;
  }

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

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

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #A19483;
  color: #330000
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #543226;
  color: #FFFFFF;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
  background-color: #afa08d;
  color: #330000
}

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #908271 #908271 #908271 #908271
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #9F907D
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #776b5d;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #C2B5A4;
  }

/* CS2.5 */
.punbb th {
  border-color: #543226
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #918473 #D1C4B3 #D1C4B3 #918473;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #918473
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #D1C4B3
  }

.punbb .divider {
  border-color: #918473 #D1C4B3 #D1C4B3 #D1C4B3
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #543226;
  }

.punbb .post-sig dt {
  border-top-color: #C2B5A4 !important;
  }


/* 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: #302010;
    border-bottom: 0px none #000;
  text-decoration: underline;

  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #330000
  }

/* 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 {
  color: #993300;
  font-weight: bold;
  border-bottom: 0px none #000;
  text-decoration: underline;

  }

/* CS3.3 */
#pun-navlinks a {
  color: #FFFFFF;
    border-bottom: 0px none #000;
  text-decoration: none;
  background-color: #543226
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #FFFFFF;
  font-weight: normal;
font-style: normal;
  border-bottom: 0px none #000;
  text-decoration: underline;
  background-color: #5c4035
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {border-color: #CC9966 #AC7946 #9C6936 #AC7946}
tr.iredirect div.icon {border-color: #b1a493 #b1a493 #b1a493 #b1a493}
div.inew {border-color: #E6E6E6 #C6C6C6 #B6B6B6 #C6C6C6}

#pun-main div.catleft, #pun-main div.catright {display: none}

Отредактировано Ant (29 Дек 2011 13:02:07)

0

315

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

upd. Похоже, что данная проблема носит массовый характер. Остается ждать реакции админов сервиса и исправления проблем с серверами.

upd2. Проблема уже должна быть устранена

0

316

Здрасьте ) у меня снова вопрос ) наконец-то поставила свой стиль, тот, что в посте выше, но генератор стиля не дает менять сам фонт, как это можно сделать?

0

317

Ant, в первом сообщении FAQ по дизайну форума в CSS расписана работа с font, в сообщениях ниже - соответствующие селекторы для объектов.
Как вариант использовать Dev-tools из браузеров (Opera Dragonfly, Webkit Inspector, Firebug(или родной огнелисовский)...) или Абсолютный помошник по дизайну

0

318

http://uploads.ru/t/a/U/O/aUO52.png
кто может дать код вот такой штучки в таблицу? :<

0

319

Pako

Код:
<form>
<select name="select" class="forminput" onchange="location.href=(form.select.options[form.select.selectedIndex].value)">
<option>Навигация</option>

<option value="ссылка на тему"><small>название темы</small></option>
<option value="ссылка на тему"><small>название темы</small></option>
<option value="ссылка на тему"><small>название темы</small></option>

</select>
</form>

0

320

Здравствуйте. У несколько вопросов.
1 Как сделать чтобы ник и вся информация в графе пользователя была по центру графы?
2 Как поменять размер шрифта ника в этой графе?
3 Как сделать, чтобы сначала был аватар, а после ник и тд

0


Вы здесь » Техническая поддержка SpyBB » Оформление форума » Вопросы по "Оформлению" - 3