problem with that Script after translate

https://fmdesign.forumotion.com/t341-latest-topic-system-v5
the script is working at English 100% but after i changed the forum language to Arabic to see how is the progress i was shucked by see the members names over the topic titles and the post count etc
here is image to Explain

what in the Script that might control the align of names etc
is it on the CSS or the templates it self
thanks again

I couldn't get it to work in English I tried several times and so has @Andiweb

@FiB
im sure there something you miss in your whole tries
i forget who was having the same problem and i just followed the steps one by one on his forum and it did work good
so make sure about these things
you replaced all codes in templates one by one
make sure you have added the widgets as the last image in the tutorial and show forum widgets is on not off the widgets should be at the left side

I've never used this, so I can't really help you with it, but have you tried adding text-align:left; to the parent container ?

Ange Tuteur wrote:I've never used this, so I can't really help you with it, but have you tried adding text-align:left; to the parent container ?

not yet but im gonna see it now if it will work or not

Edit
cannot find any thing like parent container
what im gonna do ?

hello
any news here
i hope there is a good news
i tried everything i know in the CSS but no use
i want to know more about the align of this script

A parent is generally an element which holds "child" elements. For example ;

Code:

<!-- PARENT -->
<div>

  <!-- CHILDREN -->
  <div>CHILD 1</div>
  <div>CHILD 2</div>
  <div>CHILD 3</div>
  <div>CHILD 4</div>

</div>

So, to change the text alignment we can add the style attribute to the parent.

Code:

<!-- PARENT -->
<div style="text-align:left">

  <!-- CHILDREN -->
  <div>CHILD 1</div>
  <div>CHILD 2</div>
  <div>CHILD 3</div>
  <div>CHILD 4</div>

</div>

