Styling Posts and Tpoics on the Index

Hello, I was looking to style the posts and topics on the index this is the result i get when i modify the index_box template


Here is my index_box template

Code:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
        <table cellspacing="0" class="table">
            <tbody class="statused">
  <!-- END tablehead -->
  <!-- BEGIN forumrow -->
              <tr>
                                                <td class="tc_icon">
                    <span class="status">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                                                </td>
                  <td class="tc_forum" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT};">
                                                        <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <br />
                   
                    {catrow.forumrow.FORUM_DESC}
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                                          <td class="tc3"><strong>{catrow.forumrow.TOPICS}</strong> topics<br /><strong>{catrow.forumrow.POSTS}</strong> posts</td>
                  <td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>
              </tr>
  <!-- END forumrow -->
  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->


here is the code i'm using to create the style
In index_box find {catrow.forumrow.TOPICS} replace with

Code:

<span class="stats_number">{catrow.forumrow.TOPICS}<img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></span> <span class="stats_text">Topics</span>

Same with {catrow.forumrow.POSTS}

here is the CSS

Code:

/*stats number*/
.stats_number {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    text-align: center;
    color: red;
    position: relative;
    overflow: hidden;
    }
 
 
  .stats_text {
    font-size: 10px;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    text-align: center;
    color: #98578D;
    }
 /*Don't touch <b style="color:#aa0000" class="coloradmin">this</b>*/
.stats_number img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    }


punBB

Forum Link: TPSN

If there is anyway to fix this issue that would be great!

Thank you in advance for the help!

Regards
FrOsTyXi

Hi @FrOsTyXi,

I cannot seem to replicate the problem on my forum :


I changed the template, added the CSS, and it worked okay.

Maybe i made an error while editing? this is what i have done.

find this line

Code:

 <td class="tc3"><strong>{catrow.forumrow.TOPICS}</strong> topics<br /><strong>{catrow.forumrow.POSTS}</strong> posts</td>

replacing with this?

Code:

<span class="stats_number">{catrow.forumrow.TOPICS}<img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></span> <span class="stats_text">Topics</span><span class="stats_number">{catrow.forumrow.POSTS}<img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></span> <span class="stats_text">Posts</span>

is this the correct edit @Ange ?

Only replace <strong>{catrow.forumrow.TOPICS}</strong> topics with this :

Code:

    <span class="stats_number">{catrow.forumrow.TOPICS}<img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></span> <span class="stats_text">Topics</span>

I think the problem is that you overwrote the cell.

FrOsTyXi wrote:Maybe i made an error while editing? this is what i have done.

find this line

Code:

 <td class="tc3"><strong>{catrow.forumrow.TOPICS}</strong> topics<br /><strong>{catrow.forumrow.POSTS}</strong> posts</td>

replacing with this?

Code:

<span class="stats_number">{catrow.forumrow.TOPICS}<img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></span> <span class="stats_text">Topics</span><span class="stats_number">{catrow.forumrow.POSTS}<img src="http://i74.servimg.com/u/f74/18/12/37/46/stats_10.png" alt="" /></span> <span class="stats_text">Posts</span>

is this the correct edit @Ange ?

Replace just code under td tag:

Code:

 <strong>{catrow.forumrow.TOPICS}</strong> topics<br /><strong>{catrow.forumrow.POSTS}</strong> posts

Ah! thank you! @Ange

Solved