The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
2 posters

    Latest topics table

    yumm
    yumm
    Forumember


    Female Posts : 79
    Reputation : 3
    Language : Turkish / English

    In progress Latest topics table

    Post by yumm December 6th 2018, 7:36 pm

    Hello! It's me again! Hello
    I want to a table like this on top (under of header), but I want to change all of table styles about color, font and included informations... ^^ Is there someone can help me? Smile

    Latest topics table Screen15
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15311
    Reputation : 1705
    Language : English,Greek
    Location : Greece

    In progress Re: Latest topics table

    Post by skouliki December 6th 2018, 8:20 pm

    hello

    in Overall header  find this code and delete it

    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

    next go to Index_body and find this code
    {CHATBOX_TOP} below add
    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>

    next go to your Portal  template in mod_recent_topic and replace the template with this



    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 -->



    go to mod_most_active_topics and replace the template with this


    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>-->




    go to mod_most_viewed_topics and replace the template with this


    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>



    go to mod_most_active_starters and replace the template with this


    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>




    go to mod_top_post_users_month and replace the template with this


    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>




    go to mod_top_post_users_week and replace the template with this



    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>-->




    go to mod_top_posters and replace the template with this


    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>-->

    for the style add this to your css and you can change it depending on your needs 


    Code:



    #content-container div#main{margin-bottom:0}


    *+ html #content-container div#main{margin-left:0;margin-right:0}


    #content-container div#left{float:none;width:100%}


    #left{margin:30px 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-left:0;width:50%}


    #left li{position:relative;width:100%;list-style-type:none;height:22px;line-height:24px;border-bottom:1px dashed #CCC;counter-increment:Zzindex}


    #left li:before{content:counter(Zzindex);display:block;height:16px;background:#98D0FF;position:absolute;left:-23px;font-size:11px;top:5px;border-radius:2px;text-align:center;width:18px;color:#FFF;line-height:16px}


    #left li:after{content:" ";background:#98D0FF;display:block;width:6px;height:6px;position:absolute;top:10px;left:-8px;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:#d47a2a}


    #left li:nth-child(3):before,#left li:nth-child(3):after{background:#b9ba45}


    #left li:nth-child(4):before,#left li:nth-child(4):after{background:#aad655}


    #left li:nth-child(5):before,#left li:nth-child(5):after{background:#55e7aa}


    #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:0;text-align:right;position:absolute;top:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;left:auto}


    #left ul,#left th{padding-left: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:0!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:left}


    #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}


    Then go to your modules ...forum widgets and follow the below
    Latest topics table Scree557
    Latest topics table Scree556


    Last edited by skouliki on March 2nd 2021, 5:47 pm; edited 2 times in total

    yumm
    yumm
    Forumember


    Female Posts : 79
    Reputation : 3
    Language : Turkish / English

    In progress Re: Latest topics table

    Post by yumm December 6th 2018, 8:39 pm

    Am I must add every widgets?
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15311
    Reputation : 1705
    Language : English,Greek
    Location : Greece

    In progress Re: Latest topics table

    Post by skouliki December 6th 2018, 8:44 pm

    after the modifications of the templates you need to follow the images you must duplicate what you see exactly

    as ModernBB is a new version i havent tested the codes myself to check than everything works properly

    yumm
    yumm
    Forumember


    Female Posts : 79
    Reputation : 3
    Language : Turkish / English

    In progress Re: Latest topics table

    Post by yumm December 6th 2018, 9:03 pm

    skouliki wrote:after the modifications of the templates you need to follow the images you must duplicate what you see exactly

    as ModernBB is a new version i havent tested the codes myself to check than everything works properly

    Okay, than, Am I must delete another codes when paste your given codes?
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15311
    Reputation : 1705
    Language : English,Greek
    Location : Greece

    In progress Re: Latest topics table

    Post by skouliki December 6th 2018, 9:05 pm

    no modify the templates as instructions above

    yumm
    yumm
    Forumember


    Female Posts : 79
    Reputation : 3
    Language : Turkish / English

    In progress Re: Latest topics table

    Post by yumm December 6th 2018, 9:24 pm

    skouliki wrote:no modify the templates as instructions above

    Thank you, so where I must paste style code? The place on the color management?
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15311
    Reputation : 1705
    Language : English,Greek
    Location : Greece

    In progress Re: Latest topics table

    Post by skouliki December 6th 2018, 10:11 pm

    For the style paste the code to your css stylesheet

    yumm
    yumm
    Forumember


    Female Posts : 79
    Reputation : 3
    Language : Turkish / English

    In progress Re: Latest topics table

    Post by yumm December 7th 2018, 1:11 am

    skouliki wrote:For the style paste the code to your css stylesheet

    Latest topics table Screen16
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15311
    Reputation : 1705
    Language : English,Greek
    Location : Greece

    In progress Re: Latest topics table

    Post by skouliki December 7th 2018, 1:22 am

    Ok so in order for me to check it and fix the css style , i need to be able to see it



      Current date/time is September 23rd 2024, 12:33 am