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.

Replies/views design

View previous topic View next topic Go down

Solved Replies/views design

Post by skouliki on November 18th 2016, 4:35 pm

hello all

i wish for this result 



now is like that 


Forum Address: http://iconskouliki.forumgreek.com/
Forum Version:punbb

here is my topics list
Code:
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
         var all_checked = true;
         for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
         }
         }
         document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
         for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
         }
         }
      }
      </script>
   <!-- END multi_selection -->

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div>

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /   >
      <!-- END multi_selection -->
      <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.topic.table_sticky.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.topic.table_sticky.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="status">
               <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
            <!-- END single_selection -->
            {topics_list_box.row.ICON}
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}
            {topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}
            
            <!-- BEGIN switch_description -->
            <br />
             {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
         </td>
         <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.REPLIES}</td>
         <td class="tc3 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.VIEWS}</td>
         <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                <!-- BEGIN avatar -->
                <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

                {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
            </td>
         <!-- BEGIN multi_selection -->
         <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
         <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
   <div class="main-foot clearfix">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a> {S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
   </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->


thanks a lot
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3011
Reputation : 471
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Replies/views design

Post by Luffy on November 18th 2016, 4:52 pm

Hello @skouliki,

Try adding this as your template:
Code:
        <!-- BEGIN topics_list_box -->
        <!-- BEGIN row -->
        <!-- BEGIN header_table -->
          <!-- BEGIN multi_selection -->
              <script type="text/javascript">
              function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
                var all_checked = true;
                for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
                if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
                    all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
                }
                }
                document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
              }
              function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
                for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
                if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
                    document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
                }
                }
              }
              </script>
          <!-- END multi_selection -->
       
          <div class="main-head">
              <!-- BEGIN multi_selection -->
              <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
              <!-- END multi_selection -->
              <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
          </div>
          <div class="main-content">
          <table cellspacing="0" class="table">
              <thead>
                <tr>
                    <th class="tcl">{L_TOPICS}</th>
                    <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
                    <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
                    <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
                </tr>
              </thead>
              <tbody class="statused">
        <!-- END header_table -->
       
        <!-- BEGIN header_row -->
        <strong>{topics_list_box.row.L_TITLE}</strong>
        <!-- END header_row -->
       
        <!-- BEGIN topic -->
          <!-- BEGIN table_sticky -->
              </tbody>
          </table>
          </div>
       
          <div class="main-head">
              <!-- BEGIN multi_selection -->
              <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /  >
              <!-- END multi_selection -->
              <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
          </div>
          <div class="main-content">
          <table cellspacing="0" class="table">
              <thead>
                <tr>
                    <th class="tcl">{L_TOPICS}</th>
                    <th class="tc2"></th>
                    <th class="tc3"></th>
                    <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
                </tr>
              </thead>
              <tbody class="statused">
          <!-- END table_sticky -->
              <tr>
                <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                    <span class="status">
                      <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
                    </span>
                    <!-- BEGIN single_selection -->
                    <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
                    <!-- END single_selection -->
                    {topics_list_box.row.ICON}
                    {topics_list_box.row.NEWEST_POST_IMG}
                    {topics_list_box.row.PARTICIPATE_POST_IMG}
                    {topics_list_box.row.TOPIC_TYPE}
                    <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>
                    {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}
                   
                    <!-- BEGIN switch_description -->
                    <br />
                    {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                    <!-- END switch_description -->
                </td>
                <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"></td>
                <td class="tc3 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><span class="statsList">{topics_list_box.row.REPLIES} replies <br />{topics_list_box.row.VIEWS} views</span></td>
                <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                        <!-- BEGIN avatar -->
                        <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                        <!-- END avatar -->
       
                        {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
                    </td>
                <!-- BEGIN multi_selection -->
                <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
                <!-- END multi_selection -->
              </tr>
        <!-- END topic -->
        <!-- BEGIN no_topics -->
        <tr>
          <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
        </tr>
        <!-- END no_topics -->
       
        <!-- BEGIN bottom -->
              </tbody>
          </table>
          </div>
          <div class="main-foot clearfix">
              <!-- BEGIN multi_selection -->
              <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
              <!-- END multi_selection -->
              <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
              <p class="options">
                <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a> {S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
              </p>
          </div>
        <!-- END bottom -->
        <!-- BEGIN spacer --><br /><!-- END spacer -->
        <!-- END row -->
        <!-- END topics_list_box -->
and this in your CSS:
Code:
span.statsList {
  text-align:right;
  border-right:1px solid grey
}

If it doesn't work let me know.





avatar
Luffy
Manager
Manager

Male Posts : 4828
Reputation : 486
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

Back to top Go down

Solved Re: Replies/views design

Post by skouliki on November 18th 2016, 5:22 pm

it worked without adding the second code in css 

is this ok/
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3011
Reputation : 471
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Replies/views design

Post by Luffy on November 18th 2016, 5:23 pm

It is. The only difference is that the code is adding a border to the right and makes them aligned. If you don't want it then you are okay! Smile





avatar
Luffy
Manager
Manager

Male Posts : 4828
Reputation : 486
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

Back to top Go down

Solved Re: Replies/views design

Post by skouliki on November 18th 2016, 5:26 pm

i think its better without it cause i want to be similar to the main forum 
so thanks a lot 
topic solved
avatar
skouliki
Graphic Designer
Graphic Designer

Female Posts : 3011
Reputation : 471
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Replies/views design

Post by Luffy on November 18th 2016, 5:29 pm

You're welcome! :rose:

Problem solved & topic archived.
Please read our forum rules: ESF General Rules





avatar
Luffy
Manager
Manager

Male Posts : 4828
Reputation : 486
Language : Greek, English
Location : Greece

http://vibes.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