ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 МАСТЕР-КЛАСС от magia "Жизненный цикл проекта"

Дата и время: начало 28 апреля в 16:00 по МСК;
Если у вас возникла идея создать ролевую игру, сообщество любителей собак или форум для киноманов,
но не знаете с чего начать и что делать, не беда! Мы здесь чтобы помочь.

Подробности

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

🔥 Новинка в портфолио: ДИЗАЙН И ГРАФИКА В СТИЛЕ GENSHIN IMPACT

Платформа: MyBB.ru (RusFF)
Стоимость: 6500 рублей;
Авторы: Moju & wasurenagusa

Посмотреть

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

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

Купить скрипт

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



Отдельные картинки для заголовков категорий

Сообщений 21 страница 30 из 48

1

Новая версия кодов для картинок в категориях тут: Дизайн отдельных категорий и заголовков категорий

устарело

СВОЯ КАРТИНКА В КАЖДУЮ КАТЕГОРИЮ
Прикрепляет к заголовку категорий отдельные картинки по названию оных.
Решает проблему с некорректным отображением разных заголовков через CSS, если у вас на форуме скрыт ряд категорий для определенных пользователей.

http://s5.uploads.ru/FbmpP.jpg

Автор: Deff

скрипт и описание

Картинки в названия категорий можно легко и без скриптов прицепить через CSS: Прикрепление картинок к названиям категорий (MyBB)
Но если на вашем форуме для некоторых групп пользователей скрыты отдельные категории, то у категорий будет разный порядок и картинки будут отображаться у некоторых юзеров не так, как задуманно.
Так что, любителей прятать категории выручит этот скрипт.

В начало хтмл-низ

<script type="text/javascript"><!--Своя картинка в каждую категорию -->
$(document).ready(function(){

myarray=new Array(
"Информационный раздел", "http://mybb.ru/f/collection/0208.gif",
"Техническая поддержка", "http://mybb.ru/f/collection/0211.gif",
"Форумы опытных пользователей", "http://mybb.ru/f/collection/0213.gif",
"Разное", "http://i039.radikal.ru/0806/ec/a5ffc6d7cfd9.gif",
"Статистика форума", "http://mybb.ru/f/collection/0217.gif"    //Последний элемент без запятой! 
)

        $("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
for(q=0;q<myarray.length;q++){

var cssObj = {
   "height":"50px",
   "background-color": "transparent",
   "background-image":"url("+myarray[q+1]+")",
   "background-position":"50% 50%",
   "background-repeat":"no-repeat"       //Последний элемент без запятой!
}

        if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
        q++}
    });
});
</script>

Пояснения:

Синим - названия категорий( статистика тоже там, - если нужна
Красным - адрес устанавливаемой картинки
50px розовым - значение высоты картинки - установите своё значение;

Строку:

"Название Категории", "Ссылка на картинку",

- Размножаем сколько нужно(лишние строки - убираем), -вставляем свои названия и адреса изображений

PS: Последний элемент в массиве(в данном примере > "Статистика форума") -на конце без запятой!

PPS: Скрипт  должен разрешать проблему смещения картинок в иные разделы, при скрытии части разделов для определенных групп


Кому надо скрыть  название категории шрифтом > в HTML верх ставим такой код

<style>
#pun-stats h2 span,
.category h2 span {
visibility:hidden!important;
}
</style>

(*Синим - статистика - при ненужности отключения -строку убираем


Прикрепление картинок к названиям категорий (CSS)
Если на форуме нет скрытых категорий, то прикрепить картики можно через стиль.

коды и описание

Если заглянуть в HTML-код форума, то можно увидеть, что заголовки категорий имеют такой вид:

<div id="pun-categoryN" class="category">
  <h2>
    <div class="catleft"></div>
    <span>Заголовок категории</span>
    <div class="catright"></div>
  </h2>
  <div class="container">тут форумная таблица</div>
</div>

Красное - номер категории (генерируется в зависимости от ее порядка).
Синее - левый див-блок.
Зеленое - правый див-блок.

Так что, для любителей вкорячить картинку в любое место форума, не нужно никаких скриптов. :)

Прикрепляем картинку слева от названия

.catleft {
height: 30px; /*высота*/
width: 30px /*ширина*/
background: url(ссылка) transparent 0 0; /*ссылка на картинку*/
}

Прикрепляем картинку справа от названия

.catright {
height: 30px; /*высота*/
width: 30px /*ширина*/
background: url(ссылка) transparent 0 0; /*ссылка на картинку*/
}

Прикрепляем картинку к названию конкретной категории
слева:

#pun-categoryN .catleft {
height: 30px; /*высота*/
width: 30px /*ширина*/
background: url(ссылка) transparent 0 0; /*ссылка на картинку*/
}

справа:

#pun-categoryN .catright {
height: 30px; /*высота*/
width: 30px /*ширина*/
background: url(ссылка) transparent 0 0; /*ссылка на картинку*/
}

