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.

Backup and recovery templates

View previous topic View next topic Go down

Backup and recovery templates

Post by Zzbaivong on June 21st 2015, 11:28 am

Why was it created?


In forumotion, you can customize the template to make the theme as you like. With complex theme, the number template must be edited as much. Later, to store or share it with friends, you'll have to copy > paste each template, because Forumotion doesn't support this function. It was a very boring job and takes time, sometimes occurs confusion. So, I wrote it.


Features


Backup and recovery templates will help you backup and recovery of all templates in Forumotion quickly and accurately.

  1. All templates will be compressed into a zip file to store and share very convenient.
  2. Import the backup file from your computer with sufficient information and warning to help avoid confusion version.
  3. Notification on your desktop when this process is complete, you just keep tabs open while script is processing.
  4. One-Click mode: Simplify operations with one-click, if you need to import and export all your templates.


Screenshot




Video tutorial





How to set up?


Create an HTML page


To create an HTML page, go to Administration Panel > Modules > HTML pages management and create a new page with the following settings.

Title: Backup and recovery templates

Use your forum header and footer: No
Use this page as homepage: No

Page content:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Forumotion backup templates</title>
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link href="http://illiweb.com/rs3/10/frm/admin/admin.css" rel="stylesheet" type="text/css" media="screen" />
    <style>
        #zzBackup fieldset {
            counter-reset: section;
            border: 1px solid #07f
        }
       
        #zzBackup legend {
            color: #e000a2
        }
       
        #zzBackup ol {
            margin: 5px 0 15px;
            list-style: none outside none
        }
       
        #zzBackup li:before {
            counter-increment: section;
            content: counter(section) '.';
            width: 30px;
            display: inline-block;
            text-align: right;
            margin-right: 5px
        }
       
        .backupOption {
            font-size: 18px;
            color: #00a8a1
        }
       
        #importNoti strong {
            color: #DA4FB8
        }
       
        #zzBackup dt label {
            display: block;
            margin-top: 10px;
            color: #777
        }
       
        #zzBackup dt label:hover {
            color: #111
        }
       
        #zzBackup label input:checked ~ span {
            color: #0094CA
        }
       
        .buttonOne {
            display: none;
            margin-top: 10px;
            padding: 7px 20px;
            background: #f90e5e;
            color: #FFF;
            font-weight: 700;
            border: 3px solid #DDD
        }
       
        .buttonOne:hover {
            border-color: #444;
            cursor: pointer
        }
       
        .buttonOne:active {
            background: #444
        }
       
        #zzBackup:disabled,
        #zzBackup:disabled ~ span {
            color: #999;
            cursor: not-allowed
        }
       
        #skin,
        #version,
        #importSkinStatus {
            display: none
        }
       
        .icon_loading {
            background: url(http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/load.gif) 2px 2px/14px 14px no-repeat transparent;
            border-color: #FFAE00;
            color: #FFAE00;
        }
    </style>
</head>

