Форум А и О (скрипты, дизайн, общение)

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

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

Иконки разделов и тем

Страница: 1

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

1

  • Автор: Таис
  • Потому что я так хочу...
  • Таис
  • Откуда: оттуда
  • Зарегистрирован: 2008-04-01
  • Приглашений: 0
  • Сообщений: 2128
  • Уважение: +625
  • Позитив: +501
  • Пол: Женский
  • Провел на форуме:
    3 месяца 1 день
  • Последний визит:
    2015-04-05 21:55:17

Первый способ:

Некоторые часто хотят сделать вместо иконок новых/нет новых/ и т.д. сообщений на главной странице индивидуальные не меняющиеся иконки для каждого подфорума.

Как это  сделать?
Как всегда пишем стандартные теги для кодоав css(Вместо точек будем вставлять коды):

Код:
<style type="text/css">

.....................
.....................
</style>

1. Для начала пишем код:

Код:
    #pun-main .category Div.icon {float: left; display: block; border-style: none none none none; height: ...; width: ...;}

Вместо троеточий вставляем максимальную высоту и ширину тех иконок, которые будем вставлять для разделов.


2. Далее берем следующий блок:

Код:
    tr#forum_fx Div.icon, tr#forum_fx TR.iclosed Div.icon, tr#forum_fx TR.iredirect Div.icon, tr#forum_fx TR.inew Div.icon   {background-color : transparent; background-image: url(http://time.3bb.ru/uploads/time/2_br_redirect.gif);  background-repeat : no-repeat; background-position: top center;}

Размножаем его копипэйстом, столько раз, сколько у нас подфорумов.


3. Теперь идем на главную страницу.

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

http://forum.mybb.ru/viewforum.php?id=2

(Чтобы было понятно - это над Пуском)

Берем ту цифру, которая идет после "=".  В данном случае - 2.


4. В первом блоке ВСЕ X замеянем на это число.

Получаем:

tr#forum_f2 Div.icon, tr#forum_f2 TR.iclosed Div.icon, tr#forum_f2 TR.iredirect Div.icon, tr#forum_f2 TR.inew Div.icon   {background-color : transparent; background-image: url(http://time.3bb.ru/uploads/time/2_br_redirect.gif);  background-repeat : no-repeat; background-position: top center;}

Вместо троеточия в скобках вставляем адрес иконки для первого раздела.

5.Снова идем на главную:

Наводим мышку на второй раздел. Смотри адрес и берем цифру после =. В следующем блоке ВСЕ X заменяем на это число. В скобках ставим адрес уже для картинки второго раздела. И так до конца.

6. Теперь, чтобы перед темами по-прежнему остались нормальные иконки в зависимости от того, есть ли новые сообщения и т.д.

Пишем:

   

Код:
Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }
    TR.inew Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }
    TR.isticky Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }
    TR.iclosed Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }
    TR.iredirect Div.icon {
    background-image : url(http://mybb.ru/img/Mybb_Ocean_zero/old.gif);
    background-repeat: no-repeat;
    }

0

2

  • Автор: Таис
  • Потому что я так хочу...
  • Таис
  • Откуда: оттуда
  • Зарегистрирован: 2008-04-01
  • Приглашений: 0
  • Сообщений: 2128
  • Уважение: +625
  • Позитив: +501
  • Пол: Женский
  • Провел на форуме:
    3 месяца 1 день
  • Последний визит:
    2015-04-05 21:55:17

Втoрой способ проще:

<style type="text/css">
#pun-main .category Div.icon {float: left; display: block; border-style: none none none none; height: 40px; width: 40px; background-repeat : no-repeat; background-position: top center; background-color : transparent;}
tr#forum_f2 div.icon {background-image: url(Ваша ссылка на картинку);  }
tr#forum_f2 div.inew {background-image: url(Ваша ссылка на картинку);  }</style>

div.icon = обычная иконка
div.inew = иконка  при появлении новых сообщений

tr#forum_f2 = номер   Раздела  форума   иначе  id форума котрый  высвечивается в Адресной строке браузера когда Вы входите   в раздел форума вот.

Пример: http://help.spybb.ru/viewtopic.php?id=87

Тут  id=87  значит в код нужно вписать   87

40px - высота и ширина иконки

копируете(размножаете) две части столько сколько у Вас форумов., остальное как обычно

0

3

  • Автор: Таис
  • Потому что я так хочу...
  • Таис
  • Откуда: оттуда
  • Зарегистрирован: 2008-04-01
  • Приглашений: 0
  • Сообщений: 2128
  • Уважение: +625
  • Позитив: +501
  • Пол: Женский
  • Провел на форуме:
    3 месяца 1 день
  • Последний визит:
    2015-04-05 21:55:17

При использовании своего стиля(Администрирование - Стиль) делайте так:

В верхнем окне css находишь строчку /* C2.13 */ и заменяешь до  /* C3 Topics.... на это:
Evil_man  написал(а):

    /* C2.13 */
    .punbb .main .tcl {
      border-left-style: none;
      border-left-width: 0
      }

    * html .tclcon {height: 1px}

    /* C2.14 */
    .punbb td div.tclcon {
            margin-left: 50px;
    }

    /* C2.15 */
    .punbb div.icon {
        float: left;
        display: block;
        width: 65px;
        height: 65px;}

Жирным - размер иконки.

В нижнем окошке сss заменяете стандартную строчку следующей:

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

    #pun-main .category Div.icon {
    float: none;
    display: block;
    border-style: none none none none;
    height: 30px; width: 30px;
    background-repeat : no-repeat;
    background-position: top center;
    background-color : transparent;
    }
    #pun-main .category table div.tclcon {margin-right : 40px;}
    #pun-main table div.tclcon {padding-left: 35px; }

    div.icon {background-image: url(сылка на катринку);  }
    div.inew {background-image: url(сылка на катринку);  }

