Forumactif Edge - A Free Modern and Responsive Forum Theme

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

Q : Is the installation safe ? Does it collect any data ?

A : Yes the installation is safe, there's nothing to worry about ! Forumactif Edge collects no data during or after the installation. We're completely transparent, if you have any doubts feel free to review our source code !

Q : Why isn't Forumactif Edge in my language ?

A : I don't know every language since I'm only one person, as such I allow members of Forumactif Edge to submit translations. If a translation is not available for your language please click here to learn how to submit one.

Q : Is Forumactif Edge an official project of Forumotion ?

A : No, we are not officially affiliated with Forumactif or their parent company. Forumactif Edge is built by the community of Forumotion !

Q : Is this theme REALLY free ?

A : Yes it's 100% free, no strings attached ! I wanted to create a modern and responsive theme for Forumotion, because the current forum versions provided are dated and not mobile-friendly. Forumactif Edge is the answer if you want a modern, mobile-friendly design !


Is your question not answered here ? Try checking out the full FAQ by visiting the page below !
https://github.com/SethClydesdale/forumactif-edge/wiki/Frequently-Asked-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.

about the theme installer
can i use this Script to install other themes as well
i mean ill re host the other theme CSS and templates then ill replace links inside the new Script
do you mind that
i would like to know
because i see some people who cant install some themes by there own
so this trick will be a better idea for them
ill wait your answer
thanks

@Michael_vx sure, the project is open source so you're free to take and use the source code.

thanks a lot for allowing me to use it
i have looked into scripts and i think i should only replace the files
but do i have to use all files i mean if the theme dose not have JAVA or its not phpbb3
where is these parts that tells what templates and the forum version i still didnt find them yet

You'll see a variable called "FAE.raw" a lot. This is pointing to the repository that contains the raw files and is defined in installer-utils.js.

Currently FAE.raw points to my Forumactif Edge repo where all the raw files are found : https://raw.githubusercontent.com/SethClydesdale/forumactif-edge/master/

If I want to access CSS files I do this :
FAE.raw + 'css/fa_edge.css';

Which points to :
https://raw.githubusercontent.com/SethClydesdale/forumactif-edge/master/css/fa_edge.css


installer-utils.js is the main functionality for the control panel. When you click "install" we get the main installation instructions :
https://github.com/SethClydesdale/forumactif-edge/blob/master/javascripts/install.js

This file tells the browser everything that it needs to do, to install Forumactif Edge. You'll see each step is in its own object with a small line of information to tell what that step does.

If you need anymore info let me know.

ok i get it some how
if im not worng
keep_theme: 2,
this is where the phpbb3 option
so if i want phpbb2 the option will 1 or 3 for punbb am i right ?
i think this part is the only one im confused about
the rest looks easy
all what i have to do now is to set the new templates and get my first test

keep_theme is a variable that decides whether the current theme CSS / images should be kept. 2 = no

You change the theme here : tpl : 'prosilver',

subsilver = phpbb2
prosilver = phpbb3
punbb = punbb
invision = invision

ok got that
the nest step is to start my steps
and to creat the new themse

somrting is not right with me
i think i can not change links to be something like a web host
here is what i made

Code:

