Log in to check your private messages 
Username: Password:   
  howtodoit.myfastforum.org
  Walkthough guides for myfreeforum phpbb 2 forums
Index  FAQ  Search  Memberlist  Usergroups  Profile

Text
Text
Friends
MYFF Support Forum
HOWTODOIT (PHPbb3)
portalogy
CGArts
ANNOUNCEMENTS
Complete List of templates Available
Please Read First Before Editing your template
Permissions
Admin Index
Sticky Articles
Latest Posts
Friends

Start | Stop
Legend (Changing rank colours / colour)
Jump to:  
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfastforum.org Forum Index » Add-on`s for your forum
Author Message
Symon
Guide Legend
Guide Legend



Joined: 11 Jun 2006
Posts: 911


Location: Berkshire,England
FLAGS
Add Comment
Show Comments
PostPosted: Wed Dec 05, 2007 2:47 pm  Reply with quote

This hack will allow you to put a legend on your index page, and change members colours to suit their ranks.

This is not for changing just admin and mods colours from one colour to another please read HERE on HOWTODOIT.

Ok here is HOWTODOIT

Please remember to use the Editor account before making any template changes, If you have not made an editor account yet please read HERE

Second you must have all ready a template you can edit.

If you have not done this please read HOWTODOIT

The first thing you need to do is work out how many of your ranks you wish to give a colour too.

1. Goto admin panel --- 2. General --- Ranks.

You should now see a screen like this



Here you will see the table Css Class with the Ranks numbered,this is where you get the .css information from, please make a note of YOUR (not the example shown here) rank numbers and the rank names.

2. Now goto Admin panel --  3. Styles -- Edit Templates/Logos -- using the top drop bar choose the template you wish to edit.


Now look at the top in the area marked Choose Forum template/javascript/css File to Edit use the drop down bar and find

.css Or Overall_header.tpl This depends on where your .css is controlled, templates like Sub Silver have the .css in the overall_header.tpl

To find how yours is controlled goto your overall_header.tpl and look for a massive code like this.

Spoiler:

Code:
<style type="text/css">
<!--
/*
  The original subSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com

  NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
  theme administration centre. When you have finalised your style you could cut the final CSS code
  and place it in an external file, deleting this section to save bandwidth.
*/

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   background-color: {T_BODY_BGCOLOR};
   scrollbar-face-color: {T_TR_COLOR2};
   scrollbar-highlight-color: {T_TD_COLOR2};
   scrollbar-shadow-color: {T_TR_COLOR2};
   scrollbar-3dlight-color: {T_TR_COLOR3};
   scrollbar-arrow-color:  {T_BODY_LINK};
   scrollbar-track-color: {T_TR_COLOR1};
   scrollbar-darkshadow-color: {T_TH_COLOR1};
}

/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover      { text-decoration: underline; color : {T_BODY_HLINK}; }
hr   { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.bodyline   { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }

/* This is the outline round the main forum tables */
.forumline   { background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }

/* Main table cell colours and backgrounds */
td.row1   { background-color: {T_TR_COLOR1}; }
td.row2   { background-color: {T_TR_COLOR2}; }
td.row3   { background-color: {T_TR_COLOR3}; }

/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
      background-color: {T_TD_COLOR2};
      background-image: url(templates/myfs_testhtml1/images/{T_TH_CLASS3});
      background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th   {
   color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
   background-color: {T_BODY_LINK}; height: 25px;
   background-image: url(templates/myfs_testhtml1/images/{T_TH_CLASS2});
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
         background-image: url(templates/myfs_testhtml1/images/{T_TH_CLASS1});
         background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}

/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
   height: 29px;
   border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
   font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
   background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}

th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow    { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right    { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft     { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop    { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle   {
   font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
   text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}

/* General text */
.gen { font-size : {T_FONTSIZE3}px; }
.genmed { font-size : {T_FONTSIZE2}px; }
.gensmall { font-size : {T_FONTSIZE1}px; }
.gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover   { color: {T_BODY_HLINK}; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu      { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu      { text-decoration: none; color : {T_BODY_LINK};  }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Forum category titles */
.cattitle      { font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle      { text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink      { font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink    { text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav         { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav         { text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover      { text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2   { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link   { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover   { text-decoration: underline; color : {T_BODY_HLINK}; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name         { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}

/* Location, number of posts, post date etc */
.postdetails      { font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }

/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link   { text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}

/* Quote & Code blocks */
.code {
   font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
   background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
   border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
   font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
   background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
   border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

/* Copyright and bottom info */
.copyright      { font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
a.copyright      { color: {T_FONTCOLOR1}; text-decoration: none;}
a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}

/* Form elements */
input,textarea, select {
   color : {T_BODY_TEXT};
   font: normal {T_FONTSIZE2}px {T_FONTFACE1};
   border-color : {T_BODY_TEXT};
}

/* The text input fields background colour */
input.post, textarea.post, select {
   background-color : {T_TD_COLOR2};
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
   background-color : {T_TR_COLOR1};
   color : {T_BODY_TEXT};
   font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}

/* The main submit button option */
input.mainoption {
   background-color : {T_TD_COLOR1};
   font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
   background-color : {T_TD_COLOR1};
   font-weight : normal;
}


/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("templates/myfs_testhtml1/formIE.css");
-->
</style>
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
   if ( {PRIVATE_MESSAGE_NEW_FLAG} )
   {
      window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
   }
//-->
</script>



If you do not see something like above then your .css is controlled in the .css.tpl file, if you do see the code above in your overall_header.tpl,  then you need to make the edits in your overall_header.tpl

Note.

.css will be named something like myff_howtodoit1.css

Now place this code in the .css at the bottom
Code:
/* Forum rank titles */



.rank1{ font-size : 12px; color : #FF0000 }

.rank2{ font-size : 12px; color : #6644BB}

.rank3{ font-size : 12px; color : #FF0000 }

.rank4{ font-size : 12px; color : #000000 }

.rank5{ font-size : 12px; color : #CCAA22}


So it may look like this


Code:
/* None-bold submit button */
input.liteoption {
   background-color : {T_TD_COLOR1};
   font-weight : normal;
}




/* Forum rank titles */

.rank1{ font-size : 12px; color : #FF0000 }

.rank2{ font-size : 12px; color : #6644BB}

.rank3{ font-size : 12px; color : #FF0000 }

.rank4{ font-size : 12px; color : #000000 }

.rank5{ font-size : 12px; color : #CCAA22}


/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }


You can change the size of the text by changing 12px to something of your choice for example 14px.


To change the colours use the hex colour chart found HERE And enter the code you wish.


Now when members that come on who have the ranks you have put in the .css they will have the new colours.


<<<End Of basic Guide>>>>>



The guide below is ONLY for the ones that want to enhance this by adding a Legend "key"

Ok here is HOWTODOIT



The picture below shows the KEY in bot whosonline and below it please follow the guide to where you wish it to be.

Option 1 to make the key guide appear in whosonline table.




1. Goto admin panel --- 3. Styles --- Edit Templates/Logos -- the template you wish to edit (EG myff_howtodoit1)--- Submit

Now look at the top in the area marked Choose Forum template/javascript/css File to Edit use the drop down bar and find

index_body.tpl

Now look for a code like this

Code:
 <tr>
   <td class="row1" align="left"><span class="gensmall">{TOTAL_USERS_ONLINE} &nbsp; [ {L_WHOSONLINE_ADMIN} ] &nbsp; [ {L_WHOSONLINE_MOD} ]<br />{RECORD_USERS}<br />{LOGGED_IN_USER_LIST}</span></td>
  </tr>
</table>


Now add your new ranks code by using the code,

Admin will be

Code:
<span class="rankadmin">admin</span>


Moderator would be

Code:
<span class="rankmod">moderator</span>


All others will be

Code:
<span class="rank1">rank1</span>


Change the rank1 to rank2 and so on depending on how many ranks you have.

To change the name on display change  
Code:
>rank1<
to suit you for example if you want rank 1 to be called Super Mod, you would change it to
Code:
>super Mod<



So your final code may look like this. Do not just copy and paste as all templates are different.
Code:

<tr>
   <td class="row1" align="left"><span class="gensmall">{TOTAL_USERS_ONLINE} <br /><span class="rank1">[Sponsor]</span>&nbsp<span class="rankadmin">[admin]</span>&nbsp<span class="rankmod">[Mod]</span>&nbsp <span class="rank2">[Editor]</span>&nbsp <span class="rank3">[SuperMod]</span>&nbsp <span class="rank4">[Team Leader]</span>&nbsp <span class="rank5">[New Member] </span><br /><span class="gensmall">{RECORD_USERS}<br />{LOGGED_IN_USER_LIST}</td></span>
  </tr>
</table>


Notes.

The admin and moderator colours are controlled by
Code:
.rankadmin and .rankmod





Option 2 to make the key appear under the tables.


1. Goto admin panel --- 3. Styles --- Edit Templates/Logos -- the template you wish to edit (EG myff_howtodoit1)--- Submit

Now look at the top in the area marked Choose Forum template/javascript/css File to Edit use the drop down bar and find

index_body.tpl

Now look for a code like this (please remember that all template are different you may or may not have this exact code.)

Code:
<table width="100%" cellpadding="1" cellspacing="1" border="0">
<tr>
   <td align="left" valign="top"><span class="gensmall">{L_ONLINE_EXPLAIN}</span></td>
</tr>
</table>


After i have placed


Code:
<table width="100%" cellpadding="1" cellspacing="1" border="0">
<tr>
   <td align="left" valign="top"><span class="gensmall"> [ {L_WHOSONLINE_ADMIN} ] &nbsp; [ {L_WHOSONLINE_MOD} ]</span> <span class="rank1">[Sponsor]</span>&nbsp<span class="rankadmin">[admin]</span>&nbsp <span class="rank2">[Editor]</span>&nbsp <span class="rank3">[SuperMod]</span>&nbsp <span class="rank4">[Team Leader]</span>&nbsp <span class="rank5">[New Member] </span></td></span>
  </tr>
</table>


Option 3 is to have it appear in a Portal



Please note to have portals on your forum please read HERE.


Ok all that done you now goto Your  admin panel ---  3. Styles --- Portal Settings

You will now see a screen that looks like this



1.Click on the Blank box  icon that looks like this

Now you see a screen like this





2.Add  LEGENDKEY to the name

3.And then what you want in the Title.

4. Click Create New Portal

5. Goto admin panel --- 3. Styles --- Edit Templates/Logos -- the template you wish to edit (EG myff_howtodoit1)--- Submit

Look at the bottom in the area marked[/b]  Choose Portal template File to Edit and find and open cms.legendkey.tpl.



And place this code in there.

Code:
<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">

   <tr>
        <th colspan="1"  height="25" class="thCornerL" nowrap="nowrap">Key To Members</th>
     </tr>

  <tr>
   <td class="row2"><span class="topictitle"><a href="{menu_row.U_VIEW}" class="topictitle"><span class="gensmall"> [ {L_WHOSONLINE_ADMIN} ] &nbsp; [ {L_WHOSONLINE_MOD} ]</span> <span class="rank1">[Sponsor]</span>&nbsp<span class="rankadmin">[admin]</span>&nbsp <span class="rank2">[Editor]</span>&nbsp <span class="rank3">[SuperMod]</span>&nbsp <span class="rank4">[Team Leader]</span>&nbsp <span class="rank5">[New Member] </span></td></span>
  </tr></a></span></td>
  </tr>

</table>


Please remember to change the key to match your key for example if you have more than 5 ranks you will need to add another line like

Code:
&nbsp <span class="rank5">[New Member] </span>
Before the  
Code:
</td>


Click submit/save


Now Add {MYFF.LEGENDKEY} where you wish it to be for example your overall_header.tpl to show on teh left or overall_footer to show on the right.

In both case look for the other portals that should all ready be there and just add it with them.

the above portal guide is the most basic one if you wish to customise a little better but do not know HOWTODIT then please visit Nick At Portalogy


And Thats HOWTODOIT

View user's profile Send private message Visit poster's website FACEBOOKSTEAM
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    howtodoit.myfastforum.org Forum Index » Add-on`s for your forum


 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

HOWTODOIT was designed and built by Symon Field
Creator Of ☆ ☆ FunnyWorld
HOWTODOIT© Symon Field 2006,2007,2008

Powered by phpBB Group © 2001,2005.
 
Create your own free forum | Buy a domain to use with your forum