Code:

    /* مايكل سوفت */

    #content-container div#main{margin-bottom:0}
    *+ html #content-container div#main{margin-Right:0;margin-right:0}
    #content-container div#left{float:none;width:100%}
    #left{margin:1px 0}
    #left,#left *,#left li:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    #left table.table{border-collapse:collapse;empty-cells:show;table-layout:fixed;width:100%}
    #left a{text-decoration:none}
    #left td{width:25%;vertical-align:top;border-width:0 1px}
    #left .double{border-Right:0;width:50%}
    #left li{position:relative;width:100%;list-style-type:none;height:22px;line-height:24px;border-bottom:0.5px dashed #CCC;counter-increment:Zzindex}
    #left li:before{content:counter(Zzindex);display:block;height:16px;background:#98D0FF;position:absolute;Right:-23px;font-size:11px;top:5px;border-radius:2px;text-align:right;width:18px;color:#FFF;line-height:16px}
    #left li:after{content:" ";background:#98D0FF;display:block;width:6px;height:6px;position:absolute;top:10px;Right:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
    #left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
    #left li:nth-child(2):before,#left li:nth-child(2):after{background:#FFBF00}
    #left li:nth-child(3):before,#left li:nth-child(3):after{background:#FBFF00}
    #left li:nth-child(4):before,#left li:nth-child(4):after{background:#69FF00}
    #left li:nth-child(5):before,#left li:nth-child(5):after{background:#00FF49}
    #left li:nth-child(6):before,#left li:nth-child(5):after{background:#00FFBC}
    #left li:nth-child(7):before,#left li:nth-child(5):after{background:#00F9FF}
    #left li:nth-child(8):before,#left li:nth-child(5):after{background:#2CAED3}
    #left li:nth-child(9):before,#left li:nth-child(5):after{background:#02CBFD}
    #left li:nth-child(10):before,#left li:nth-child(5):after{background:#0074FF}
    #left li:nth-child(11):before,#left li:nth-child(5):after{background:#1500FF}
    #left li:nth-child(12):before,#left li:nth-child(5):after{background:#C100FF}
    #left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;width:60%;height:inherit}
    #active_topics a,#viewed_topics a{width:70%}
    #left #recent_topics a{width:80%}
    #left .lastRight{right:200;text-align:right;position:absolute;top:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;Right:auto}
    #left ul,#left th{padding-Right:34px;padding-right:10px;margin:0}
    #left ul{height:114px}
    #left .changeLast{border:0 none!important;background:inherit;margin-top:0!important;margin-bottom:-1px;padding:200!important}
    #left .changeLast,#left th h2{color:#777}
    #left th{width:25%;vertical-align:middle}
    th.topicLast{border-top:1px solid #F3F3F3!important}
    th.double{text-align:Right}
    #recent_topics li{margin:.5px 0}
    #left #recent_topics .lastRight{width:20%!important}
    .half li:nth-child(6),.half li:nth-child(7),.half li:nth-child(8),.half li:nth-child(9),.half li:nth-child(10),#active_starters,#users_month{display:none}
    /* Tooltip */
    #tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}

this CSS level is way way higher then my skill level
i feel now dumber then ever

What's the HTML involved ?

all the rest are templates
in Overall_header find this code and delete
here is every code in the tutorial
original link
http://socialacademy.forums.fm/t441-tutorial-latest-topic-system-v5#
SocialAcademy

Code:



    <div id="{ID_LEFT}">
            <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
            <!-- BEGIN saut -->
            <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
            <!-- END giefmod_index1 -->
    </div>


save & publish

next go to Index_body and find this code

{CHATBOX_TOP}



below the line add this

SocialAcademy

Code:



    <div id="{ID_LEFT}" class="main">
      <div class="main-head">
          <div class="page-title">
            <h2>Latest Topic System v5</h2>
          </div>
      </div>
        <div class="main-content">
          <table cellspacing="0" class="table">
            <tbody class="statused">
                <!-- BEGIN giefmod_index1 -->
                {giefmod_index1.MODVAR}
                <!-- END giefmod_index1 -->
            </tbody>
          </table>
      </div>
      <script type="text/javascript">
          //<![CDATA[
          var versionMinor = parseFloat(navigator.appVersion),
            versionMajor = parseInt(versionMinor),
            IE = document.all && !window.opera && 7 > versionMajor,
            IE7 = document.all && !window.opera && 7 <= versionMajor,
            OP = window.opera,
            FF = document.getElementById,
            NS = document.layers;
   
          function get_item(a, c) {
            if (IE) return c ? window.opener.document.all[a] : document.all[a];
            if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
            if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
          }
   
          var current_tooltip;
   
          function show_tooltip(a, c) {
            var b = get_item("tooltip");
            b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
            b.style.zIndex = 1000;
            b.style.position = "absolute";
            b.innerHTML = "<p>" + c + "</p>";
            b.style.visibility = "visible";
            a.onmousemove = move_tooltip;
            a.onmouseout = function() {
                b.style.visibility = "hidden"
            };
            a.title = ""
          }
          var offsetxpoint = -60,
            offsetypoint = 20,
            real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
            real_body = document.documentElement ? document.documentElement : document.body;
   
          function move_tooltip(a) {
            var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
                d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
                b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
                e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
                f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
            current_tooltip = get_item("tooltip");
            current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
            current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
          }
          $("#recent_topics li a:first-child").mouseover(function() {
            show_tooltip(this, $(this).next().html())
          });
          $("#active_topics a, #viewed_topics a").mouseover(function() {
            show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));
          }).after(function() {
            return '<span class="lastRight">' + this.title.replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'
          });
          $(".changeLast").change(function() {
            $(".half.group_" + $(this).data("group")).hide();
            $("#" + this.value).show();
          });
          //]]>
      </script>
    </div>
    </div>


next go to your

Administration Panel → Display → Portal

then paste this code in mod_recent_topic

SocialAcademy