<body>
    <a name="top"></a>
    <div class="conteneur_minwidth_IE">
        <div class="conteneur_layout_IE">
            <div class="conteneur_container_IE">
                <div id="page-header" class="clearfix">
                    <a href="/admin/index.forum"><img src="http://illiweb.com/bl/logo.png" alt="logo" class="logo" />
                    </a><a href="/" class="url">...</a>
                    <div style="padding: 10px;">
                        <p id="user_connected">...</p>
                    </div>
                    <ul class="preview_forum clearfix">
                        <li class="header_admin_left"><img src="http://illiweb.com/fa/admin/icones/loupe.png" alt="" /><a href="/" target="_blank">PREVIEW FORUM</a>
                        </li>
                        <li class="header_admin_right"><img src="http://i19.servimg.com/u/f19/18/83/32/63/video_11.png" alt="Toggle" /><a href="https://youtu.be/J6oeQ_f8nQw" target="_blank">VIDEO TUTORIAL</a>
                        </li>
                    </ul>
                </div>
                <div id="page-body">
                    <div id="tabs" class="clearfix">
                        <ul>
                            <li id="activetab" class="tabLi"><a href="#templates" class="tabA"><span>Templates</span></a>
                            </li>
                            <li class="tabLi"><a href="#skin" class="tabA"><span>Skin</span></a>
                            </li>
                            <li class="tabLi"><a href="#version" class="tabA"><span>Version</span></a>
                            </li>
                        </ul>
                    </div>
                    <!-- <div class="panel"> -->
                    <div id="wrapper">
                        <div id="content" class="clearfix">
                            <div id="main" class="expended_main">
                                <div id="main-content">
                                    <h2>Themes management</h2>
                                    <ul class="h2-breadcrumb clearfix">
                                        <li id="backupMode" class="first">Templates</li>
                                    </ul>
                                    <div id="templates" class="tabDiv"></div>
                                    <div id="skin" class="tabDiv">
                                        <blockquote class="block_left">
                                            <p class="explain">In this space you can export/import your favorites <strong>skins</strong>. You can also restore old <strong>skins</strong> already used.</p>
                                        </blockquote>
                                        <form method="post" name="" action="/admin/index.forum?part=themes&sub=styles&mode=export&extended_admin=1">
                                            <input type="hidden" name="mode" value="export" />
                                            <fieldset class="style-theme-export">
                                                <legend>Export your skin</legend>
                                                <dl class="clearfix">
                                                    <dt>
                                                        <label for="options"><img src="http://illiweb.com/fa/admin/icones/question2.png" align="absmiddle" title="Your can export your style or just a part of it, if you want to share or backup." />&nbsp;Export your skin</label>
                                                    </dt>
                                                    <dd>
                                                        <select id="theme_choosen" name="theme_choosen">
                                                            <option value="actual">Current skin</option>
                                                        </select>&nbsp;:&nbsp;
                                                        <select id="options" name="options">
                                                            <option value="all">Whole style</option>
                                                            <option value="album">Only the gallery</option>
                                                            <option value="col">Only colors</option>
                                                            <option value="img">All images</option>
                                                            <option value="img_gen">Images : General and explore</option>
                                                            <option value="img_forum">Images : Forum Icons</option>
                                                            <option value="img_topics">Images : Topics icons</option>
                                                            <option value="img_icons">Images : Mini-icons</option>
                                                            <option value="img_buttons">Images : buttons</option>
                                                            <option value="msg_icons">Messages icons</option>
                                                        </select>&nbsp;
                                                        <div class="div_btns">
                                                            <input type="submit" name="submit" value="Export" class="icon_ok" />
                                                        </div>
                                                    </dd>
                                                </dl>
                                            </fieldset>
                                        </form>
                                        <form target="noreload" method="post" name="" action="/admin/index.forum?part=themes&sub=styles&mode=export&extended_admin=1" enctype="multipart/form-data">
                                            <input type="hidden" name="mode" value="import" />
                                            <fieldset class="style-theme-export">
                                                <legend>Import the skin</legend>
                                                <p id="importSkinStatus" class="messagebox"><img src="http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/success.gif" alt="icon" style="height: 13px; width: 13px; vertical-align: middle; margin-top: -3px;" /> Skin import is <span style="color:green">complete</span>.</p>
                                                <dl class="clearfix">
                                                    <dt>
                                                        <label for="importfile"><img src="http://illiweb.com/fa/admin/icones/question2.png" title="Here you can import a skin you received from another forum. Your current skin will be replaced. Export it completely at least once before importing a new one!" />&nbsp;Import the skin</label>
                                                    </dt>
                                                    <dd>
                                                        <input type="file" id="importfile" name="importfile" />&nbsp;
                                                        <div class="div_btns">
                                                            <input type="submit" name="submit" value="Import" class="icon_ok" />
                                                        </div>
                                                    </dd>
                                                </dl>
                                            </fieldset>
                                        </form>
                                        <iframe width="0" height="0" frameborder="0" name="noreload" id="uploadSkin"></iframe>
                                    </div>
                                    <div id="version" class="tabDiv">
                                        <blockquote class="block_left">
                                            <p class="explain">You defined a personalized style sheet, if you change version it will be deleted and the version default style will be applied.</p>
                                        </blockquote>
                                        <form action="/admin/index.forum?part=themes&sub=styles&mode=version&extended_admin=1" method="post" name="form_version">
                                            <fieldset>
                                                <legend>Forumotion version</legend>
                                                <dl>
                                                    <dt>
                                                        <label>Change version&nbsp;:</label>
                                                    </dt>
                                                    <dd>
                                                        <input type="radio" name="tpl" id="subsilver" value="subsilver" class="radio" />
                                                        <label for="subsilver" dir=""> phpBB2</label>
                                                        <input type="radio" name="tpl" id="prosilver" value="prosilver" class="radio" />
                                                        <label for="prosilver" dir=""> phpBB3</label>
                                                        <input type="radio" name="tpl" id="punbb" value="punbb" class="radio" />
                                                        <label for="punbb" dir=""> PunBB</label>
                                                        <input type="radio" name="tpl" id="invision" value="invision" class="radio" />
                                                        <label for="invision" dir=""> Invision</label>
                                                    </dd>
                                                </dl>
                                                <div class="div_btns">
                                                    <input type="hidden" name="keep_theme" id="keep_theme_defaut" value="2" checked="checked" class="radio" />
                                                    <input type="submit" class="icon_ok" value="Save" name="change_version" />
                                                </div>
                                            </fieldset>
                                        </form>
                                    </div>
                                </div>
                                <!-- closing tag for #main-content -->
                            </div>
                            <!-- closing tag for #main -->
                            <div id="tools"></div>
                            <!-- closing tag for #tools -->
                        </div>
                        <!-- closing tag for #content -->
                    </div>
                    <!-- closing tag for #wrapper -->
                    <div class="clear"></div>
                    <p class="bottom-help">
                        <a class="help-link" href="https://github.com/baivong/ForumotionBackupTemplates/issues" target="_blank"><img src="http://illiweb.com/fa/admin/icones/help.png" align="middle" alt="help" />
                        </a>
                    </p>
                    <!-- We request you retain the full copyright notice below including the link to www.phpbb.com.This not only gives respect to the large amount of time given freely by the developersbut also helps build interest, traffic and use of phpBB2. If you (honestly) cannot retainthe full copyright we ask you at least leave in place the "Powered by phpBB" line, with"phpBB" linked to www.phpbb.com. If you refuse to include even this then support on ourforums may be affected.The phpBB Group : 2006-->
                </div>
                <!-- closing tag for #page-body -->
                <div id="page-footer"></div>
                <a name="down"></a>
            </div>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://baivong.github.io/ForumotionBackupTemplates/cdn/3.0.0/jszip.min.js" type="text/javascript"></script>
    <script src="http://baivong.github.io/ForumotionBackupTemplates/cdn/3.0.0/jszip-utils.min.js" type="text/javascript"></script>
    <script src="http://baivong.github.io/ForumotionBackupTemplates/cdn/3.0.0/FileSaver.min.js" type="text/javascript"></script>
    <script src="http://baivong.github.io/ForumotionBackupTemplates/cdn/3.0.0/fmbackup.js" type="text/javascript"></script>
    <script type="text/javascript">
        fmbackup.page_id = "PAGE_ID";
        fmbackup.init();
    </script>
