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

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения

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

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



Большая иконка категории

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

1

Большая Иконка Категории
Добавляет справа от разделов категории ячейку с иконкой или картинкой.
http://s3.uploads.ru/t/gQIa8.jpg

Автор: Deff
Платформа: MyBB
Аналоги: Большая иконка для категорий (MyBB)

В HTML низ

<script type="text/javascript">
var IMGwidth='135'; //Ширина Ячейки под Картинку
var CategorName = [
//НАЗВАНИЕ КАТЕГОРИИ, ССЫЛКА НА КАРТИНКУ,
'Будущие соревнования','http://savepic.su/507237.gif',
'Информация','http://savepic.su/500894.gif',
"End"]
$("#pun-index .category").each(function (){
for(i=0; i<(CategorName.length-1); i+=2){
var str="<table cellspacing=\"0\"cellpadding=\"0\"style=\"margin:0!important;width:100%;border-collapse:collapse;border:0 none transparent;padding:0!important;\"><tr valign=top><td width="+IMGwidth+" align=center valign=center style=\"padding:4px;\"><img src=\""+CategorName[i+1]+"\" width=\""+IMGwidth+"\"></td><td width=100% style=\"padding:0!important;\">";
var str2="<td style=\"padding:0!important;\"></td></tr></table>"

if($(this).find("h2 span:first").text()==CategorName[i]){
$(this).find(".container").html(str+$(this).find(".container").html()+str2)}
}
});
</script>

Красным Прописываете Ваши точные названия и ссылки на картинки
Строку синим жирным, размножаем для Ваших названий и ссылок, лишние -удаляем
135 - Ширина Картинки (в пикселах) и ячейки отводимой под неё.
Картинки можно ставить как на все категории, так и только на избранные...


Реализация через CSS

Автор: Герда
Красное - номер категории по порядку сверху.

Вставляем картинку слева от таблицы категории под названием:

#pun-category2 .container {
background-image: url(http://savepic.su/507237.gif); /*ссылка на картинку*/
background-repeat: no-repeat;
background-position: top left;
}
#pun-category2 .container table {
margin-left: 132px; /*ширина картинки*/
width: auto;
}

Вставляем картинку слева от всей категории:

div#pun-category2 {
background-image: url(http://savepic.su/507237.gif); /*ссылка на картинку*/
background-repeat: no-repeat;
background-position: top left;
}
#pun-category2 h2 {
margin-left: 132px; /*ширина картинки*/
width: auto;
}
#pun-category2 .container {
margin-left: 132px; /*ширина картинки*/
width: auto;
}

Вставляем картинку справа от таблицы категории под названием:

#pun-category2 .container {
background-image: url(http://savepic.su/507237.gif); /*ссылка на картинку*/
background-repeat: no-repeat;
background-position: top right;
}
#pun-category2 .container table {
margin-right: 132px; /*ширина картинки*/
width: auto;
}

Вставляем картинку Справа от всей категории:

div#pun-category2 {
background-image: url(http://savepic.su/507237.gif); /*ссылка на картинку*/
background-repeat: no-repeat;
background-position: top right;
}
#pun-category2 h2 {
margin-right: 132px; /*ширина картинки*/
width: auto;
}
#pun-category2 .container {
margin-right: 132px; /*ширина картинки*/
width: auto;
}

+1

2

faiko, Спасип

Отредактировано Deff (25.10.2011 15:11:12)

0

3

Deff
Угу, сделано.

+1

4

такой вопрос: если тем много, а картинка маленькая, возможно сделать обтекание?
http://uploads.ru/i/v/l/B/vlBXb.jpg
http://odeon.mybb.ru

и как отодвинуть форумы от правой границы картинки?

Отредактировано Nikodima (06.02.2012 12:08:07)

0

5

Nikodima
Есть две идеи
Первое:

1. Обычно высота категории редко меняется: - почему бы не сделать картинки в полный пост по текущей категории?
2. В Фш их можно оформить как бы Вырастающих из фона, например Тиснение или объём, для этого вставляем полностью прозрачную  картинку во все категории  - снимаем скриншот и в ФШ изгаляемся для каждой нужной категории, - обрезаем - вставляем

Второе -Если лень изгаляцо = Перенести часть форумов, ниже картинки в Новую категорию с тем же названием(одну гласную букву замените на латиницу) без картинки( планку-Заголовок и титлы -Форум Тем Сообщений Последнее сообщение данной новой категории можно скрыть и она будет как бы пристыкована к предыдущей с желаемым Вами смещением к упору влево

Отредактировано Deff (06.02.2012 13:53:11)

+1

6

Deff
спасибо) второй вариан ближе к теме)

0

7

Осуществимо через CSS - Большая иконка для категорий (MyBB)

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."