1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

how to put "in line" some extra user infos?

Discussion in 'Styling and Customization Questions' started by giorgino, Feb 1, 2012.

  1. giorgino

    giorgino Well-Known Member

    How can I modify templates or CSS to put inline some extra user infos?

    Ex: Punteggio: 0


    Schermata 02-2455959 alle 23.17.43.png
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can use a profile field for that:

    Admin CP -> Users -> Custom User Fields

    When adding or editing a field there is this option you need to enable:

    General Options: Viewable in message user info

    In addition, make sure this is enabled in your style:

    Admin CP -> Appearance -> Style Properties -> Message Elements -> Show custom user fields

    Now when a user enters a value into that field it will show in their posts.
     
  3. giorgino

    giorgino Well-Known Member

    Thank you Jake, but I mean the graphic part of the concept. :)
    I need to align the description with the content in one line.
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Oh. o_O

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this:

    Code:
    .messageUserInfo .extraUserInfo dl.pairsInline dt,
    .messageUserInfo .extraUserInfo dl.pairsInline dd
    {
    	display: inline;
    }
    
     
    Klaudius and Young like this.
  5. giorgino

    giorgino Well-Known Member

    Great! :)
    Perfect!
     
  6. giorgino

    giorgino Well-Known Member

    Jake one more thing... don't hate me :rolleyes:

    The same thing for the profile page?

    Schermata 02-2455961 alle 22.51.49.png
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    It's a bit hackish, but it works:

    Code:
    .profilePage .infoBlock dl.pairs dt,
    .profilePage .infoBlock dl.pairs dd
    {
    	display: inline;
    }
    
    .profilePage .infoBlock dl.pairs dd:after
    {
    	content: '';
    	margin-bottom: 5px;
    	display: block;
    }
    
     
  8. giorgino

    giorgino Well-Known Member

    Thank you Jake, but the information appears without line breaks

    Schermata 02-2455964 alle 09.46.43.png
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I had that problem too. The second definition fixed that problem for me:

    Code:
    .profilePage .infoBlock dl.pairs dd:after
    {
    	content: '';
    	margin-bottom: 5px;
    	display: block;
    }
    
     
  10. giorgino

    giorgino Well-Known Member

    Not for me, strange o_O
     
  11. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    What browser?
     
  12. giorgino

    giorgino Well-Known Member

    Windows:
    • Explorer ok
    • Chrome no
    • Firefox ok
    • Safari no
    MacOsX:
    • Chrome no
    • Safari no
    • Firefox ok
    Webkit's browsers seems to have problems :)
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Hmm. Like I said, it's hackish. Must not be very compatible.

    Just use a template edit then:

    Admin CP -> Appearance -> Templates -> member_view

    Replace this:

    Code:
    		<div class="section infoBlock">
    			<dl class="secondaryContent pairs">
    
    				<xen:hook name="member_view_info_block">
    				
    				<xen:if is="{$canViewOnlineStatus}">
    					<dt>{xen:phrase last_activity}:</dt>
    						<dd><xen:datetime time="$user.effective_last_activity" /></dd>
    				</xen:if>
    
    				<dt>{xen:phrase joined}:</dt>
    					<dd>{xen:date $user.register_date}</dd>
    
    				<dt>{xen:phrase messages}:</dt>
    					<dd>{xen:number $user.message_count}</dd>
    
    				<dt>{xen:phrase likes_received}:</dt>
    					<dd>{xen:number $user.like_count}</dd>
    
    				<dt>{xen:phrase trophy_points}:</dt>
    					<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger">{xen:number $user.trophy_points}</a></dd>
    					
    				<xen:if is="{$canViewWarnings}">
    					<dt>{xen:phrase warning_points}:</dt><dd>{xen:number $user.warning_points}</dd>
    				</xen:if>
    					
    				</xen:hook>
    
    			</dl>
    		</div>
    
    With this:

    Code:
    		<div class="secondaryContent section infoBlock">
    
    				<xen:hook name="member_view_info_block">
    				
    				<xen:if is="{$canViewOnlineStatus}">
    					<dl class="pairs">
    					<dt>{xen:phrase last_activity}:</dt>
    						<dd><xen:datetime time="$user.effective_last_activity" /></dd>
    					</dl>
    				</xen:if>
    
    				<dl class="pairs">
    				<dt>{xen:phrase joined}:</dt>
    					<dd>{xen:date $user.register_date}</dd>
    				</dl>
    
    				<dl class="pairs">
    				<dt>{xen:phrase messages}:</dt>
    					<dd>{xen:number $user.message_count}</dd>
    				</dl>
    
    				<dl class="pairs">
    				<dt>{xen:phrase likes_received}:</dt>
    					<dd>{xen:number $user.like_count}</dd>
    				</dl>
    
    				<dl class="pairs">
    				<dt>{xen:phrase trophy_points}:</dt>
    					<dd><a href="{xen:link 'members/trophies', $user}" class="OverlayTrigger">{xen:number $user.trophy_points}</a></dd>
    				</dl>
    
    				<xen:if is="{$canViewWarnings}">
    					<dl class="pairs">
    					<dt>{xen:phrase warning_points}:</dt><dd>{xen:number $user.warning_points}</dd>
    					</dl>
    				</xen:if>
    					
    				</xen:hook>
    
    		</div>
    
    Then get rid of the second piece of CSS in EXTRA.css, adding only this part:

    Code:
    .profilePage .infoBlock dl.pairs dt,
    .profilePage .infoBlock dl.pairs dd
    {
    	display: inline;
    }
    
     
    Eagle likes this.
  14. giorgino

    giorgino Well-Known Member

    Thank you Jake ;)
     
  15. Fatih Özcan

    Fatih Özcan Active Member

    Jake thank you for helps. I have a problem about this codes.

    job.png
    I applied the codes and some information is mixed. job, sex, city vs. how can ı refine that.
     

Share This Page