Styling Posts and Tpoics on the Index

Go down

Solved Styling Posts and Tpoics on the Index

Post by FrOsTyXi on January 20th 2015, 2:49 pm

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
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Styling Posts and Tpoics on the Index

Post by Ange Tuteur on January 20th 2015, 6:35 pm

Hi @FrOsTyXi,

I cannot seem to replicate the problem on my forum :


I changed the template, added the CSS, and it worked okay.
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Styling Posts and Tpoics on the Index

Post by FrOsTyXi on January 20th 2015, 8:38 pm

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 ?
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Styling Posts and Tpoics on the Index

Post by Ange Tuteur on January 20th 2015, 8:41 pm

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Styling Posts and Tpoics on the Index

Post by Ikerepc on January 20th 2015, 8:44 pm

@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
avatar
Ikerepc
Active Poster

Male Posts : 1150
Reputation : 155
Language : Croatian, HTML, HTML5, CSS, CSS3, jQuery, PHP, SQL, Bascom, Python, C, C++, FBD & LAD for PLC and more... Little English :D
Location : Where web help & support is needed

http://admins.forumotion.com

Back to top Go down

Solved Re: Styling Posts and Tpoics on the Index

Post by FrOsTyXi on January 20th 2015, 8:47 pm

Ah! thank you! @Ange

Solved
avatar
FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Styling Posts and Tpoics on the Index

Post by APE on January 20th 2015, 8:57 pm

Topic solved and archived



avatar
APE
Administrator
Administrator

Male Posts : 12048
Reputation : 1208
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


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