[RoXen 9]

hi

how can I make a style for my postbit like below:

Spoiler

this posbit is from dark/light fluent them

 

please help me.

[Ciko 4 795]

Replace all in postContainer

{{$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 {{if $comment->author()->hasHighlightedReplies()}}data-memberGroup="{$comment->author()->member_group_id}" {{endif}} id='elComment_{$comment->$idField}' class='cPost ipsBox ipsResponsive_pull {{if $otherClasses}}{$otherClasses}{{endif}} ipsComment {{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) OR $comment->isFeatured()}}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() OR $item->hidden() === -2}}ipsModerated{{endif}} {{if ( $comment->item()->isSolved() and $comment->item()->mapped('solved_comment_id') == $comment->pid )}}ipsComment_solved{{endif}}'>
	{{if $item->isQuestion() and !$comment->new_topic}}
		{template="postRating" group="topics" app="forums" params="$item, $comment, $votes"}
	{{endif}}

	{{if $comment->author()->hasHighlightedReplies() || ( $comment->item()->isSolved() and $comment->item()->mapped('solved_comment_id') == $comment->pid ) || $comment->isFeatured() || ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) }}
		<div class='ipsResponsive_showPhone ipsComment_badges'>
			<ul class='ipsList_reset ipsFlex ipsFlex-fw:wrap ipsGap:2 ipsGap_row:1'>
				{{if $comment->author()->hasHighlightedReplies()}}
					<li><strong class='ipsBadge ipsBadge_large ipsBadge_highlightedGroup'>{expression="\IPS\Member\Group::load( $comment->author()->member_group_id )->name" raw="true"}</strong></li>
				{{endif}}
				{{if ( $comment->item()->isSolved() and $comment->item()->mapped('solved_comment_id') == $comment->pid )}}
					<li><strong class='ipsBadge ipsBadge_large ipsBadge_positive ipsBadge_reverse'><i class='fa fa-check'></i> {lang="this_is_a_solved_post"}</strong></li>
				{{endif}}
				{{if $comment->isFeatured()}}
					<li><strong class='ipsBadge ipsBadge_large ipsBadge_popular'>{lang="this_is_a_featured_post"}</strong></li>
				{{endif}}
				{{if ( settings.reputation_enabled and settings.reputation_highlight and $comment->reactionCount() >= settings.reputation_highlight ) }}
					<li><strong class='ipsBadge ipsBadge_large ipsBadge_popular'>{lang="this_is_a_popular_post"}</strong></li>
				{{endif}}
			</ul>
		</div>
	{{endif}}

	<div class='cAuthorPane_mobile ipsResponsive_showPhone'>
		<div class='cAuthorPane_photo'>
			{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
			{{if $comment->author()->modShowBadge()}}
			<span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
			{{elseif $comment->author()->joinedRecently()}}
			<span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
			{{endif}}
		</div>
		<div class='cAuthorPane_content'>
			<h3 class='ipsType_sectionHead cAuthorPane_author ipsType_break ipsType_blendLinks ipsTruncate ipsTruncate_line'>
				{template="userLink" group="global" app="core" params="$comment->author(), $comment->warningRef(), TRUE"}
				<span class='ipsMargin_left:half'>{template="reputationBadge" group="global" app="core" params="$comment->author()"}</span>
			</h3>
			<div class='ipsType_light ipsType_reset'>
				<a href='{$comment->item()->url()->setQueryString( array( 'do' => 'findComment', 'comment' => $comment->$idField ) )}' class='ipsType_blendLinks'>{$comment->dateLine()|raw}</a>
				{{if $comment->ip_address and \IPS\Member::loggedIn()->modPermission('can_use_ip_tools') and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'modcp' ) )}}
					&middot; <a class='ipsType_blendLinks ipsType_light ipsType_noUnderline ipsType_noBreak' href="{url="app=core&module=modcp&controller=modcp&tab=ip_tools&ip=$comment->ip_address" seoTemplate="modcp_ip_tools"}" data-ipsMenu data-ipsMenu-menuID='{$comment->$idField}_ip_menu'>{lang="ip_short"} <i class='fa fa-angle-down'></i></a>
				{{endif}}
			</div>
		</div>
	</div>
	<aside class='ipsComment_author cAuthorPane ipsColumn ipsColumn_medium ipsResponsive_hidePhone'>
		<h3 class='ipsType_sectionHead cAuthorPane_author ipsType_blendLinks ipsType_break'><strong>{template="userLink" group="global" app="core" params="$comment->author(), $comment->warningRef(), FALSE"}</strong></h3>
		<ul class='cAuthorPane_info ipsList_reset'>
			<li data-role='photo' class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
				{{if $comment->author()->modShowBadge()}}
				<span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
				{{elseif $comment->author()->joinedRecently()}}
				<span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
				{{endif}}
			</li>
          <li data-role='group'>{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 data-role='group-icon'><img src='{file="$comment->author()->group['g_icon']" extension="core_Theme"}' alt='' class='cAuthorGroupIcon'></li>
			{{endif}}
          	<ul class='ipsFlex ipsFlex-ai:center ipsFlex-jc:center aXenTopics_cAuthorPane_icons'>
            			<li data-role='posts' class='ipsFlex ipsFlex-jc:center ipsFlex-ai:center' data-ipstooltip _title="{lang="announce_type_content"}">
              				<i class="fa fa-comments"></i>
              				<span class="ipsFlex ipsFlex-jc:center ipsFlex-ai:center">{number="$comment->author()->member_posts" format="short"}</span>
            			</li>
                      
            			<li data-role='reputation' class='ipsFlex ipsFlex-jc:center ipsFlex-ai:center {{if $comment->author()->pp_reputation_points > 1}}aXenTopics_cAuthorPane_icons_positive{{elseif $comment->author()->pp_reputation_points < 0}}aXenTopics_cAuthorPane_icons_negative{{else}}aXenTopics_cAuthorPane_icons_neutral{{endif}}' data-ipstooltip _title="{lang="mf_reputation"}">
              				<i class="{{if $comment->author()->pp_reputation_points >= 0}}fa fa-plus{{else}}fa fa-minus{{endif}}"></i>
              				<span class="ipsFlex ipsFlex-jc:center ipsFlex-ai:center">{number="$comment->author()->pp_reputation_points" format="short"}</span>
            			</li>
                      	{{if theme.fluent_topics_cAuthorPane_style_last == 0}}
            				<li data-role='solved' class='ipsFlex ipsFlex-jc:center ipsFlex-ai:center' data-ipstooltip _title="{lang="solved_solved"}">
              					<i class="fa fa-check"></i>
              					<span class="ipsFlex ipsFlex-jc:center ipsFlex-ai:center">{{if isset( $comment->author_solved_count )}}{number="$comment->author_solved_count" format="short"}{{else}}0{{endif}}</span>
            				</li>
                     	 {{else}}
            				<li data-role='rep' class='ipsFlex ipsFlex-jc:center ipsFlex-ai:center' data-ipstooltip _title="{lang="members_days_won_count"}">
              					<i class="fa fa-thumbs-up" aria-hidden="true"></i>
              					<span class="ipsFlex ipsFlex-jc:center ipsFlex-ai:center"><i class="fa fa-thumbs-up" aria-hidden="true"></i>{number="$comment->author()->getReputationDaysWonCount()" format="short"}</span>
            				</li>
                      	{{endif}}
          			</ul>
          <li data-role='member-id' class='ipsType_light'><i class="fa fa-user"></i> {lang="member_id"}: {$comment->author()->member_id}</li>
          <li data-role='days-won' class='ipsType_light'><i class="fa fa-trophy"></i> {lang="members_days_won_count"}: {number="$comment->author()->getReputationDaysWonCount()"}</li>
          <li data-role='joined' class='ipsType_light'><i class="fa fa-user-plus"></i> {lang="joined"}: {datetime="$comment->author()->joined" dateonly="true"}</li>
			{template="customFieldsDisplay" group="global" app="core" params="$comment->author()"}
			
		</ul>
	</aside>
	<div class='ipsColumn ipsColumn_fluid ipsMargin:none'>
		{template="post" group="topics" app="forums" params="$item, $comment, $item::$formLangPrefix . 'comment', $item::$application, $item::$module, $itemClassSafe"}
	</div>
</article>

Add to custom.css

.aXenTopics_cAuthorPane_icons {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.aXenTopics_cAuthorPane_icons li {
    border-radius: 100%;
    position: relative;
    font-size: 15px;
    width: 40px;
    height: 40px;
}

.aXenTopics_cAuthorPane_icons li[data-role='posts'] {
    background: #177ec9;
    color: #fff;
}

.aXenTopics_cAuthorPane_icons_positive {
  	background: var(--positive-dark);
    color: #fff;
}
.aXenTopics_cAuthorPane_icons_negative {
  	background: var(--negative-dark);
    color: #fff;
}
.aXenTopics_cAuthorPane_icons_neutral {
  	background: rgb( var(--theme-area_background) );
	color: rgb( var(--theme-text_dark) );
}

.aXenTopics_cAuthorPane_icons li[data-role='solved'] {
	background: #2c8c45;
    color: #fff;
}

.aXenTopics_cAuthorPane_icons li[data-role='days-won'] {
	background: #c70000;
    color: #fff;
}

.aXenTopics_cAuthorPane_icons li:not(:last-child) {
  	margin-right: 20px;
}

.aXenTopics_cAuthorPane_icons li span {
	border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    bottom: -7px;
    right: -2px;
    height: 17px;
    padding: 0 5px;
    background-color: var(--box--backgroundColor);
    color: rgb( var(--theme-text_light) );
    white-space: nowrap;
}
.aXenTopics_cAuthorPane_info {
	margin: 10px 0;
}

.aXenTopics_cAuthorPane_info > li {
	display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb( var(--theme-text_light) );
}
.aXenTopics_cAuthorPane_info > li > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.aXenTopics_cAuthorPane_info .aXenTopics_cAuthorPane_info\:content {
    max-width: 50%;
}
.aXenTopics_cAuthorPane_info > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb( var(--theme-text_light) );
}

 

[RoXen 9]

really really thanks.

you're best