Forumactif Edge - A Free Modern and Responsive Forum Theme

[Ange Tuteur]

First topic message reminder :

Hello everyone,

Since November 2015 I've been working on developing a new "forum version" for Forumotion forums that's modern and responsive. Today I've recently published the production release of this software and would like to share it with all of you who are looking for a more modern design that's also mobile-friendly.

Forumactif Edge features :

• Modern mobile-friendly design.
  
• Smart automated control panel that assists you with installation and other tasks.
  
• Dynamic theme selector so your members can browse in the color they prefer.
  
• Side panels for widgets and quick navigation so your forum has maximum space and accessibility.
  
• Automatic color coding of posts based on usergroup affiliation.
  
• Built in counter for reputation votes.
  
• and more...
  

Forumactif Edge will constantly evolve because it's open source and managed by the community. That means we'll take feedback, suggestions, and reports from the community -- that's right, your voice can shape the future of this project ! If you'd like to install Forumactif Edge on your Forumotion forum, please see the wiki link below which includes detailed instructions on how to install the theme along with additional information on Forumactif Edge that's constantly changing.

Installation Tutorial : https://github.com/SethClydesdale/forumactif-edge/wiki/Installing

Not ready to install yet ? No problem ! Take a look around, check out the FAQ and previews below, or visit our website link below to learn more about what Forumactif Edge has to offer !

Website : https://sethclydesdale.github.io/forumactif-edge/

FAQ

Do you have any questions or concerns about Forumactif Edge ? If so, feel free to check out our FAQ page or leave a reply below with your question ! We're always ready to answer your questions !

Previews

Mobile Preview : Forumactif Edge is responsive, so that means it's mobile-friendly ! Don't believe it ? Check out Google's Mobile-Friendly test !


Feature Preview : Forumactif Edge comes with a theme changer that allows your members to browse in the color of their choice, and to give your forum maximum space it docks widgets to a side panel !

Full Page Screenshots

Click any of the links below to see a full page screen shot of Forumactif Edge in action.

Desktop	Mobile
Homepage	Homepage (Mobile)
Topics	Topics (Mobile)
Forumactif Edge Control Panel	N/A

If you have any questions or feedback, feel free to leave them below. I hope all of you enjoy this theme as much as I have making it.

[Mihai]

I have applied it its working but topics never coming i modifed the f18-tips-and-tricks
to my forum form but still not getting new topics  @Ange Tuteur

Hello,

i deleted my previous reply and i think i know your problem: since you changed the original topic „tips and tricks”, i think the problem is coming because you dont have an topic created with an tutorial!

Let me know,
Mihai

[px4ev]

I have applied it its working but topics never coming i modifed the f18-tips-and-tricks
to my forum form but still not getting new topics  @Ange Tuteur

Hello,

i deleted my previous reply and i think i know your problem: since you changed the original topic „tips and tricks”, i think the problem is coming because you dont have an topic created with an tutorial!

Let me know,
Mihai

where I need to specify tutorial! because I already tried in the title and in the topic body but both not working
I already tried to read the JS function but as I understood from it should get any topic but with condition it's not announcement.
so, it should show the normal and sticky topics.
and because I don't have good background in JS and JQ so i cannot understand the code fully

[Mihai]

where I need to specify tutorial! because I already tried in the title and in the topic body but both not working
I already tried to read the JS function but as I understood from it should get any topic but with condition it's not announcement.
so, it should show the normal and sticky topics.
and because I don't have good background in JS and JQ so i cannot understand the code fully

You need to write an tutorial in that topic where you set it instead of tips and tricks.

Could please i have an test account (maybe with admin priviligies?), this needs to be made via private message and not on this topic, please!

[px4ev]

where I need to specify tutorial! because I already tried in the title and in the topic body but both not working
I already tried to read the JS function but as I understood from it should get any topic but with condition it's not announcement.
so, it should show the normal and sticky topics.
and because I don't have good background in JS and JQ so i cannot understand the code fully

You need to write an tutorial in that topic where you set it instead of tips and tricks.

Could please i have an test account (maybe with admin priviligies?), this needs to be made via private message and not on this topic, please!

check private message

[Mihai]

check private message

PM received with thanks. Please hold on, while i investigate this...

[Simone Boi]