// installation instructions
FAE.step = [

    {
        info: 'تاكيد نسخة المنتدى',
        type: 'POST',
        url: 'part=themes&sub=styles&mode=version&extended_admin=1',
        data: {
            tpl: 'subsilver',
            keep_theme: 2,
            code: 1,
            change_version: 'Save'
        }
    },


    {
        info: 'Unoptimizing and deactivating default CSS',
        type: 'POST',
        url: 'part=themes&sub=logos&mode=css&extended_admin=1',
        data: {
            allow_css_perso: 0,
            css_base: 0,
            optimize_css: 0,
            submit_base_css: 'Save'
        }
    },


    {
        info: 'Getting fa_edge.min.css',
        type: 'GET',
        url: ',
        func: function(d) {
            FAE.step[FAE.index + 1].data.edit_code = d;
        }
    },


    {
        info: 'Installing fa_edge.min.css',
        type: 'POST',
        url: 'part=themes&sub=logos&mode=css&extended_admin=1',
        data: {
            submit: 'Submit'
        }
    },


    {
        info: 'Getting and deleting all JavaScript files to prevent installation errors',
        type: 'GET',
        url: '/admin/index.forum?mode=js&part=modules&sub=html&tid=' + FAE.tid,
        func: function(d) {
            var form = $('#pageListHtml', d),
                file = $('input[type="checkbox"]', form),
                i = 0,
                j = file.length;

            if (form[0]) {
                for (; i < j; i++) {
                    file[i].checked = true;
                }

                $.post(form[0].action, form.serialize() + '&attachments_submit=Delete', function(d) {
                    var confirmation = $('form[method="post"]', d);
                    $.post(confirmation[0].action, confirmation.serialize() + '&confirm=Yes');
                });
            }
        }
    },

    {
        info: 'Getting template index_body.html',
        type: 'GET',
        url: './templates/general/index_body.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },


    {
        info: 'Installing template index_body.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 110,
            l: 'main',
            tpl_name: 'index_body',
            submit: 'Save'
        }
    },


    {
        info: 'Publishing template index_body.html',
        type: 'PUBLISH',
        tpl: 110
    },


    {
        info: 'Getting template index_box.html',
        type: 'GET',
        url: './templates/general/index_box.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },


    {
        info: 'Installing template index_box.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 111,
            l: 'main',
            tpl_name: 'index_box',
            submit: 'Save'
        }
    },


    {
        info: 'Publishing template index_box.html',
        type: 'PUBLISH',
        tpl: 111
    },

    {
        info: 'Getting template overall_footer_begin.html',
        type: 'GET',
        url: './templates/general/overall_footer_begin.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },


    {
        info: 'Installing template overall_footer_begin.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 115,
            l: 'main',
            tpl_name: 'overall_footer_begin',
            submit: 'Save'
        }
    },


    {
        info: 'Publishing template overall_footer_begin.html',
        type: 'PUBLISH',
        tpl: 115
    },


    {
        info: 'Getting template overall_footer_end.html',
        type: 'GET',
        url: './templates/general/overall_footer_end.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },


    {
        info: 'Installing template overall_footer_end.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 133,
            l: 'main',
            tpl_name: 'overall_footer_end',
            submit: 'Save'
        }
    },


    {
        info: 'Publishing template overall_footer_end.html',
        type: 'PUBLISH',
        tpl: 133
    },


    {
        info: 'Getting template overall_header.html',
        type: 'GET',
        url: ./'templates/general/overall_header.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },


    {
        info: 'Installing template overall_header.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 116,
            l: 'main',
            tpl_name: 'overall_header',
            submit: 'Save'
        }
    },


    {
        info: 'Publishing template overall_header.html',
        type: 'PUBLISH',
        tpl: 116
    },

    {
        info: 'Getting template topics_list_box.html',
        type: 'GET',
        url: './templates/general/topics_list_box.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },


    {
        info: 'Installing template topics_list_box.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 124,
            l: 'main',
            tpl_name: 'topics_list_box',
            submit: 'Save'
        }
    },


    {
        info: 'Publishing template topics_list_box.html',
        type: 'PUBLISH',
        tpl: 124
    },

    {
        info: 'Getting template viewforum_body.html',
        type: 'GET',
        url: './templates/general/viewforum_body.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },

    {
        info: 'Installing template viewforum_body.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 125,
            l: 'main',
            tpl_name: 'viewforum_body',
            submit: 'Save'
        }
    },

    {
        info: 'Publishing template viewforum_body.html',
        type: 'PUBLISH',
        tpl: 125
    },

    {
        info: 'Getting template viewtopic_body.html',
        type: 'GET',
        url: './templates/general/viewtopic_body.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },


    {
        info: 'Installing template viewtopic_body.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 127,
            l: 'main',
            tpl_name: 'viewtopic_body',
            submit: 'Save'
        }
    },


    {
        info: 'Publishing template viewtopic_body.html',
        type: 'PUBLISH',
        tpl: 127
    },

    {
        info: 'Getting template mod_recent_topics.html',
        type: 'GET',
        url: './templates/portal/mod_recent_topics.html',
        func: function(d) {
            FAE.step[FAE.index + 1].data.template = d;
        }
    },


    {
        info: 'Installing template mod_recent_topics.html',
        type: 'POST',
        url: 'part=themes&sub=templates&mode=edit_main&extended_admin=1',
        data: {
            t: 904,
            l: 'main',
            tpl_name: 'mod_recent_topics',
            submit: 'Save'
        }
    },


    {
        info: 'Publishing template mod_recent_topics.html',
        type: 'PUBLISH',
        tpl: 904
    },

    {
        info: 'Creating navigation link for control panel',
        type: 'GET',
        url: '/admin/index.forum?part=themes&sub=index&mode=navbar&extended_admin=1&tid=' + FAE.tid,
        func: function(d) {
            for (var a = $('fieldset tr', d), i = 0, j = a.length, regex = new RegExp('FAE Control Panel|' + window.location.pathname, 'ig'), hit = false; i < j; i++) {
                if (regex.test(a[i].innerHTML)) {
                    hit = true;
                    break;
                }
            }

            if (!hit) {
                $.post('/admin/index.forum?part=themes&sub=index&mode=navbar&tid=' + FAE.tid, {
                    navbar_menu: 'FAE Control Panel',
                    navbar_image: '',
                    navbar_text: 'FAE Control Panel',
                    navbar_url: window.location.pathname,
                    navbar_admin: true,
                    action: 'insert',
                    submit: 'Save'
                });
            }

        }
    },


    {
        info: 'Resynchronizing forum',
        type: 'POST',
        url: 'mode=general&part=general&sub=general',
        data: {
            resync: 'on',
            submit: 'Save'
        }
    }
];

