Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум поддержки IPB.SU > Поддержка модификаций > Подсветка форумов/разделов


Автор: Dron Сен 17 2008, 16:21
Ну начнем. Мы будем редактировать шаблон:
Board Index Sections -> +-- Board Index Forum Row
Сохраните его, что бы можно было восстановить без проблемм.

Вы там найдете примерно такую строчку:
QUOTE
<td class="row4" ><b><a href="{ibf.script_url}showforum={$info['id']}">{$info['name']}</a></b><br /><span class='desc'>{$info['description']}<br /><b>{$info['moderator']}</b></span></td>


Она отвечает за столбец "Форумы", я же его переименовал в "Разделы".

Итак - мы хотим поменять ему цвет фона при наведении мышью?
Находим в вышенаписанном коде это:
QUOTE
<td class="row4" >


и превращаем в это:
QUOTE
<td class="row4" onMouseOver="this.style.backgroundColor='Новый_код_цвета'" onMouseOut="this.style.backgroundColor=''">


Теперь мы хотим установить определенную картинку форуму? П.с. в этот скрипт уже включена смена цвета, так что выполняемые ранее действия не нужны.
Значит заменяем это:
QUOTE
<td class="row4" >


на это:
QUOTE
<td class="row4" onMouseOver="changeRowStyle(this,'yes','F{$info['id']}')" onMouseOut="changeRowStyle(this,'no','F{$info['id']}')">



Далее редактируем шапку форума, там размещаем фукнцию смены картинки:
Находим:
QUOTE
//-->
</script>


и перед этим вставляем это:
QUOTE
<!-- смена стиля строки -->
function changeRowStyle(TdObject,active,forumNumber) {
<!-- меняем цвет по активности -->
  if (active== "yes") {
    TdObject.style.backgroundColor = "Новый_код_цвета";

    <!-- Другие форумы -->
  }
  else {
    TdObject.style.backgroundColor = "";
    TdObject.style.backgroundImage = "";
  }
}


Далее выше на строчку от:
QUOTE
    <!-- Другие форумы -->


Вставляем этот код для каждого форума:
QUOTE
    <!-- Название форума -->
    if (forumNumber == "FX") {
       TdObject.style.backgroundImage = "url(Ссылка к картинке форума)";
    }


где X - номер форума
а остальное и так понятно: "Название форума" заменяем на какое хотим - это нужно для ориентировки вашей же. Ссылка к картинке соответственно.

Сохраняем и смотрим. Теперь другие ньюансы - картинка будет размножена по всей длинне таблицы, а я в своем случае это убрал и прижал её к правому краю, это делается так:

Заходим в стили css и находим там строчку похожую на это:
QUOTE
.row4 { background-color: ......


и заменяем на:
QUOTE
.row4 { background-color: #E4EAF2; BACKGROUND-POSITION: right; BACKGROUND-REPEAT: no-repeat; }


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

Пробуйте. Только заранее сохраняйте редактируемые шаблоны.

P.S.
Можно сделать чтоб новым цветом выделялись все ячейки в стороке форума
Соответственно все предыдущие действия отменяются.

Идем в шаблон: Board Index Sections -> Board Index Forum Row

И заменяем все содержимое на:
QUOTE
<tr>
          <td class="row4" align="center">{$info['img_new_post']}</td>
<td class="row4" id="F{$info['id']}td2" onMouseOver="changeRow2Style('F{$info['id']}td2','yes','F{$info['id']}'); changeRow2Style('F{$info['id']}td3','yes','F{$info['id']}'); changeRow2Style('F{$info['id']}td4','yes','F{$info['id']}'); changeRow2Style('F{$info['id']}td5','yes','F{$info['id']}')" onMouseOut="changeRow2Style('F{$info['id']}td2','no','F{$info['id']}'); changeRow2Style('F{$info['id']}td3','no','F{$info['id']}'); changeRow2Style('F{$info['id']}td4','no','F{$info['id']}'); changeRow2Style('F{$info['id']}td5','no','F{$info['id']}')"><b><a href="{ibf.script_url}showforum={$info['id']}">{$info['name']}</a></b><br /><span class='desc'>{$info['description']}<br />{$info['moderator']}</span></td>
<td class="row2" align="center" id="F{$info['id']}td3">{$info['topics']}</td>
<td class="row2" align="center" id="F{$info['id']}td4">{$info['posts']}</td>
<td class="row2" nowrap="nowrap" id="F{$info['id']}td5">{$info['last_post']}<br />{ibf.lang.in}:&nbsp;{$info['last_unread']}{$info['last_topic']}<br />{ibf.lang.by}: {$info['last_poster']}</td>
</tr>


Редактирование шапки форума -> Board Header (logo, links, etc)
Перед:
QUOTE
//-->
</script>


Ставим:
QUOTE
<!-- Подсветка форумов, разделов -->
function getTDbyid(id) {
itm = null;
if (document.getElementById) {
   itm = document.getElementById(id);
}
else if (document.all) {
   itm = document.all[id];
}
else if (document.layers) {
   itm = document.layers[id];
}
return itm;
}

function changeRow2Style(TdId,active,forumNumber) {
  TDObject = getTDbyid(TdId);

  if  ( ! TDObject ) { return; }

  if (active == "yes") {
    TDObject.style.backgroundColor = "Новый_код_цвета";

  }
  else {
    TDObject.style.backgroundColor = "";
  }
}




Пример работы последнего варианта: http://design.ipb.su/index.php?act=idx.

http://support.ipb.su/index.php?act=rep&CODE=01&mid=3&t=p - Отблагодари, если я помог.

Автор: Fiona Сен 17 2008, 17:04
Изящно.

Автор: Rom4ik Сен 17 2008, 22:45
дак эта тема уже была давно создана!
зачем пересоздавать?

Автор: Dron Сен 17 2008, 22:46
Rom4ik,
Найдите и покажите мне ее на этом форуме.

Автор: Rom4ik Сен 28 2008, 13:48
знач пропала))))

Автор: Foykys Сен 28 2008, 14:26
Пусть будет. Мне оч нужна была. Спасиба.

Автор: Foykys Сен 28 2008, 14:57
Возник вопрос.

Можно ли зделать так чтобы при наведении картинка не просто высвечивалась, а появлялась. Ну типа еле видная, затем виднее и тд.

Автор: Rom4ik Сен 28 2008, 15:12
Foykys,
возможно думаю но не уверен что сделаю...

Автор: Steve Fox Окт 4 2008, 20:43
Dron, Нашел. http://support.ipb.su/index.php?showtopic=1219 мне +

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)