The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Profiles with stripes

View previous topic View next topic Go down

Profiles with stripes

Post by Luffy on May 29th 2016, 5:11 am

Profiles with stripes

Hello

In this tutorial i will show you how to add stripes to the profiles of each user in the posts. These stripes will be placed for the member's username and for the rank. The tutorial work for all versions!
And this is how you can do it:

Changes in templates:



  1. Go to: Admin Panel > Display > Templates > viewtopic_body
  2. edit the template and search for:
    Code:
    {postrow.displayed.POSTER_NAME}


  3. once you find it, replace it with:
    Code:
    <div class="rowName">{postrow.displayed.POSTER_NAME}</div>

    What you just changed is the member's name. You can cut and paste the name somewhere else in the template where you want. As you will see i personally moved it above the avatar because i thought it was better looking there.

  4. Next search for this:
    Code:
    {postrow.displayed.POSTER_RANK_NEW}

  5. Once you find it replace it with this:
    Code:
    <div class="rowRank">{postrow.displayed.POSTER_RANK_NEW}</div>


    This is the rank which is displayed as text. The other rank it's not affected if you don't do this procedure. So the same thing here, you may cut and relocate it's positioning anywhere in the template you like.

  6. Once you do these changes, save the template and publish it pressing the green cross.



CSS addition



Go to the CSS by following : Admin Panel > Display > Pics and colors > Colors > CSS
and add this code in it:
Code:
.rowName, .rowRank {
  height: 15px;
  width: auto;
  border-top: 1px solid #222;
  padding: 5px;
  color: #9A9292;
  margin-left: 0px;
    margin-right:0px;
  border-bottom: 1px solid #222;
  background: #222;
  margin-top: 7px;
  font-weight: bold;
}

and save it.

As soon as you finish the CSS you should have a profile with stripes.


Modifications



  • You may change the div classes to whatever you like but make sure you change the elements placed in your CSS.
  • You can make any appearance changes through the CSS, as background-color, margin-top, padding etc.



Preview






Thank you for reading and enjoy!







Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum