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.

Need to make change the design of "Topics" "Posts" "Last Posts"

View previous topic View next topic Go down

Solved Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 23rd 2013, 12:14 pm

I need to make a design like the pic given below



I need this badly.

My Forum:http://www.bdtipsntricks.com/
Version: PunBB

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 24th 2013, 3:49 pm

bump:hello:

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by SLGray on June 24th 2013, 6:17 pm

I believe that is not possible on a Forumotion forum.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35668
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 24th 2013, 7:36 pm

@SLGray wrote:I believe that is not possible on a Forumotion forum.
Obviously possible. I saw that on forumotion forum. Here is the links
http://extrem-tutorials.com/
http://thewalkingdeadforums.net/

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by levy on June 24th 2013, 8:05 pm

And if you really want , why don't post and the index_box ?

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 24th 2013, 8:13 pm

Here is my index_box

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">
            <thead>
               <tr>
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
               </tr>
            </thead>
            <tbody class="statused">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
               <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                     <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                     <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="tc2">{catrow.forumrow.TOPICS}</td>
                  <td class="tc3">{catrow.forumrow.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}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by levy on June 24th 2013, 8:35 pm

That in your CSS

Code:
.pun table .tcr {
width: 10%;
}

.pun .main table td.tc3 {
background-color: transparent;
}

.posts , .topics {
background: white;
padding: 3px;
width: 70%;
margin: 0 auto;
border: 1px solid gainsboro;
border-radius: 3px;
box-shadow: 0px 1px 0px white;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
color: #666;
text-shadow: 0px 1px 0px white;
  margin-top:3px;
}

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">
            <thead style="display:none;">
              <tr>
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
              </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <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">
                    <div class="posts">{catrow.forumrow.POSTS} posts</div>
                    <div class="topics">{catrow.forumrow.TOPICS} topics</div></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}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

That is index_box

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 24th 2013, 8:44 pm

Edit: Working, need to modify with CSS. Thanks, I will do it myself.

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by SLGray on June 24th 2013, 9:52 pm

Is this solved?

Also the last link you gave as an example was not even a Forumotion forum.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35668
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 25th 2013, 3:52 pm

Working fine. But, I am facing problem with making border in last post option like this by CSS

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by levy on June 25th 2013, 4:13 pm

Replace index_box with that :

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">
  <thead style="displayne;">
  <tr>
  <th class="tcl">{L_FORUM}</th>
  <th class="tc2">{L_TOPICS}</th>
  <th class="tc3">{L_POSTS}</th>
  <th class="tcr">{L_LASTPOST}</th>
  </tr>
  </thead>
  <tbody class="statused">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
  <tr>
  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
  <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
  <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
  </span>
  <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">
  <div class="posts">{catrow.forumrow.POSTS} posts</div>
  <div class="topics">{catrow.forumrow.TOPICS} topics</div></td>
  <td class="tcr">
  <div class="lastpostt">
  <!-- 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}
  </div>
  </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}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 </p>
 <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

And remove my last code and put this one

Code:
.pun table .tcr {
width: 10%;
}

.pun .main table td.tc3 {
background-color: transparent;
 border-leftne!important;
 border-rightne!important;
}

.posts, .topics {
background: #fff;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 0 1px 0 #fff;
color: #666;
font-family: Verdana;
font-size: 11px;
font-weight: 700;
margin: 3px auto 0;
padding: 3px;
text-shadow: 0 1px 0 #fff;
width: 65%;
float: right;
margin-right: 3px;
}

.pun table.table td {
background-color: #fbfbfb;
border-color: transparent;
border-style: solid none none solid;
border-width: 1px;
line-height: 130%;
}

.pun .main table td.tc2{
background-color: #f4f4f4;
border-left: none;
}

.lastpostt{
background: #fff;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 0 1px 0 #fff;
text-align: left;
position: relative;
left: -6px;
font-family: Verdana;
font-size: 11px;
font-weight: 700;
padding: 4px;
text-shadow: 0 1px 0 #fff;
}

.lastpostt a{text-decoration:none!important;}

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 25th 2013, 4:40 pm

Found some error. The previous code index_box code was better.

Any idea?

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by levy on June 25th 2013, 4:43 pm

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">
            <thead style="display:none;">
              <tr>
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
              </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <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">
                    <div class="posts">{catrow.forumrow.POSTS} posts</div>
                    <div class="topics">{catrow.forumrow.TOPICS} topics</div></td>
                  <td class="tcr">
                    <div class="lastpostt">
                    <!-- 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}
                  </div>
                  </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}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Done , problem from new editor Smile replaced something with a smile.

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 25th 2013, 5:05 pm

Thank you very much. But one more last question. Can I make it blank in where the is no topic like the pic



ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by levy on June 25th 2013, 5:10 pm

No , sorry , you can't remove Smile I don't know very good the javascript but probably is possible .

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by ashik4u on June 25th 2013, 5:18 pm

No problem. Thank you very very much.:wouhou:

ashik4u
Forumember

Male Posts : 168
Reputation : 2
Language : Bengali, English
Location : Dhaka, Bangladesh

http://bdtipsntricks.forumotion.org

Back to top Go down

Solved Re: Need to make change the design of "Topics" "Posts" "Last Posts"

Post by SLGray on June 25th 2013, 6:56 pm

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35668
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

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