Code:

   

    <!-- BEGIN classical_row -->
    <tr>
      <th class="double">
          <h2>Newest post
            <span class="right">Latest reply</span>
          </h2>
      </th>
      <th>
          <select class="changeLast" data-group="post">
            <option value="top_posters">Top Poster</option>
            <option value="active_starters">Most Topic Users</option>
          </select>
      </th>
      <th>
          <select class="changeLast" data-group="time">
            <option value="users_week">Most Active Poster of Week</option>
            <option value="users_month">Most Active Poster this Month</option>
          </select>
      </th>
    </tr>
      <td class="double" rowspan="3">
          <ul id="recent_topics">
            <!-- BEGIN recent_topic_row -->
            <li>
                <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>
                <div class="tooltip_data" style="display:none">
                  <p>
                      <span style="color:red">Subject</span>: {classical_row.recent_topic_row.L_TITLE}
                  </p>
                  <p>
                      <span style="color:blue">Posted</span>: {classical_row.recent_topic_row.S_POSTTIME}
                  </p>
                </div>

                <!-- BEGIN switch_poster -->
                <a class="lastRight" href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
                <!-- END switch_poster -->
                <!-- BEGIN switch_poster_guest -->
                <span class="lastRight">
                  {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
                </span>
                <!-- END switch_poster_guest -->
            </li>
            <!-- END recent_topic_row -->
          </ul>
      </td>
    <!-- </tr> -->
    <!-- END classical_row -->


mod_most_active_topics

SocialAcademy

Code:


    <tr>
      <th class="topicLast">
          <h2>Most discussed topics</h2>
      </th>
      <th class="topicLast">
          <h2>Most viewed topics</h2>
      </th>
    </tr>
    <tr>
      <td>
          <ul id="active_topics" class="half">
            <!-- BEGIN TOPIC -->
            <li>
                <span style="display:none">{TOPIC.TITLE}</span>
                <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
            </li>
            <!-- END TOPIC -->
          </ul>
      </td>
    <!--</tr>-->


mod_most_viewed_topics

SocialAcademy

Code:


    <!--<tr>-->
      <td>
          <ul id="viewed_topics" class="half">
            <!-- BEGIN TOPIC -->
            <li>
                <span style="display:none">{TOPIC.TITLE}</span>
                <a href="{TOPIC.LINK}" title="{TOPIC.TITLE}">{TOPIC.NAME}</a>
            </li>
            <!-- END TOPIC -->
          </ul>
      </td>
    </tr>

mod_most_active_starters

SocialAcademy

Code:

 

    <!--<td>--> 
      <ul id="active_starters" class="half group_post">
          <!-- BEGIN POSTER -->
          <li>
            {POSTER.NAME}
            <span class="lastRight">
                {POSTER.NB_TOPICS}
            </span>
          </li>
          <!-- END POSTER -->
      </ul>
    </td>



mod_top_post_users_month

SocialAcademy

Code:


    <!--<tr>-->
      <!--<td>--> 
          <ul id="users_month" class="half group_time">
            <!-- BEGIN POSTER -->
            <li>
                {POSTER.NAME}
                <span class="lastRight">
                  {POSTER.NB_POSTS}
                </span>
            </li>
            <!-- END POSTER -->
          </ul>
      </td>
    </tr>

mod_top_post_users_week

SocialAcademy

Code:


    <td>
      <ul id="users_week" class="half group_time">
          <!-- BEGIN POSTER -->
          <li>
            {POSTER.NAME}
            <span class="lastRight">
                {POSTER.NB_POSTS}
            </span>
          </li>
          <!-- END POSTER -->
      </ul>
    <!--</td>-->


mod_top_posters

SocialAcademy

Code:

   

    <td>
      <ul id="top_posters" class="half group_post">
          <!-- BEGIN POSTER -->
          <li>
            {POSTER.NAME}
            <span class="lastRight">
                {POSTER.NB_POSTS}
            </span>
          </li>
          <!-- END POSTER -->
      </ul>
    <!--</td>-->

Try adding this to your stylesheet :

Code:

#left { text-align:left !important }

yea one step progress
but still the recent topics need a bit styling like flip the names instead of of topics names i think as i remember it was somewhere in the CSS ill try find it if i failed ill say

after many many many failed trying i find what i was looking for

Code:

#left .lastRight{left:0;text-align:right;position:absolute;top:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;right:auto}

instead of

Code:

#left .lastRight{right:0;text-align:right;position:absolute;top:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;left:auto}

thanks a lot Ange you tried your best to help me i`m sure about that

now all what i need to do is change colors and its 100% done for me to share it as translated Project By me