FAE.index = -1;
FAE.quota = FAE.step.length;

// proceed to and execute the next step in the installation
FAE.next = function() {
    if (++FAE.index >= FAE.quota) {
        FAE.log('Installation of Forumactif Edge has been completed successfully!', 'color:#8B5;font-weight:bold;');
        FAE.log('When you\'re finished, please <a href="javascript:window.location.reload();">click here</a> to reload the page and experience your forum in a whole new way!');

    } else {
        var step = FAE.step[FAE.index];
        FAE.log(step.info + '...');

        if (step.type == 'POST') {
            $.post('/admin/index.forum?' + step.url + FAE.tid, step.data, function() {
                window.setTimeout(FAE.next, FAE.delay);
            }).error(FAE.error);

        } else if (step.type == 'GET') {
            $.get(step.url, function(d) {
                step.func(d);
                window.setTimeout(FAE.next, FAE.delay);
            }).error(FAE.error);

        } else if (step.type == 'PUBLISH') {
            $.get('/admin/index.forum?part=themes&sub=templates&mode=edit_main&main_mode=edit&extended_admin=1&t=' + step.tpl + '&l=' + (step.mobile ? 'mobile' : 'main') + '&pub=1&tid=' + FAE.tid, function() {
                window.setTimeout(FAE.next, FAE.delay);
            }).error(FAE.error);
        }

    }

    FAE.progress();
};

// handler in case of any errors in the installation process
FAE.error = function() {
    FAE.log('An error was encountered on step ' + FAE.index + ' (' + FAE.step[FAE.index].info + ') of the installation process. Please <a href="http://fmdesign.forumotion.com/t700-forumactif-edge-support#13923" target="_blank">open a new issue</a> and provide this information for further assistance.', 'color:#E53;font-weight:bold;');
    window.setTimeout(FAE.next, 1000);
};

i hosted files on micsoft.pe.hu
the hosting service even stopped working in sudden and telling me cpu max used
i need to learn how to use
github.com

Sounds like you executed the JS on their server and it got stuck somehow...

yea i guess
i was able to enter via FTP and i removed all files
looks the only way is
github.com
and i still dont know how to use this site yet

Michael_vx wrote:yea i guess
i was able to enter via FTP and i removed all files
looks the only way is
github.com
and i still dont know how to use this site yet

I'm not a github member myself, but I just Googled these handy guides for you to get you started:

https://guides.github.com/activities/hello-world/
http://product.hubspot.com/blog/git-and-github-tutorial-for-beginners

or wait for @Ange Tuteur to be back tomorrow to help you on your way.


Hope this helped.

I believe "cpu_max" means too many requests were sent to your host and they temporarily denied service.

Github isn't too hard, but it's not easy either. There's a lot of things to learn, and I don't even know everything myself. It's pretty straightforward though ; Create a repository for your project ( "NEW" button on repository tab on your profile ) ---> Import or create files ---> collaborate with others, report issues, etc..

Here's their help page :
https://help.github.com/

ill try do my best and learn to creat it my self
thanks so much

You're welcome, and best of luck !

@Ange Tuteur thanks alot for increasing the reply box and post box in mobile. It looks quite bigger and pretty now.

I wish i could know what code is responsible for it. Thanks

Hi @Paradiseng,

No problem, @BlackScorpion brought that issue to my attention during beta and I fixed it in the release of v1.0.0 with the following CSS rule.

Code:

#text_editor_textarea {
  height:250px;
  width:90%;
}

Ange Tuteur wrote:Hi @Paradiseng,

No problem, @BlackScorpion brought that issue to my attention during beta and I fixed it in the release of v1.0.0 with the following CSS rule.

Code:

#text_editor_textarea {
  height:250px;
  width:90%;
}

Thanks alot.... You are really a genius!

No problem !

hi @Ange Tuteur
I want to know can I create admin Panel such as Control Panel FAE To create categories and forums automatically
Is this possible or impossible ??

@bodahassan yes, it's possible, but it'll require knowledge of JavaScript. Primarily looping and ajax. If you're interested in the coding behind the panel, you can look at on github.

This is the control panel functionality :
https://github.com/SethClydesdale/forumactif-edge/blob/master/javascripts/installer-utils.js

and this is the automated instructions for installation :
https://github.com/SethClydesdale/forumactif-edge/blob/master/javascripts/install.js

Very nice !

I might need help installing this theme on my forum

frumoasa tema