The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Profiles with stripes

Go down

Tutorial Profiles with stripes

Post by TheCrow 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


Profiles with stripes HPHtoKe



Thank you for reading and enjoy!

TheCrow
TheCrow
Manager
Manager

Male Posts : 6896
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Back to top

- Similar topics

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