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р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения

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

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


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Индивидуальное оформление конкретных постов (CSS)


Индивидуальное оформление конкретных постов (CSS)

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

1

Продолжаем ковырять код движка майбб и вытворять всякие фокусы.
Рассмотрим код поста:

http://forumfiles.ru/uploads/0007/e3/f7/2/t847854.png

<div id="p127049" class="post">
<div class="container">
   <div class="post-author"></div>
   <div class="post-body">
    <div class="post-box">

       <div id="p127049-content" class="post-content">
         <dl class="post-sig"></div>
       </div>
    </div>
   </div>

</div>
</div>

красное - контейнер поста. у каждого поста свой уникальный ID, который поможет нам менять стиль для конкретного сообщения
розовое - профиль пользователя. подробно о нем вы можете узнать в тут: Окантовка профиля (css-код) (MyBB)
зеленое - два контейнера, обрамляющие содержимое поста
синее - контейнер с содержимым сообщения, тоже имеет уникальный ID (цифры этого ID такие же, как у красного)
внутри синего контейнера еще бывают периодически .qoute-box и .code-box - формы цитаты и кода, их тоже можно форматнуть индивидуально в конкретном посте.
серое - подпись автора

Итак, если нам надо изменить что-то во всем посте, хватаем красный айдишник и приписываем к нему нужные элементы, в соответствии с синтаксисом CSS.

Пример:

#p19137 .post-author, #p19137 .post-sig {display: none;}
#p19137 .post-body {margin-left: 5px;}

Расшифровка:

в посте №19137 профиль пользователя и подпись пользователя {скрыли}
в посте №19137 само содержимое поста{отступает слева на 5px (то есть растягивается на всю область, раньше он отступал больше, чтобы уместить профиль)}

вот так это выглядит:

http://forumfiles.ru/uploads/0007/e3/f7/2/t556380.png

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

#p109925-content p {
    background: none repeat scroll 0 0 #D3E0F1; /*фон голубой*/
    color: blue; /цвет синий/
    padding: 0.5em; /отступ от краев фона/
}
#p109925-content .post-sig {
    display:none; /*скрыть подпись*/
}

http://s0.uploads.ru/t/yvLam.png

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

Код:
/* украшаем некоторые посты */
#p109925-content p, #p90957-content p, #p90948-content p, #p91542-content p, #p96117-content p, #p117219-content p,  #p119200-content p {background: #D3E0F1; padding: 0.5em;}
#p109925-content .post-sig, #p90957-content .post-sig, #p90948-content .post-sig, #p91542-content .post-sig, #p96117-content .post-sig, #p117219-content .post-sig,  #p119200-content .post-sig {display:none;}

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

0

2

Герда написал(а):

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

Ну применя скрипт - все можно
К примеру придаём новый класс .post-mystyle с постами некоторых авторов:
В начало HTML низ

<script type="text/javascript">
var NickArray = ['Герда','Ghоs','Def']; //Массив постов с никами
$(".post .pa-author a").each(function(){
  var match = false;
  for(var i=0;i<NickArray.length;i++){
    if($(this).html()==NickArray[i]){match=true;break;}
  }
  if(match)$(this).parents('.post').addClass('post-mystyle');
});
</script>

Mожно создать единственный спец аккаунт; тогда скрипт упрощается

<script type="text/javascript">;
$('.post .pa-author a:contains("ForumBot")').each(function(){
    $(this).parents('.post').addClass('post-mystyle');
});
</script>

Далее стиль для нового класса:

<style type="text/css">
.post-mystyle .post-author, .post-mystyle .post-sig {display: none;}
.post-mystyle .post-body {margin-left: 5px;}
.post-mystyle p {
    background: none repeat scroll 0 0 #D3E0F1; /*фон голубой*/
    color: blue; /цвет синий/
    padding: 0.5em; /отступ от краев фона/
}
.post-mystyle .content .post-sig {
    display:none; /*скрыть подпись*/
}
</style>

От администрации. Скрипт вынесен в отдельный топик: Выделение постов избранных пользователей

Отредактировано Герда (21.07.2020 14:48:29)

+2

3

Deff
это круто http://uploads.ru/i/k/5/H/k5HLq.gif
пойду, пну моих заказчиков с форума ВоВ, а то они просили цветовыделение - и я их оставила мучаться с css-ом ))

0

4

Deff
Только что проверил) Круто, спасибо за такой скрипт.

0

5

Deff
Вопрос...
А можно ли сделать так, что бы не от профиля зависело, а например определенный форум делал  все свои темы(все сообщения в теме) таким макаром?
Думаю это возможно, вы же гуру кода)))

0

6

Есть вариант в определенном форуме или теме все посты ... он вроде еще пошустрее
Для форума
В HTML верх

<style id="offProvil" type="text/css">
/*Тут коды ваших стилей, к примеру*/
.post .post-author, .post.post-sig {display: none;}
.post .post-body {margin-left: 5px;}
.post p {
    background: none repeat scroll 0 0 #D3E0F1; /*фон голубой*/
    color: blue; /цвет синий/
    padding: 0.5em; /отступ от краев фона/
}
.post .content .post-sig {
    display:none; /*скрыть подпись*/
}
</style>

<script type="text/javascript">
var forumName = "О форуме"; //Название форума;
if(!$('link[rel="up"][title="'+forumName+'"]').length)$('#offProvil').remove();
</script>

Для темы
В HTML верх

<style id="offProvil2" type="text/css">
/*Тут коды ваших стилей, к примеру*/
.post .post-author, .post.post-sig {display: none;}
.post .post-body {margin-left: 5px;}
.post p {
    background: none repeat scroll 0 0 #D3E0F1; /*фон голубой*/
    color: blue; /цвет синий/
    padding: 0.5em; /отступ от краев фона/
}
.post .content .post-sig {
    display:none; /*скрыть подпись*/
}
</style>

<script type="text/javascript">
var temaId = "5073"; //ID темы;
if(document.URL.split(/viewtopic\.php\?id=|&p|#p/)[1]!=temaId)$('#offProvil2').remove();
</script>

Отредактировано Deff (20.06.2013 19:43:18)

0

7

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

определенный форум делал  все свои темы(все сообщения в теме) таким макаром?

тогда интересно, можно ли, чтоб был массив: определенном форум + определенные юзеры = обрамление поста

0

8

Deff
Последние у меня лично не работают ))) Ну да ладно и предыдущих скриптов в головой хватит. Спасибо за все)))

0

9

SergeyRatkin
Вродь поправил - были кривые/Там селекторы были склеены/

Отредактировано Deff (20.06.2013 19:16:06)

0

10

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

Для темы
В HTML верх

попробовал... работает.
Но при каждом обновлении страницы. . .  выплывает окошко,  в котором написано "false" или что то подобное. И кнопочка ОКай)

0

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

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


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

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


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Индивидуальное оформление конкретных постов (CSS)