Hi! I'm using AwesomeBB but i can't make the Starred forum works, can someone help me please?

[كونان2000]

Hi! I'm using AwesomeBB but i can't make the Starred forum works, can someone help me please?

Hello  @Simone Boi

Find the next part in index_box template

Code:

<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

replace it with

Code:

<a href="{catrow.forumrow.U_VIEWFORUM}" class="conan2000">{catrow.forumrow.FORUM_NAME}</a>

Installing the JavaScript
Title * : as you like
Placement : In all the pages

Code:

$(function() {
  if (/\/c\d+-/.test(window.location.href)) return; // return if category
 
  // automatically detects the version
  var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';
 
  // error notifications
  if (version == 'badapple' || !window.JSON || !window.localStorage) {
    var errString = 'The plugin "fa_starred" could not be executed because : ';
 
    if (version == 'badapple') errString += '\nYour forum version is not supported.';
    if (!window.JSON) errString += '\nJSON is not supported by your browser';
    if (!window.localStorage) errString += '\nThe Storage API is not support by your browser.';
 
    window.console && console.error ? console.error(errString) : alert(errString);
    return;
  }
 
  // get fontawesome if unavailable
  if (!$('link[href$="font-awesome.min.css"]')[0]) {
    document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" />');
  }
 
  window.fa_starred = {
    version : version, // forum version
    forums : localStorage.fa_starred_forums ? JSON.parse(localStorage.fa_starred_forums) : null,
 
    // language settings
    lang : {
        star : 'Star this forum',
      unstar : 'Unstar this forum',
      starred : 'Starred Forums'
    },
 
    icon : {
        star : '',
      unstar : ''
    },
 
    // selectors
    select : {
      content : version ? document.getElementById('main-content') : $('#content-container td:has(> img[height="5"])')[0],
      category : ['.forumline:has(.secondarytitle)', '.forum.type-table-forum', '.main:has(.tcr) .main-content', '.borderwrap:has(.index-box)', '.forum-category'][version],
      forum :'a.' + (version ? 'conan2000': ''),
      row : version == 1 ? '.forum-section' : version == 4 ? '.forum-block' : 'tr'
    },
 
    // move the selected forum to the "starred" category
    star : function(that, id, startup) {
      if (!fa_starred.forums) fa_starred.forums = {};
      if (!fa_starred.board) fa_starred.createStarBoard();
 
      if (!fa_starred.forums[id]) {
        // clone the row and add it to the star board
        var clone = $(that).closest(fa_starred.select.row)[0].cloneNode(true),
            rows = $(that).closest(fa_starred.select.row).parent().find(fa_starred.select.row);
 
        // update the star attributes for the clone
        $('.fa_star', clone).attr({
          'onclick' : 'fa_starred.unstar(this, ' + id + '); return false',
          'class' : 'fa_unstar',
          'title' : fa_starred.lang.unstar
        }).html('<i class="fa">' + fa_starred.icon.unstar + '</i>');
 
        fa_starred.list.appendChild(clone); // append the clone to the starred category
 
        $(that).closest(fa_starred.select.row)[0].style.display = 'none'; // hide the original row
 
        // check if all forums are hidden for this category
        for (var i = 0, j = rows.length, k = 0; i < j; i++) {
          if (/none/.test(rows[i].style.display)) k++;
        }
 
        // hide the category if all forums are hidden
        if (i == k) {
          $(that).closest(fa_starred.select.category)[0].className += ' fa_star_hidden';
        }
 
        // jump to the star board if it's out of sight
        if (!startup && document.getElementById('fa_star_board').getBoundingClientRect().top < 0) {
          window.location.hash = '';
          window.location.hash = '#fa_star_board';
        }
 
        // update storage
        fa_starred.forums[id] = 1;
        localStorage.fa_starred_forums = JSON.stringify(fa_starred.forums);
      }
 
    },
 
    // unstar the selected forum
    unstar : function (that, id) {
      var forum, catg, i = 0, j;
 
      fa_starred.list.removeChild($(that).closest(fa_starred.select.row)[0]); // remove cloned row
 
      // update variables
      forum = $(fa_starred.select.forum + '[href^="/f' + id + '-"]')[0]; // original forum
      catg = $(forum).closest(fa_starred.select.category)[0]; // original category
 
      $(forum).closest(fa_starred.select.row)[0].style.display = ''; // show the original forum's row
 
      // show the category if all forums were hidden
      if (/fa_star_hidden/.test(catg.className)) {
        catg.className = catg.className.replace(/fa_star_hidden/, '');
      }
 
      // delete the starred forum and check if there are anymore stars
      delete fa_starred.forums[id];
      for (j in fa_starred.forums) {
        if (fa_starred.forums[j]) i++;
      }
 
      // update storage
      if (i) {
        localStorage.fa_starred_forums = JSON.stringify(fa_starred.forums);
      } else {
        fa_starred.forums = null;
        localStorage.removeItem('fa_starred_forums');
 
        // remove nodes
        if (version == 2) {
          fa_starred.board.parentNode.removeChild(fa_starred.board.previousSibling); // remove header for punbb
        }
        fa_starred.board.parentNode.removeChild(fa_starred.board);
 
        // delete node references
        delete fa_starred.board;
        delete fa_starred.list;
      }
 
    },
 
    // create the "starred" category
    createStarBoard : function() {
      var catg = $(fa_starred.select.category, fa_starred.select.content)[0],
          board = catg ? catg.cloneNode(true) : null,
          rows = $(fa_starred.select.row, board);
  
      if (!catg) return;
 
      board.id = 'fa_star_board';
      board.style.display = '';
 
      if (version != 2) {
        board.getElementsByTagName('H2')[0].innerHTML = fa_starred.lang.starred; // change category title
      }
 
      // find forum list and remove exisiting rows in the clone
      fa_starred.list = rows[0].parentNode;
      rows.remove();
 
      // punbb insertion method
      if (version == 2) {
        var head = catg.previousSibling.cloneNode(true);
        head.getElementsByTagName('H2')[0].innerHTML = fa_starred.lang.starred;
 
        catg.parentNode.insertBefore(board, catg.previousSibling);
        board.parentNode.insertBefore(head, board);
      } else {
        catg.parentNode.insertBefore(board, catg); // default insertion
      }
 
      fa_starred.board = board;
    }
  };
 
  fa_starred.select.row += ':has(' + fa_starred.select.forum + ')'; // update row selector
 
  // general startup
  var a = $(fa_starred.select.forum, fa_starred.select.content),
      i = 0,
      j = a.length,
      k,
      id;
 
  // setup star board and reset forum states if starred
  if (fa_starred.forums) {
    if (!fa_starred.board) fa_starred.createStarBoard();
    for (k in fa_starred.forums) {
      fa_starred.forums[k] = 0;
    }
  }
 
  // setup stars and starred forums
  for (; i < j; i++) {
    id = a[i].href.replace(/.*?\/f(\d+).*/, '$1');
 
    a[i].insertAdjacentHTML('afterend', '<a href="#" class="fa_star" onclick="fa_starred.star(this, ' + id + '); return false;" title="' + fa_starred.lang.star + '"><i class="fa">' + fa_starred.icon.unstar + '</i></a>');
 
    if (fa_starred.forums) {
      for (k in fa_starred.forums) {
        if (k == id) {
          fa_starred.star(a[i], id, true);
        }
      }
    }
  }
 
  document.getElementsByTagName('HEAD')[0].insertAdjacentHTML('beforeend', '<style type="text/css">a.fa_star,a.fa_unstar{color:#999!important;font-size:16px;vertical-align:-2px;margin-left:3px;opacity:0}a.fa_star:hover,a.fa_unstar,li:hover a.fa_star,tr:hover a.fa_star{opacity:1}a.fa_star i,a.fa_unstar i{position:relative}a.fa_star i:hover:after,a.fa_unstar i:after{content:"' + fa_starred.icon.star + '";position:absolute;left:0;bottom:0}a.fa_unstar i:hover:after{content:""}.fa_star_hidden {display:none!important}</style>');
});

[Simone Boi]

Hi @كونان2000 !
i changed index box as u said and used your script, but still doesn't work, maybe it just doesn't work for awesomebb?

Thank you

[كونان2000]

hi @Simone Boi
Yes, it works with awesomebb version


Make sure you have installed JavaScript correctly
Make sure that there is no conflict with other codes

[Simone Boi]

Thank you!
It works! Thank you very much!