</body>

</html>

Modifications: At end of code, Replace PAGE_ID by the ID of HTML page you just created.

Options


Translation (Optional)

Code:
fmbackup.translation = {
    langcode: "en",
    ex: {
        title: "Export Template",
        tooltip: "In this space, you can also export [[changed template]] to a *.zip file and save it to your computer.\nTo start, click {{Check}} button to get version information and the list of templates that you want to export. Then click {{Ok}}, wait for few seconds and you are good to go.",
        checkall: "Pick all",
        unpublish: "Waiting Templates",
        firsttip: "Pick categories you need then click {{Check}}.",
        download: "Downloading your templates. Click here if its take too long!",
        download2: "Your templates have been downloaded.",
        notemplate: "There's no template archive needed",
        sumtemplate: "The number of template archive needed it's",
        presssubmit: "Click {{Ok}} to start!",
        pressrefresh: "Click {{Start over}} to change your options!",
        loading: "Creating Zip file..."
    },
    im: {
        title: "Import Template",
        tooltip: "In this space, you can also import template from a *.zip file. Attention: your version must match with the version of the template you are going to import.\nTo start, click [[Open file]] (Browse...) pick your template zipped file (*.zip). Then click {{Ok}}, wait for few seconds and you are good to go.",
        choose: "Open zipped file",
        notpublish: "Not publish Template",
        firsttip: "Pick your zipped file then click {{Ok}}.",
        notname: "Opps! File name is <<not valid>>.",
        notversion: "Opps! This template require ",
        source: "Source",
        version: "Version",
        time: "Last update",
        count: "Template(s)",
        updateAll: "All done!",
        loading: "Updating template..."
    },
    decs: "Export/import all of templates in forumotion <<quickly>> and <<accurately>>.",
    option: "Options",
    simpleclick: "One-Click mode",
    wail: "Please hold on a second...",
    notsupport: "Your browser does not support this application!",
    requestlimit: "Access denied! Progress will start over in a while",
    reloadtemplate: "Reload template ",
    errortemplate: "Bad template ",
    second: "s.",
    filtering: "Template filtering...",
    checkone: "Pick at least 1 item",
    progressrun: "Progress is running.",
    bt: {
        filter: "Check",
        refresh: "Start over",
        submit: "Ok",
        start: "START",
    }
};

