Jump to content
DevFuse Forums

Profile in themes


Description

this will add a hover side to side profile when viewing a topic it will show your profile from different sides

In custom.css add

.bg-top {
    padding: 0;
    margin: 0 auto;
}

.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
    width: 235px;
    height: 300px;
    display: inline-block;
    margin: 0px 0px;
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front {
    z-index: 2;
    transform: rotateX(0deg);
}

.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: -5px;
    left: 0;
}

.tops {
    display: inline-block;
    width: 235px;
    height: 300px;
    background: #FFF;
    border-bottom: 4px solid rgb(35, 35, 49);
    border-top: 2px solid rgb(35, 35, 49);
}

.top-cursor {
    /* background: url(https://zone-cs.ru/banners/0000FF.png) repeat; */
    color: #232331;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 235px;
    position: absolute;
    bottom: 20px;
    /* left: 5px; */
    height: 30px;
    line-height: 30px;
    border: 2px solid #3e81f1;
    box-shadow: 0 0 24px 0 #3e81f1;
    /* box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75); */
    border-radius: 3px;
    padding: 0 5px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
    font-weight: normal;
    font-style: italic;
}

.top-img {
    width: 235px;
    height: 278px;
    margin: 45px auto;
}

.top-img img {
width: 215px;
height: 195px;
}

.top-ico {position:absolute;top:6px;left:5px;}
.top-ico img {}

.back {
    background: #fff;
    transform: rotateY(-180deg);
    border-bottom: 4px solid rgba(29,84,167,0.7);
    border-top: 4px solid rgba(29, 84, 167, 0);
}

.top-line1 ,.top-line2,.top-line3,.top-line4{
width:235px;
padding:0 0 0 5px;
background:#adadad;
height:30px;
line-height:30px;
margin:2px 0;
border-bottom:1px solid #2C3E50;
}

