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.

Column for Topic Icons

View previous topic View next topic Go down

Solved Column for Topic Icons

Post by DustyBones on February 14th 2016, 12:33 am

I know it's probably a simple fix but I can't remember how or where to adjust the settings.
I have phpBB3
Excuse the different themes for examples, but you can get the idea with these..

How do I add a column for just the Topic Icons? So it looks like this;



Right now the Topic Icons (stars) are overlaying the Icons for the Topics (envelope) like this;



TIA


Last edited by DustyBones on February 14th 2016, 4:32 pm; edited 1 time in total

DustyBones
Active Poster

Male Posts : 1224
Reputation : 516
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Solved Re: Column for Topic Icons

Post by APE on February 14th 2016, 1:31 am

can i Please have a link to the forum ?





APE
Manager
Manager

Male Posts : 8317
Reputation : 716
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Column for Topic Icons

Post by DustyBones on February 14th 2016, 2:08 am

@APE wrote:can i Please have a link to the forum ?

Here you go; http://pirateers-rc.americantalk.net/
It's set to private for our club members only. If you need an access account, let me know..

DustyBones
Active Poster

Male Posts : 1224
Reputation : 516
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Solved Re: Column for Topic Icons

Post by Genesis on February 14th 2016, 3:12 am

Add this to your CSS:
Code:
dl.icon dd.dterm, dl.icon dt {
background-position: 75% 75%;
}

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Column for Topic Icons

Post by DustyBones on February 14th 2016, 3:42 am

@Forumedic wrote:Add this to your CSS:
Code:
dl.icon dd.dterm, dl.icon dt {
background-position: 75% 75%;
}
Thanks Forumedic but that didn't quite do what I needed. ie;


I'd rather have a column between the Icons for Topics and the subject of the post as in my first example;

DustyBones
Active Poster

Male Posts : 1224
Reputation : 516
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Solved Re: Column for Topic Icons

Post by APE on February 14th 2016, 6:22 am

I was Going to give the same Code LOL you will need to talk to someone like @Ange Tuteur for that as you will need to make a new Grid in templates Sad





APE
Manager
Manager

Male Posts : 8317
Reputation : 716
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

Solved Re: Column for Topic Icons

Post by DustyBones on February 14th 2016, 2:53 pm

@APE wrote:I was Going to give the same Code LOL you will need to talk to someone like @Ange Tuteur for that as you will need to make a new Grid in templates Sad
I take it then that the column for the Topic Icons was a phpBB2 option and not available in phpBB3 then? My luck... lol

DustyBones
Active Poster

Male Posts : 1224
Reputation : 516
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Solved Re: Column for Topic Icons

Post by Ange Tuteur on February 14th 2016, 4:16 pm

Heeeey.. did someone call me ? Shifty

@DustyBones, try going to Display > Templates > General > topics_list_box and replace the template with this :
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}()
      {
         alert('MAIN');

         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}()
      {
         alert('ALL');

         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="forumbg announcement">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dt>
                  <!-- 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 -->
                  {topics_list_box.row.L_TITLE}
               </dt>
               <dd class="posts">{topics_list_box.row.L_REPLIES}</dd>
               <dd class="views">{topics_list_box.row.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
<!-- END header_table -->

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

<!-- BEGIN topic -->

   <!-- BEGIN table_sticky -->
         </ul>
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm" style="padding-left:0;">
                  <!-- 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 -->
                  {topics_list_box.row.topic.table_sticky.L_TITLE}
               </dd>
               <dd class="posts" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
               <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
               <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
   <!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
         <dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
               <!-- 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 -->

      <!-- BEGIN icon -->
                <script type="text/javascript">document.write('<img src="' + ( '{topics_list_box.row.ICON}'.replace(/.*?url\((.*?)\).*/, '$1').replace(/'|"/g, '') ) + '" class="topic_icon"/>');</script>
      <!-- END icon -->
               {topics_list_box.row.NEWEST_POST_IMG}
               {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
               {topics_list_box.row.TOPIC_TYPE}
               <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
               <!-- BEGIN switch_description -->
               <br />
               {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
               <!-- END switch_description -->
               <br />
               {topics_list_box.row.GOTO_PAGE_NEW}
               <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
               <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">

                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

               <span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
               {topics_list_box.row.LAST_POST_IMG}<br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</span>

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </dd>
            <!-- BEGIN multi_selection -->
               <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} />
            <!-- END multi_selection -->
         </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
   <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
   </dl>
</li>
<!-- END no_topics -->

<!-- BEGIN bottom -->
</ul>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->
Remember to save and publish.

The icon itself is still the CSS background value, so I had to use a bit of JS to convert it to an image. You can find the part in the template :
Code:
      <!-- BEGIN icon -->
                <script type="text/javascript">document.write('<img src="' + ( '{topics_list_box.row.ICON}'.replace(/.*?url\((.*?)\).*/, '$1').replace(/'|"/g, '') ) + '" class="topic_icon"/>');</script>
      <!-- END icon -->


Anyway, the topic icon should appear next to the topic title. If you want the icon to be on another line along with some spacing, add this rule to your stylesheet :
Code:
.topic_icon {
  float:left;
  margin-right:3px;
}


If any questions let me know. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Column for Topic Icons

Post by DustyBones on February 14th 2016, 4:31 pm

Thank you Ange Tuteur, I appreciate it very much..
Solved Smile

DustyBones
Active Poster

Male Posts : 1224
Reputation : 516
Language : English
Location : Washington, USA

http://raps-graphics.forumotion.com/

Back to top Go down

Solved Re: Column for Topic Icons

Post by Ange Tuteur on February 14th 2016, 7:38 pm

You're welcome !

Topic archived

Have a good day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

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