Translate the phrase in quotes, retain the special character [[]] {{}} << >>.

Change icons (Optional)

Code:
fmbackup.icons = {
    good: "http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/good.png",
    bad: "http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/bad.png",
    load: "http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/load.gif",
    info: "http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/info.png",
    error: "http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/error.gif",
    success: "http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/success.gif",
    disable: "http://baivong.github.io/ForumotionBackupTemplates/cdn/icons/disable.png"
};

Icon sizes: good, bad: 48x48 px, other: 16x16 px.

Page id (Require)

Code:
fmbackup.page_id = "PAGE_ID";

Replace PAGE_ID by the ID of HTML page Backup and recovery templates.

Run (Require)

Code:
fmbackup.init();

Example


Translations into Vietnamese and has page-id as 28.

Code:
<script type="text/javascript">
    fmbackup.translation = {
        langcode: "vi",
        ex: {
            title: "Xuất Template",
            tooltip: "Trong bảng này, bạn có thể xuất tất cả [[template đă được thay đổi]] của bạn vào một tập tin nén (.zip) và tải nó về máy.\nĐể bắt đầu, bạn nhấn vào nút {{Kiểm tra}} để lấy thông tin phiên bản và danh sách template cần xuất. Sau đó nhấn {{Xác nhận}} và chờ tiến tŕnh hoàn thành.",
            checkall: "Chọn tất cả",
            unpublish: "Template chưa công khai",
            firsttip: "Chọn các mục chứa template cần lưu trữ và nhấn {{Kiểm tra}}.",
            download: "Tập tin đang được tải xuống. Nhấn vào đây nếu bạn đợi quá lâu.",
            download2: "Template của bạn đă được tải xong.",
            notemplate: "Không có template cần lưu trữ.",
            sumtemplate: "Tổng số template cần lưu trữ là",
            presssubmit: "Nhấn {{Xác nhận}} để bắt đầu!",
            pressrefresh: "Nhấn {{Làm lại}} để chọn mục khác!",
            loading: "Đang tạo tập tin lưu trữ..."
        },
        im: {
            title: "Nhập Template",
            tooltip: "Trong bảng này, bạn có thể nhập template từ tập tin nén (.zip) đă lưu trữ trước đó. Lưu ư rằng: diễn đàn phải được chạy cùng phiên bản với bản lưu trữ.\nĐể bắt đầu, bạn nhấn [[Chọn tệp]] (Browse...) và t́m đến vị trí tập tin lưu trữ. Sau đó nhấn {{Xác nhận}} và chờ tiến tŕnh hoàn thành.",
            choose: "Chọn tập tin lưu trữ",
            notpublish: "Không công khai template",
            firsttip: "Chọn tập tin đă lưu trữ và nhấn {{Xác nhận}}.",
            notname: "Lỗi không tương thích! Tên tập tin <<không hợp lệ>>.",
            notversion: "Lỗi không tương thích! Tập tin này lưu trữ Template cho phiên bản",
            source: "Nguồn",
            version: "Phiên bản",
            time: "Lưu lúc",
            count: "Số template",
            updateAll: "Tất cả template đă được cập nhật.",
            loading: "Đang cập nhật template..."
        },
        decs: "Nhập/Xuất tất cả templates trong Forumotion một cách <<nhanh chóng>> và <<chính xác>>.",
        option: "Tùy chọn",
        simpleclick: "Chế độ 1-Click",
        wail: "Vui ḷng chờ trong giây lát...",
        notsupport: "Tŕnh duyệt của bạn không hỗ trợ ứng dụng này!",
        requestlimit: "Lỗi máy chủ từ chối truy cập! Tiến tŕnh sẽ bắt đầu lại sau",
        reloadtemplate: "Tải lại template ",
        errortemplate: "Lỗi template ",
        second: "giây.",
        filtering: "Đang kiểm tra...",
        checkone: "Bạn phải chọn ít nhất 1 mục!",
        progressrun: "Tiến tŕnh đang xử lư.",
        bt: {
            filter: "Kiểm tra",
            refresh: "Làm lại",
            submit: "Xác nhận",
            start: "BẮT ĐẦU"
        }
    };

    fmbackup.page_id = 28;

    fmbackup.init();
