Invision Power Board (3.4) Tutorial Suggestions

[23286027318020]

Alright, I've decided to post a few tutorials and code snippets for Invision Power Board 3.4 (not going to get into the 4 beta yet) so if you have any questions or things you'd like to see done for IPBoard post it below and let me know. I'll do my best to post tutorials for whatever is asked. I'll be posting them into the tutorials sub-forum (logical, I know) so keep an eye out for them there. I only intend on doing this over the course of the weekend but if the response is good I'll possibly carry on posting different tutorials. There's a good chunk of ones out there already admittedly, but I'll be happy to either re-write, or re-explain ones located elsewhere.

The Web Dev section is where I spend most of my Rune-Server browsing, so I figured I'd leave a bit of a mark and contribute useful content to it!

• [Only registered and activated users can see links. ]

[Quacked]

Using css code in user titles, like how yours says 'Designer & Counquer'.
In IP.B you have to do quite some work to get it working and finding it is a pain in the ass.

[23286027318020]

Using css code in user titles, like how yours says 'Designer & Counquer'.
In IP.B you have to do quite some work to get it working and finding it is a pain in the ass.

There is a setting in the ACP to allow users to set their own titles, the ACP won't allow for HTML usertitles though, however, using my other tutorial you could target a user's title using CSS selectors.

[Sonico]

I would love to see a tutorial for custom postibit background IPB 4.1

[23286027318020]

I would love to see a tutorial for custom postibit background IPB 4.1

Templates > Forums > Front > Topic > postContainer

Change

<article itemscope {{if $item->isQuestion() && !$comment->new_topic}}itemprop="suggestedAnswer {{if $comment->post_bwoptions['best_answer']}}acceptedAnswer{{endif}}" itemtype="http://schema.org/Answer"{{else}}itemtype="http://schema.org/Comment"{{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if settings.reputation_highlight and $comment->reputation() >= settings.reputation_highlight}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden()}}ipsModerated{{endif}}'>

to

<article itemscope {{if $item->isQuestion() && !$comment->new_topic}}itemprop="suggestedAnswer {{if $comment->post_bwoptions['best_answer']}}acceptedAnswer{{endif}}" itemtype="http://schema.org/Answer"{{else}}itemtype="http://schema.org/Comment"{{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if settings.reputation_highlight and $comment->reputation() >= settings.reputation_highlight}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden()}}ipsModerated{{endif}} member_{$comment->author()->member_id} member_group_{$comment->author()->member_group_id}'>

Now the CSS you'd want to use would be structured like this:

.ipsComment.member_{$id} <--- Member specific
.ipsComment.member_group_{$id} <--- Group specific

[Sonico]

Templates > Forums > Front > Topic > postContainer

Change

<article itemscope {{if $item->isQuestion() && !$comment->new_topic}}itemprop="suggestedAnswer {{if $comment->post_bwoptions['best_answer']}}acceptedAnswer{{endif}}" itemtype="http://schema.org/Answer"{{else}}itemtype="http://schema.org/Comment"{{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if settings.reputation_highlight and $comment->reputation() >= settings.reputation_highlight}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden()}}ipsModerated{{endif}}'>

to

<article itemscope {{if $item->isQuestion() && !$comment->new_topic}}itemprop="suggestedAnswer {{if $comment->post_bwoptions['best_answer']}}acceptedAnswer{{endif}}" itemtype="http://schema.org/Answer"{{else}}itemtype="http://schema.org/Comment"{{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if settings.reputation_highlight and $comment->reputation() >= settings.reputation_highlight}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden()}}ipsModerated{{endif}} member_{$comment->author()->member_id} member_group_{$comment->author()->member_group_id}'>

Now the CSS you'd want to use would be structured like this:

.ipsComment.member_{$id} <--- Member specific
.ipsComment.member_group_{$id} <--- Group specific

Tyvm for this!

I changed the line in the template, and added this to my custom.css file:

.ipsComment.member_1 .author_info{
  background-image: url(http://i.imgur.com/AJu0ysc.png);
  background-repeat: no-repeat;
}

But the image didn't show up, did I do something wrong in the css?

[23286027318020]

Tyvm for this!

I changed the line in the template, and added this to my custom.css file:

.ipsComment.member_1 .author_info{
  background-image: url(http://i.imgur.com/AJu0ysc.png);
  background-repeat: no-repeat;
}

But the image didn't show up, did I do something wrong in the css?

.ipsComment.member_1 .ipsComment_author {
    background: url(http://i.imgur.com/AJu0ysc.png) no-repeat;
}

[metehany01]

Templates > Forums > Front > Topic > postContainer

Change

<article itemscope {{if $item->isQuestion() && !$comment->new_topic}}itemprop="suggestedAnswer {{if $comment->post_bwoptions['best_answer']}}acceptedAnswer{{endif}}" itemtype="http://schema.org/Answer"{{else}}itemtype="http://schema.org/Comment"{{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if settings.reputation_highlight and $comment->reputation() >= settings.reputation_highlight}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden()}}ipsModerated{{endif}}'>

to

<article itemscope {{if $item->isQuestion() && !$comment->new_topic}}itemprop="suggestedAnswer {{if $comment->post_bwoptions['best_answer']}}acceptedAnswer{{endif}}" itemtype="http://schema.org/Answer"{{else}}itemtype="http://schema.org/Comment"{{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if settings.reputation_highlight and $comment->reputation() >= settings.reputation_highlight}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden()}}ipsModerated{{endif}} member_{$comment->author()->member_id} member_group_{$comment->author()->member_group_id}'>

Now the CSS you'd want to use would be structured like this:

.ipsComment.member_{$id} <--- Member specific
.ipsComment.member_group_{$id} <--- Group specific

Hello how can I do this like cover photo? I mean, user upload a cover photo from his profile page, and that photo comes to postbit as background, behind avatar.