вместо N - номер категории по порядку с верху (помните, что если у вас на форуме наверху для какой-то группы что-то скрыто, то у них картинки тож будут в другом порядке как и категории)

Если надо вставить фоновую картинку в заголовок категорий:

.category h2 {
height: 62px;
background-image: url("картинка");
background-repeat: no-repeat;
background-position: top center;
color: transparent;
}

Если надо вставить фоновую картинку в заголовок конкретной категории:

#pun-category1 h2 {
height: 62px;
background-image: url("картинка");
background-repeat: no-repeat;
background-position: top center;
color: transparent;
}

Если надо скрыть текст названия категории:

.category h2 span {display: none !important;}

Если надо скрыть текст названия конкретной категории:

#pun-categoryN h2 span {display: none !important;}

вместо N - номер категории по порядку с верху

Отредактировано Герда (20.05.13 06:17)

+2

21

Pika
дайте код из цветов CS1.3

0

22

lambdadelta

Код:
/* CS1.3 */
#pun-main h2 {
background-image: url(http://uploads.ru/i/C/G/2/CG24U.png);
background-repeat: no-repeat;
background-position: center; 
height: 82px;
line-height: 82px;
  color: #000000;
  font-family: cambria;
  text-align: center;
  letter-spacing: -1px;
text-transform: uppercase;
  font-size: 20px;
   width: 896px;
margin-left: -140px; 
   }

Но эмм... Там отдельно картинки из категорий и разделитель статистики о_О я уже начинаю подумывать. что это хатт тупит, так на бб пробнике все вроде ровно стояло. хотя там всего одна категория и может чего я намутила не того..о.о
помогите мне все исправить и ровненько поставить х3

0

23

Поправьте css для  Jamp-Панели

Код:
<!-- JampPanel-->
<style>
#JampPanel:hover{
margin-right:-20px;
}
#JampPanel,#JampPanel .container{
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border:1px solid #000000;
background-color:#FFEED5;
box-shadow: 0px 5px 5px #FFEED5;
-webkit-box-shadow:0px 5px 5px #EEE8AA;
-khtml-box-shadow:0px 5px 5px #EEE8AA;
-moz-box-shadow:0px 5px 5px #EEE8AA;
}
#JampPanel {opacity:0.86;
position:fixed;z-index:1200;
height:190px;top:8px;right:0;margin-right:-202px;
background:#FFEED5 url(http://uploads.ru/i/Q/l/2/Ql2vP.png) 4px 20px no-repeat;
width:230px;
}
#JampPanel .container{
padding:12px;
height:400px;
width:160px;margin:-1px 0 0 30px;
font-size:10px;
}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
position:absolute;
height:190px;width:14px;
background-color:#FFEED5;
margin:-12px 0 0 -13px;
}
</style>

И добавьте в Конец Первого Окна стиля:

Код:
.category h2 {
 padding:0;
 margin-left:-147px!important;
}
#pun-stats h2{
 padding:0;
 margin-left:2px!important;
}

0

24

Deff
ты волшебник? :О
там все встало на место *-* идиааально ровно *о*

0

25

http://forbleach1.rusff.ru/

отказывается вставать на свое место

0

26

...

Отредактировано max, the murderer! (08.08.22 17:47)

0

27

Что-то не работает у меня((
Вместо картинок пустое поле.
http://s3.uploads.ru/t/P8SQq.png

Форум: http://lielittest.rusff.ru/

Код:

Код:
<script type="text/javascript"><!--Своя картинка в каждую категорию -->
    $(document).ready(function(){

    myarray=new Array(
    "Гостям и новичкам", "http://s002.youpic.su/pictures/1352926800/9d240ea5f9c3e3fa9a8cbb37f52d43d3.png",
    "Админка", "http://s002.youpic.su/pictures/1352926800/a9f0e0cd48e4f1984774c079bc05b7b4.png",
    "Архив" , "http://s002.youpic.su/pictures/1352926800/bc4f26dd8dc113444b89e0d068fa3a39.png"
    //Последний элемент без запятой! 
    )

            $("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
    for(q=0;q<myarray.length;q++){

    var cssObj = {
       "height":"50px",
       "background-color": "transparent",
       "background-image":"url("+myarray[q+1]+")",
       "background-position":"50% 50%",
       "background-repeat":"no-repeat"       //Последний элемент без запятой!
    }

            if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
            q++}
        });
    });
    </script>

0

28

http://testscripting.hutt.ru/
Помогите. Всю голову уже сломал себе  http://uploads.ru/i/j/o/z/jozsm.gif Где-что не так.
Картинки категорий не отображаются. В скрипте всё правильно. Что-то, я полагаю, в стиле. Но что *wall* уже третий час мозг ипу.

0

29

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

0

30

Revolution написал(а):

а с хрома не хочет работать вообще.

http://s2.uploads.ru/t/B5w2W.jpg

Отредактировано Deff (01.01.13 22:14)

0