How to add a background to userInfoPane

Hackerr · October 23, 2016

ACP -> Customization -> Themes -> Templates -> forums -> topics -> postContainer

Find:

{{$idField = $comment::$databaseColumnId;}}
{{$itemClassSafe = str_replace( '\\', '_', mb_substr( $comment::$itemClass, 4 ) );}}
{{if $comment->isIgnored()}}
	<div class='ipsComment ipsComment_ignored ipsType_light' id='elIgnoreComment_{$comment->$idField}' data-ignoreCommentID='elComment_{$comment->$idField}' data-ignoreUserID='{$comment->author()->member_id}'>
		{lang="ignoring_content" sprintf="$comment->author()->name"} <a href='#elIgnoreComment_{$comment->$idField}_menu' data-ipsMenu data-ipsMenu-menuID='elIgnoreComment_{$comment->$idField}_menu' data-ipsMenu-appendTo='#elIgnoreComment_{$comment->$idField}' data-action="ignoreOptions" title='{lang="see_post_ignore_options"}' class='ipsType_blendLinks'>{lang="options"} <i class='fa fa-caret-down'></i></a>
		<ul class='ipsMenu ipsHide' id='elIgnoreComment_{$comment->$idField}_menu'>
			<li class='ipsMenu_item ipsJS_show' data-ipsMenuValue='showPost'><a href='#'>{lang="show_this_post"}</a></li>
			<li class='ipsMenu_sep ipsJS_show'><hr></li>
			<li class='ipsMenu_item' data-ipsMenuValue='stopIgnoring'><a href='{url="app=core&module=system&controller=ignore&do=remove&id={$comment->author()->member_id}" seoTemplate="ignore"}'>{lang="stop_ignoring_posts_by" sprintf="$comment->author()->name"}</a></li>
			<li class='ipsMenu_item'><a href='{url="app=core&module=system&controller=ignore" seoTemplate="ignore"}'>{lang="change_ignore_preferences"}</a></li>
		</ul>
	</div>
{{endif}}