.top-line3 a {font-size:11px;color:#2C3E50;}
.top-line4 a {}
/* postContainer с переворотом конец */
.postContainer-Indicator {
    position: absolute;
    left: 0px;
    top: 2px;
    z-index: 1;
    overflow: hidden;
    width: 120px;
    height: 120px;
    text-align: right;
}
.postContainer-Indicator .postContainer-Indicator_indicator {
    font-size: 12px;
    color: #fefefe;
    font-weight: 700;
    position: absolute;
    top: 33px;
    left: -40px;
    text-transform: uppercase;
    text-align: center;
    line-height: 22px;
    width: 190px;
    display: block;
    background: linear-gradient(0deg, #232331 80%, #3a3a4f 82%, #96969d);
    box-shadow: 0 3px 10px -5px #96969d;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}



.postContainer_Login {
    position: absolute;
    left: 0px;
    top: 2px;
    z-index: 1;
    overflow: hidden;
    width: 120px;
    height: 120px;
    text-align: right;
}
.postContainer_Login .postContainer_Login_B {
    font-size: 12px;
    color: #fefefe;
    font-weight: 700;
    position: absolute;
    top: 33px;
    left: -40px;
    text-transform: uppercase;
    text-align: center;
    line-height: 22px;
    width: 190px;
    display: block;
    background: linear-gradient(0deg, #232331 80%, #3a3a4f 82%, #96969d);
    box-shadow: 0 3px 10px -5px #96969d;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.message-postStarter {
    position: absolute;
    left: 0px;
    top: -3px;
    z-index: 1;
    overflow: hidden;
    width: 65px;
    height: 85px;
    text-align: right;
}
.message-postStarter .message-postStarter_indicator {
    font-size: 9px;
    color: #fefefe;
    font-weight: 700;
    position: absolute;
    top: 18px;
    left: -25px;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    width: 100px;
    display: block;
    background: linear-gradient(#52a7d8 0%, #17618c 100%);
    box-shadow: 0 3px 10px -5px #000;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.message-postStarter .message-postStarter_indicator:before {
    left: 0;
    border-left-color: #79A70A;
    border-right-color: transparent;
}
.message-postStarter .message-postStarter_indicator:after {
    left: 0;
    border-left-color: #79A70A;
    border-right-color: transparent;
}

.message-threadStarter .message-threadStarter_indicator:before, 
.message-threadStarter .message-threadStarter_indicator:after {
    content: "";
    position: absolute;
    top: 100%;
    z-index: -1;
    border: 3px solid;
    border-top-color: #79A70A;
    border-bottom-color: transparent;
}
.cAuthorPane {
    padding: 5px !important;
}
.cPost.ipsModerated, .cPost.ipsModerated .cAuthorPane {
    background: #1d1d25 !important;
}
aside.ipsComment_author.cAuthorPane.ipsColumn.ipsColumn_medium {
    width: 245px;
}

.wa_pContainer {
    padding-top: 2px;
    background-color: rgb(245, 245, 245);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    margin: -5px 0px 0px 0px;
    border-top: 2px solid #272727;
    border-radius: 5px;
}

.pContainer_b1 {
    margin-top: 0px;
    margin-bottom: 5px;
    text-align: center;
}

.pContainer_b1 img {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 500px;
    height: 90px;
}

.pc_coverphoto {
    margin-bottom: 5px !important;
    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: 95px;
    width: 100%;
    /*margin-left: -5px !important;*/
    margin: -100px 0 0 0;
}

.wa_pContainer_b2 {
    overflow: hidden;
    padding: 8px 0;
  background: linear-gradient(55deg, #dcdcdc 50%, #dcdcdc 50%, #dcdcdc);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
}

.wa_pContainer_b2_1 {
    width: 50%;
    float: left;
}

.wa_pContainer_b2_1 .ipsRepBadge {
    font-size: 15px;
    font-weight: normal;
}

.wa_pContainer_b2_m {
    color: #1b1b1b;
    text-transform: uppercase;
    font-size: 11px;
}

.wa_pContainer_b3 {
  margin: 5px 0;
}

.wa_pContainer_b4 {
  margin: 5px 0;
}

.textnikkk {
margin-bottom: 3px;
        margin-left: 2px;
    margin-right: 2px;
    line-height: 25px;
    border-radius: 5px;
    font-size: 14px !important;
    max-width: 100%;
    /*background-color: rgba(0, 0, 0, 0.2);*/
    box-shadow: 0 1px 3px rgb(196, 196, 196) inset, 0 0 0 1px rgb(196, 196, 196), 0 1px 0 rgb(196, 196, 196);
}
.textGrop {
  margin-top: 5px;
    margin-bottom: 8px;
    margin-left: 2px;
    margin-right: 2px;
    line-height: 25px;
    border-radius: 5px;
    font-size: 14px !important;
    max-width: 100%;
    /*background-color: rgba(0, 0, 0, 0.2);*/
    box-shadow: 0 1px 3px rgb(196, 196, 196) inset, 0 0 0 1px rgb(196, 196, 196), 0 1px 0 rgb(196, 196, 196);
}
.textGroprank:hover {
    background: rgb(220, 220, 220);
}
.textGroprank {
    margin-bottom: 5px;
    margin-left: 2px;
    margin-right: 2px;
    line-height: 20px;
    height: 24px;
    border-radius: 5px;
    font-size: 14px !important;
    max-width: 100%;
    /* background: linear-gradient(55deg, #fafafa 50%, #fafafa 50%, #fafafa); */
    box-shadow: 0px 0px 10px 0px #dcdcdc;
    margin-top: 5px;
}

.autornik {
display: block;
    line-height: 10px;
    -moz-hyphens: initial;
    margin-top: -5px;
    height: 25px;
    border-radius: 35px;
    font-size: 16px !important;
    max-width: 100%;
    /* background: #1c1d2680; */
    background: linear-gradient(55deg, #232331 80%, #f1f1f500 100%, #ededef00);
    font-family: 'Roboto Condensed', sans-serif;
}
.oNpane1 {
position: relative;
    display: inline-block;
    float: left;
    height: 20px;
    width: 30px;
    border-radius: 50px;
    border: 1px solid #249168;
    font-size: 18px;
    text-align: center;
    line-height: 25px;
    color: #56cf61;
    margin: 0 auto;
    margin-top: 2px;
    margin-left: 30px;
    margin-right: -50px;
}
.oFFpane1 {
position: relative;
    display: inline-block;
    float: left;
    height: 20px;
    width: 30px;
    border-radius: 50px;
    border: 1px solid #ab300b;
    font-size: 18px;
    text-align: center;
    line-height: 25px;
    color: #f52e0c;
    margin: 0 auto;
    margin-top: 2px;
    margin-left: 30px;
    margin-right: -50px;
}
.paneLogin {
    border-top: 5px solid #303c4a;
    border-bottom: 5px solid #37474f;
    background: linear-gradient(#37474f61 10%, #1213176b 90%) !important;
    border-radius: 5px;
    position: relative;
    margin: 0 auto;
    margin-top: 0px;
    margin-left: -10px;
    margin-right: -10px;
}
.uip:hover {
    background: rgb(220, 220, 220);
}
.uip {
    padding: 5px;
    display: inline-block;
    width: 98%;
    color: #1b1b1b;
    padding: 1px 10px;
    margin-top: -2px;
    border-radius: 5px;
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: #dcd8d8;
    background: #f5f5f5;
    border: 1px #dcdcdc solid;
    box-shadow: inset rgb(220, 220, 220) 0px 1px 5px, rgb(220, 220, 220) 0px 0px 0px, rgb(220, 220, 220) 0px 0px 1px 0px;
}

.leftinfo {
    font-size: 11px;
    float: left;
    text-align: left;
    margin-right: 3px;
    margin-left: 0;
    min-width: 60px;
    width: auto !important;
}

.rightinfo {
    float: right;
    color: #1b1b1b;
    font-size: 11px;
}

In the postContainer, replace with

 

{{$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 {{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 $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'>
      <div class=" bg-top"="">		
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<div class="tops">
<div class="top-cursor">To view, hover over the</div>
<div class="top-img"><img class="img_mp" src="{resource="2018/3.PNG" app="core" location="global"}" alt=""></div>
<div class="postContainer_Login">
<span class="postContainer_Login_B">
<strong>{$comment->author()->link( $comment->warningRef() )|raw}</strong>
</span>
</div>
</div>
		</div>
		<div class="back">
	    <div class='author_info'>
			<div class="wa_pContainer" itemscope="" itemtype="http://schema.org/Person">
              <div class='textnikkk'>
                <h3 class='ipsType_sectionHead cAuthorPane_author ipsType_blendLinks ipsType_break'><strong>{$comment->author()->link( $comment->warningRef() )|raw}</strong> 
                  <span class='ipsResponsive_showPhone ipsResponsive_inline'>  {template="reputationBadge" group="global" app="core" params="$comment->author()"}</span></h3>
                  
                  </div>
				<div class="pContainer_b1">
					{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
				</div>
              
              		{{$coverPhoto = $comment->author()->coverPhoto();}}
				    {{if $coverPhoto->file}}
					<div class="pc_coverphoto" style="background-image: url('{$coverPhoto->file->url}') !important;">
              </div>
			          {{else}}
			          {{endif}}
 <div class='textGroprank'>
   {{if $comment->author()->rank['image'] && $comment->author()->member_id}}
				{$comment->author()->rank['image']|raw}
			{{endif}}</div>
{{if $comment->author()->member_id and $item->author()->member_id == $comment->author()->member_id}}
<div class="message-postStarter">
<span class="message-postStarter_indicator">Starter</span></div>
{{endif}} 
{{if $comment->author()->inGroup(array(3))}}While empty{{endif}}              
{template="reputationBadge" group="global" app="core" params="$comment->author()"}              
 <div class='textGrop'>{expression="\IPS\Member\Group::load( $comment->author()->member_group_id )->formattedName" raw="true"}
			{{if \IPS\Member\Group::load( $comment->author()->member_group_id )->g_icon }}
				<img src='{file="$comment->author()->group['g_icon']" extension="core_Theme"}' alt='' class='cAuthorGroupIcon'>
			{{endif}}
</div>              
                    
<li class="uip">
<span class="leftinfo"><i class="fa fa-star-half-o"></i> Rank:</span>
 {{if $comment->author()->member_title && $comment->author()->member_id}} 
<span class="rightinfo">{$comment->author()->member_title}</span>
 {{elseif $comment->author()->rank['title'] && $comment->author()->member_id}} 
<span class="rightinfo">{$comment->author()->rank['title']}</span>
  {{endif}}
</li> 
<li class="uip">
 {{$date_joined = floor((strtotime("now")-strtotime("{$comment->author()->joined}"))/86400) ;}}  
<span class="leftinfo"><i class="fa fa-calendar"></i> With us already:</span>
<span class="rightinfo">{$date_joined} days</span>
</li>                             
<li class="uip">
<span class="leftinfo"><i class="fa fa-trophy fa-lg" aria-hidden="true"></i> {lang="members_days_won_count"}</span>
<span class="rightinfo">{number="$comment->author()->getReputationDaysWonCount()"}</span>
</li>      
           			                         
            
            <div class="wa_pContainer_b2">
			<div class="wa_pContainer_b2_1">
			<div>
			<span class="wa_pContainer_b2_m">Topics</span>
			</div>
			<span style="font-size: 15px;">{{$where[] = "starter_id = " . $comment->author()->member_id;}}
{{$author_topics = \IPS\forums\Topic::getItemsWithPermission( $where, NULL, 0 );}}
{{$topics_count = count($author_topics);}} {$topics_count}</span>
			</div>
            <div class="wa_pContainer_b2_1">
			<div>
			<span class="wa_pContainer_b2_m">Posts</span>
			</div>
			<span style="font-size: 15px;">{$comment->author()->member_posts}</span>
			</div>
			</div>
			</div>
		</div>
          
          
</div>		
</div>		
</div>          
 <br>         
</div>          
	</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>

Screenshot_1.png.9b61205a12fe84d61351191dbbc62060.thumb.png.82e6d0bb568518872ebcd0b80edc4ec7.png



Recommended Comments

There are no comments to display.

×