Или так:

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

    #pun-main table Div.icon {padding-left: 35px; padding-top: 15px; padding-bottom: 20px;}
    Div.icon {
    background-image : url(ссылка на картинку);
    background-repeat: no-repeat;
    }

    TR.inew Div.icon {
    background-image : url(ссылка на картинку);
    background-repeat: no-repeat;
    }
    TR.isticky Div.icon {
    background-image : url(ссылка на картинку);
    background-repeat: no-repeat;
    }

    TR.iclosed Div.icon {
    background-image : url(ссылка на картинку);
    background-repeat: no-repeat;
    }
    TR.iredirect Div.icon {
    background-image : url(ссылка на картинку);
    background-repeat: no-repeat;
    }

0

4

  • Автор: Таис
  • Потому что я так хочу...
  • Таис
  • Откуда: оттуда
  • Зарегистрирован: 2008-04-01
  • Приглашений: 0
  • Сообщений: 2128
  • Уважение: +625
  • Позитив: +501
  • Пол: Женский
  • Провел на форуме:
    3 месяца 1 день
  • Последний визит:
    2015-04-05 21:55:17

еще способ


Администрирование - Свой стиль

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

    div.icon {
    background: url(иконка не активная) no-repeat;
    }

    tr.inew div.icon {
    background: url(иконка активная) no-repeat;
    }

    tr.iclosed div.icon {
    background: url(иконка закрытая) no-repeat;
    }

    tr.isticky div.icon {
    background: url(иконка важная) no-repeat;
    }

Далее нижеуказанные пункты прописываете таким образом

    /* C2.14 */
    .punbb td div.tclcon {
   margin-left: 60px;
    }

Расстояние текста от левого края

    /* C2.15 */
    .punbb div.icon {
    float: left;
    display: block;
    width: 50px;
    height: 50px;
    padding-top: 1px;
    margin-top: 1px;
    }

Ширина иконки
Высота иконки

Пункт

    /* C2.16 */
    .punbb  table div.icon {
      font-size: 1.05em;
      position: absolute;
      margin-left: -2.2em;
      }

Удалите совсем

0

5

  • Автор: альб
  • альб
  • Откуда: москва
  • Зарегистрирован: 2009-05-13
  • Приглашений: 0
  • Сообщений: 660
  • Уважение: +30
  • Позитив: +16
  • Пол: Мужской
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-07-12 23:47:15

у меня вопрос..
как сделать что бы текст (пояснительный) выравнивался?? а то по картинке раздела он идёт ровно, а когда ниже то сдвигается влево! (под иконку)..

0

6

  • Автор: альб
  • альб
  • Откуда: москва
  • Зарегистрирован: 2009-05-13
  • Приглашений: 0
  • Сообщений: 660
  • Уважение: +30
  • Позитив: +16
  • Пол: Мужской
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-07-12 23:47:15
альб написал(а):

у меня вопрос..
как сделать что бы текст (пояснительный) выравнивался?? а то по картинке раздела он идёт ровно, а когда ниже то сдвигается влево! (под иконку)..

вдруг кому понадобится..

в css:

/* C2.14 */
.punbb td div.tclcon {
margin-left: 60px;   
}
красное - нужное значение отступа от правого края..

Отредактировано альб (2010-03-11 19:15:46)

0

7

  • Автор: Домовой
  • Могу отматерить
  • Домовой
  • Откуда: из за печки
  • Зарегистрирован: 2009-09-21
  • Приглашений: 0
  • Сообщений: 1303
  • Уважение: +122
  • Позитив: +50
  • Пол: Мужской
  • Провел на форуме:
    8 дней 1 час
  • Последний визит:
    2012-08-18 23:33:28
альб написал(а):

и добавьте элемент:

/* C2.16 */.punbb  table div.icon {
font-size: 1.05em;
position: absolute;
margin-left: -2.2em;
}
вроде не ошибся..

Как раз этот элемент не нужен если ты используешь свои иконки. этот пункт будет мешать расположению иконок.

0

8

  • Автор: альб
  • альб
  • Откуда: москва
  • Зарегистрирован: 2009-05-13
  • Приглашений: 0
  • Сообщений: 660
  • Уважение: +30
  • Позитив: +16
  • Пол: Мужской
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-07-12 23:47:15
Домовой написал(а):

Как раз этот элемент не нужен если ты используешь свои иконки.

буду знать.. :yep:  девчат, отредактируйте!! а лишнее удалите.. :flirt:

+1

9

  • Автор: Акварель
  • Акварель
  • Откуда: Россия
  • Зарегистрирован: 2010-07-05
  • Приглашений: 0
  • Сообщений: 60
  • Уважение: +1
  • Позитив: +2
  • Пол: Женский
  • Возраст: 25 [1999-11-01]
  • Провел на форуме:
    10 часов 50 минут
  • Последний визит:
    2010-12-13 22:29:20
Домовой написал(а):

Как раз этот элемент не нужен если ты используешь свои иконки. этот пункт будет мешать расположению иконок.

Я тоже поставила такой элемент и у меня место слева было много пустого. Я все перепроверила, ничего не изменилось. А потом прочитала, что его не надо ставить, удалила и все встало на свое место! Спасибо большое! =)

0

Страница: 1

Сервис форумов BestBB © 2016-2024. Создать форум бесплатно