<a id='comment-{$comment->$idField}'></a>
<article itemscope {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}}{{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 and settings.reputation_enabled}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->author()->hasHighlightedReplies()}}ipsComment_highlighted{{endif}}{{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden()}}ipsModerated{{endif}}'>
	{{if $item->isQuestion() and !$comment->new_topic}}
		{template="postRating" group="topics" app="forums" params="$item, $comment, $votes"}
	{{endif}}
	<aside class='ipsComment_author cAuthorPane ipsColumn ipsColumn_medium'>
		<h3 class='ipsType_sectionHead cAuthorPane_author ipsType_blendLinks ipsType_break' itemprop="creator" itemscope itemtype="http://schema.org/Person"><strong itemprop="name">{$comment->author()->link( $comment->warningRef() )|raw}</strong> <span class='ipsResponsive_showPhone ipsResponsive_inline'>&nbsp;&nbsp;{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span></h3>
		<ul class='cAuthorPane_info ipsList_reset'>
			{{if $comment->author()->member_title && $comment->author()->member_id}}
				<li class='ipsResponsive_hidePhone ipsType_break'>{$comment->author()->member_title}</li>
			{{elseif $comment->author()->rank['title'] && $comment->author()->member_id}}
				<li class='ipsResponsive_hidePhone ipsType_break'>{$comment->author()->rank['title']}</li>
			{{endif}}
			{{if $comment->author()->rank['image'] && $comment->author()->member_id}}
				<li class='ipsResponsive_hidePhone'>{$comment->author()->rank['image']|raw}</li>
			{{endif}}

			<li class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			</li>
			<li>{expression="\IPS\Member\Group::load( $comment->author()->member_group_id )->formattedName" raw="true"}</li>
			{{if \IPS\Member\Group::load( $comment->author()->member_group_id )->g_icon }}
				<li class='ipsResponsive_hidePhone'><img src='{file="$comment->author()->group['g_icon']" extension="core_Theme"}' alt='' class='cAuthorGroupIcon'></li>
			{{endif}}
			{{if $comment->author()->member_id}}
				<li class='ipsResponsive_hidePhone'>{template="reputationBadge" group="global" app="core" params="$comment->author()"}</li>
				<li class='ipsType_light'>{lang="member_post_count" pluralize="$comment->author()->member_posts"}</li>
				{{if $comment->author()->reputationImage()}}
					<li class='ipsPad_half ipsResponsive_hidePhone'>
						<img src='{file="$comment->author()->reputationImage()" extension="core_Theme"}' title='{{if $comment->author()->reputation()}}{$comment->author()->reputation()}{{endif}}' alt=''>
					</li>
				{{endif}}
				{template="customFieldsDisplay" group="global" app="core" params="$comment->author()"}
			{{endif}}
		</ul>
	</aside>
	<div class='ipsColumn ipsColumn_fluid'>
		{template="post" group="topics" app="forums" params="$item, $comment, $item::$formLangPrefix . 'comment', $item::$application, $item::$module, $itemClassSafe"}
	</div>
</article>

Change to:

{{$idField = $comment::$databaseColumnId;}}
{{$itemClassSafe = str_replace( '\\', '_', mb_substr( $comment::$itemClass, 4 ) );}}
{{if $comment->isIgnored()}}
	<div class='ipsComment ipsComment_ignored ipsType_light' id='elIgnoreComment_{$comment->$idField}' data-ignoreCommentID='elComment_{$comment->$idField}' data-ignoreUserID='{$comment->author()->member_id}'>
		{lang="ignoring_content" sprintf="$comment->author()->name"} <a href='#elIgnoreComment_{$comment->$idField}_menu' data-ipsMenu data-ipsMenu-menuID='elIgnoreComment_{$comment->$idField}_menu' data-ipsMenu-appendTo='#elIgnoreComment_{$comment->$idField}' data-action="ignoreOptions" title='{lang="see_post_ignore_options"}' class='ipsType_blendLinks'>{lang="options"} <i class='fa fa-caret-down'></i></a>
		<ul class='ipsMenu ipsHide' id='elIgnoreComment_{$comment->$idField}_menu'>
			<li class='ipsMenu_item ipsJS_show' data-ipsMenuValue='showPost'><a href='#'>{lang="show_this_post"}</a></li>
			<li class='ipsMenu_sep ipsJS_show'><hr></li>
			<li class='ipsMenu_item' data-ipsMenuValue='stopIgnoring'><a href='{url="app=core&module=system&controller=ignore&do=remove&id={$comment->author()->member_id}" seoTemplate="ignore"}'>{lang="stop_ignoring_posts_by" sprintf="$comment->author()->name"}</a></li>
			<li class='ipsMenu_item'><a href='{url="app=core&module=system&controller=ignore" seoTemplate="ignore"}'>{lang="change_ignore_preferences"}</a></li>
		</ul>
	</div>
{{endif}}

<a id='comment-{$comment->$idField}'></a>
<article itemscope {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}}{{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 and settings.reputation_enabled}}ipsComment_popular{{endif}} ipsComment_parent ipsClearfix ipsClear ipsColumns ipsColumns_noSpacing ipsColumns_collapsePhone {{if $comment->author()->hasHighlightedReplies()}}ipsComment_highlighted{{endif}}{{if $comment->isIgnored()}}ipsHide{{endif}} {{if $comment->hidden()}}ipsModerated{{endif}}'>
	{{if $item->isQuestion() and !$comment->new_topic}}
		{template="postRating" group="topics" app="forums" params="$item, $comment, $votes"}
	{{endif}}
	<aside class='ipsComment_author cAuthorPane ipsColumn ipsColumn_medium'>
		<h3 class='ipsType_sectionHead cAuthorPane_author ipsType_blendLinks ipsType_break' itemprop="creator" itemscope itemtype="http://schema.org/Person"><strong itemprop="name">{$comment->author()->link( $comment->warningRef() )|raw}</strong> <span class='ipsResponsive_showPhone ipsResponsive_inline'>&nbsp;&nbsp;{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span></h3>
  <div class='author_info'>
			<div class="seeq_userinfo" itemscope="" itemtype="http://schema.org/Person">
				{{$coverPhoto = $comment->author()->coverPhoto();}}
				{{if $coverPhoto->file}}
					<div class="seeq_userinfo_bg seeq_userinfo_bg-img" style="background-image: url('{$coverPhoto->file->url}') !important;margin-bottom: -110px !important;"></div>
				{{else}}
					{{endif}}
				</div></div>
     <ul class='cAuthorPane_info ipsList_reset'>
			<li class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			</li>
			<li>{expression="\IPS\Member\Group::load( $comment->author()->member_group_id )->formattedName" raw="true"}</li>
			{{if \IPS\Member\Group::load( $comment->author()->member_group_id )->g_icon }}
				<li class='ipsResponsive_hidePhone'><img src='{file="$comment->author()->group['g_icon']" extension="core_Theme"}' alt='' class='cAuthorGroupIcon'></li>
			{{endif}}
			{{if $comment->author()->member_id}}
				<li class='ipsResponsive_hidePhone'>{template="reputationBadge" group="global" app="core" params="$comment->author()"}</li>
				<li class='ipsType_light'>{lang="member_post_count" pluralize="$comment->author()->member_posts"}</li>
				{{if $comment->author()->reputationImage()}}
					<li class='ipsPad_half ipsResponsive_hidePhone'>
						<img src='{file="$comment->author()->reputationImage()" extension="core_Theme"}' title='{{if $comment->author()->reputation()}}{$comment->author()->reputation()}{{endif}}' alt=''>
					</li>
				{{endif}}
				{template="customFieldsDisplay" group="global" app="core" params="$comment->author()"}
			{{endif}}
		</ul>
	</aside>
	<div class='ipsColumn ipsColumn_fluid'>
		{template="post" group="topics" app="forums" params="$item, $comment, $item::$formLangPrefix . 'comment', $item::$application, $item::$module, $itemClassSafe"}
	</div>
</article>

I add the code to custom.css

.seeq_userinfo_bg {
    background: #fff !important;
    background-size: 100% 100% !important;
    border-radius: 2px 2px 0 0;
    height: 50px
}
.seeq_userinfo_bg-img {
   background-color: #FFFFFF !important;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   background-size: 100% 100% !important;
   height: 110px;
   margin-left: 0px !important;
}

Luca Munich · October 24, 2016

Preview?

Hackerr · October 24, 2016

5 hours ago, Luca Munich said:

Preview?

UncleBear · October 24, 2016

Could you specify out what code did you change, instead of giving the full code to copy and paste?

titcrunch · October 24, 2016

why change core code for just add a background, when you can make same thing only in css ? because with your methode at all next update you lose modification all time ...

Hackerr · October 24, 2016

57 minutes ago, UncleBear said:

Could you specify out what code did you change, instead of giving the full code to copy and paste?

Find:

<h3 class='ipsType_sectionHead cAuthorPane_author ipsType_blendLinks ipsType_break' itemprop="creator" itemscope itemtype="http://schema.org/Person"><strong itemprop="name">{$comment->author()->link( $comment->warningRef() )|raw}</strong> <span class='ipsResponsive_showPhone ipsResponsive_inline'>&nbsp;&nbsp;{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span></h3>
		<ul class='cAuthorPane_info ipsList_reset'>
			{{if $comment->author()->member_title && $comment->author()->member_id}}
				<li class='ipsResponsive_hidePhone ipsType_break'>{$comment->author()->member_title}</li>
			{{elseif $comment->author()->rank['title'] && $comment->author()->member_id}}
				<li class='ipsResponsive_hidePhone ipsType_break'>{$comment->author()->rank['title']}</li>
			{{endif}}
			{{if $comment->author()->rank['image'] && $comment->author()->member_id}}
				<li class='ipsResponsive_hidePhone'>{$comment->author()->rank['image']|raw}</li>
			{{endif}}

Change to:

<h3 class='ipsType_sectionHead cAuthorPane_author ipsType_blendLinks ipsType_break' itemprop="creator" itemscope itemtype="http://schema.org/Person"><strong itemprop="name">{$comment->author()->link( $comment->warningRef() )|raw}</strong> <span class='ipsResponsive_showPhone ipsResponsive_inline'>&nbsp;&nbsp;{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span></h3>
  <div class='author_info'>
			<div class="seeq_userinfo" itemscope="" itemtype="http://schema.org/Person">
				{{$coverPhoto = $comment->author()->coverPhoto();}}
				{{if $coverPhoto->file}}
					<div class="seeq_userinfo_bg seeq_userinfo_bg-img" style="background-image: url('{$coverPhoto->file->url}') !important;margin-bottom: -110px !important;"></div>
				{{else}}
					{{endif}}
				</div>
             </div>

UncleBear · October 24, 2016

Thank you, but how do you make it so, that a specific group has a background image/color, and another specific group has the same etc etc?

markisac · December 14, 2016

how can we get different hover effects for each user profile ?

thanks

Sign In

Advertisement

How to add a background to userInfoPane

Recommended Posts

Hackerr

Link to comment

Share on other sites

Luca Munich

Link to comment

Share on other sites

Hackerr

Link to comment

Share on other sites

UncleBear

Link to comment

Share on other sites

titcrunch

Link to comment

Share on other sites

Hackerr

Link to comment

Share on other sites

UncleBear

Link to comment

Share on other sites

markisac

Link to comment

Share on other sites

Join the conversation

Forums

Downloads