</script>


Source code


Source Code is available on Github: Version 3.0.0

Zzbaivong
Forumember

Posts : 95
Reputation : 46
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: Backup and recovery templates

Post by JScript on June 21st 2015, 1:13 pm

Excellent! I have not tested it yet, but for the great description already gives for me to understand very well ...
Just need to add the templates of the mobile version!

5 stars for me,

JS

JScript
Forumember

Male Posts : 741
Reputation : 168
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Backup and recovery templates

Post by Zzbaivong on June 21st 2015, 1:49 pm

Thank you for your compliment. Very Happy
It was added the templates of the mobile version. Try it and write to me your reviews. Wink

Zzbaivong
Forumember

Posts : 95
Reputation : 46
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: Backup and recovery templates

Post by Zeus on June 22nd 2015, 7:29 pm

Good job! I have tested the code and it works.  Smile

Zeus
Forumember

Male Posts : 350
Reputation : 21
Language : Romanian and english
Location : Bucharest, Romania

http://extrem-tutorials.com

Back to top Go down

Re: Backup and recovery templates

Post by Van-Helsing on July 2nd 2015, 2:36 am

Hello @Zzbaivong,
Another suggestion is to add on your code javascripts backup too;)

Best Regards,
Black-Shadow

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: Backup and recovery templates

Post by Zzbaivong on February 23rd 2016, 3:14 am

In a recent update, the Forum has added a new template. However, you will not need to update for this script, because it was still working well.
Its operating mechanism does not rely on the list of templates, so the update to add or delete a template will not affect it. Only when there is a group of new templates are added (e.g. Mobile version), then you can update the parameter listTempGroup at here.

Zzbaivong
Forumember

Posts : 95
Reputation : 46
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: Backup and recovery templates

Post by Van-Helsing on February 23rd 2016, 3:18 am

Hello,
Very nice @Zzbaivong thumleft . Is it possible to adapt these script to do backup the javascript codes too?

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: Backup and recovery templates

Post by Zzbaivong on February 23rd 2016, 3:23 am

@Van-Helsing wrote:Hello,
Very nice @Zzbaivong thumleft . Is it possible to adapt these script to do backup the javascript codes too?
Thanks for your ideas, maybe it will be in the next update.

Zzbaivong
Forumember

Posts : 95
Reputation : 46
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: Backup and recovery templates

Post by Van-Helsing on February 23rd 2016, 3:25 am

How can I update my current scripts on the browser with the new update?

Van-Helsing
Hyperactive

Male Posts : 2222
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Re: Backup and recovery templates

Post by Zzbaivong on February 23rd 2016, 3:29 am

Currently I do not have any update for this script, if available, I will update at #962990

Zzbaivong
Forumember

Posts : 95
Reputation : 46
Language : JavaScript ^^

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