LoginCreate an Account

Documentation for Sneeit Spot 0.1.6 – Super Chrome Extension for Blogger / Bloggspot

We have a very detail documentation for Sneeit Spot 0.1.6 – Super Chrome Extension for Blogger / Bloggspot with 4 sections, 7 sub sections, 2 images, 16 paragraphs and 1630 words

Sneeit Spot is the most powerful tools for Blogger platform at this time. So it would be a huge advantage for your themes if they are compatible with the extension. That's the reason we write this documentation so you (theme author / developer) can make your theme codes work well with the extension.

Prepare for defines

We will put all defines inside the following code:

<b:if cond='false'><![CDATA[
... your defines will be here ...
]]></b:if>

I recommend you place it at the end of your theme code before the body tag so you can access it easily.

Define theme options

You will need to put your option defines inside the following code:

SNEEIT-THEME-OPTIONS
... your theme option defines will be here ...
SNEEIT-THEME-OPTIONS

At first, you will define an option group. For example, Site Layout group:

"Site Layout" : {
... your individual option define will be here ... 
}

Then you find a code that you want to provide an option to alter it. In this example, I have a code like the following in my theme code:

.wrapper {
    padding: 20px 20px 30px 20px;
    max-width: 100%;
    width: /*-var-wrapper-width-start*/1100px/*-var-wrapper-width-end*/;
    box-sizing: border-box;
}

And I want to set an option so user can change the number 1100. Here will be the code I define for the option:

"Entire Site Width": {
    "start": "/*-var-wrapper-width-start*/",
    "end": "px/*-var-wrapper-width-end*/",
    "type": "number",
    "default": 1100, 
    "desc": "Entire site width in PIXELS (px). Allow integer number only."
}

The extension will replace ALL values which are staying between the start and end texts. The final code will be:

<b:if cond='false'><![CDATA[
SNEEIT-THEME-OPTIONS
"Site Layout" : {
    "Entire Site Width": {
        "start": "/*-var-wrapper-width-start*/",
        "end": "px/*-var-wrapper-width-end*/",
        "type": "number",
        "default": 1100, 
        "desc": "Entire site width in PIXELS (px). Allow integer number only."
    }
}
SNEEIT-THEME-OPTIONS
]]></b:if>

Now, update your theme code, and access Sneeit Spot, choose Options and you will see:

Option define format

Basically, an option can be defined as following:

"option-name": {
    "title": "Optional, if missing, it will show the option-name instead",
    "start": "Required. The text to search the start position of value in theme code",
    "end": "Required. The text to search the end position of value in theme code",
    "type": "Optional. If missing, it will be a text. Support types: text, number, radio, checkbox, select, color, font",
    "default": Optional. Default value. Which be use to reset in Sneeit Spot UI, 
    "desc": "Optional. Show description for the option in Sneeit Spot UI"
}

All default, uncheck, check defines can be a Number, String or Boolean. The string should be wrapped between " (quotation marks). And all defines are following JSON format, so you should understand about JSON should not use , (comma) after the last elements.

Radio, Checkbox and Select

Some specific options like radio, checkbox or select will have different defines. Here is a checkbox option:

"checkbox-example": {
    "start": "Required",
    "end": "Required",
    "type": "checkbox",
    "check": Optional. Actual value that will be used to replace in the theme code when user opt-in this checkbox,
    "uncheck": Optional. Actual value that will be used to replace in the theme code when user opt-in this checkbox
}

Radio option:

"radio-example": {
    "start": "Required",
    "end": "Required",
    "type": "radio",
    "choice": {
        "radio-1-value" : "Label of Radio 1",
        "radio-2-value" : "Label of Radio 2",
        "radio-3-value" : "Label of Radio 3"
    }
}

Select option:

"select-example": {
    "start": "Required",
    "end": "Required",
    "type": "select",
    "choice": {
        "option-1-value" : "Label for Option 1",
        "option-2-value" : "Label for Option 2",
        "option-3-value" : "Label for Option 3"
    }
}

Define theme menus

Example

If your theme has link list code like following:

<!--MAGONE-MAIN-MENU-LOCATION-START--><ul class="menu"><li class="menu-item-type-custom menu-item" data-class="" data-enable_mega="" data-icon="fa-facebook"><a data-href-default="https://magonedemo.blogspot.com/" data-text-default="Home" href="https://magonedemo.blogspot.com/">Home</a></li></ul><!--MAGONE-MAIN-MENU-LOCATION-END-->

And you want to allow users managing it via Sneeit Spot UI, you can define in your theme code like following:

SNEEIT-THEME-MENUS
"main_menu": {
    "title" : "Main Menu",
    "start": "<!--MAGONE-MAIN-MENU-LOCATION-START-->",
    "end": "<!--MAGONE-MAIN-MENU-LOCATION-END-->",
    "fields" : {
        "enable_mega": {
            "title": "Enable Mega",
            "desc": "Enable Mega Menu For This Menu Item",
            "type" : "checkbox",
            "default": "",
            "check": true,
            "uncheck": "",
            "allow_depth" : [0]
        },
        "icon": {
            "title": "Menu Icon",
            "desc": "Check code at <a href=\"https://fontawesome.com/v4.7.0/icons/\" target=\"_blank\">FontAwesome Icon Code</a>"
        }
    }
}
SNEEIT-THEME-MENUS

Update your template, access Sneeit Spot and choose Menu,  then you will like this

Define format

The main_menu will be the name of menu location. You can have unlimited number of locations. Each location will have the follow properties:

  • title: optional. If missing, the name will be used
  • start: the text for searching the start position of the menu code in theme code.
  • end: the text for searching the end position of the menu code in theme code.
  • fields: extra fields show to users when they are editing an menu item

Each field in fields property can be defined following the format of option defines, but they have no start and end texts. They can also have a special property which is called: allow_depth. This property is an array of the levels which allow this field. In the example, the field enable_mega will only show to users if they are editing a level 0 menu item.

Output Structures, Classes and Attributes

You may need to know the output HTML of the menu code, especially the class for each tag, so you can create styles for your theme easier. Here are some notes:

  • The output HTML of menu will usually like following
    <ul class="menu">
        <li class="menu-item-has-children menu-item-type-custom menu-item" data-class="" data-enable_mega="true" data-icon="">
            <a data-href-default="#" data-text-default="Demos" href="#">Demos</a>
            <ul class="sub-menu">
                <li class="menu-item-has-children menu-item-type-custom menu-item" data-class="">
                    <a data-href-default="#" data-text-default="Best Adapted " href="#">Best Adapted </a>
                    <ul class="sub-menu">
                        <li class="menu-item-type-post menu-item" data-class="menu-item-type-post"><a data-href-default="/2000/09/the-new-york-times.html" data-text-default="NYTimes" href="/2000/09/the-new-york-times.html">NYTimes</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
  • Top ul tag will always have only "menu" class. All sub ul tags will have "sub-menu" class.
  • All li tags will have "menu-item" class and the type classes depending on its style: "menu-item-type-custom", "menu-item-type-page", "menu-item-type-post", "menu-item-type-category"
  • If a li tag has ul tag inside, it will has the class "menu-item-has-children"
  • All fields value will be store in attributes of li tags under format: data-field_name="value". In the example, the field enable_mega will be appeared in li tag as data-enable_mega="true"

Define theme translate

Texts in XML

If you want to translate a text in your theme code you will need to wrap that text with a special span. For example, your theme code has a text like: Back Home and you want that user can translate that text via Sneeit Spot UI, you can wrap that text as following format:

<span data-l10n='Back Home'>Back Home</span>

The text in data-l10n is case sensitive, so you should make sure you call exactly text when using JavaScript.

Text in JavaScript

If you want to use a text in JavaScript, you can define a function in your JS code as following:

function trans(id) {
    var html = $('[data-l10n="' + id + '"]').html();
    if (typeof(html) == 'undefined' || html == '') {
        return id;
    }
    if (typeof(arguments) != 'undefined' && arguments.length > 1) {
        var vars = html.split('$$');
        html = '';
        for (var i = 0; i < vars.length; i++) { if (vars[i] && !isNaN(vars[i]) && typeof(arguments[Number(vars[i])]) != 'undefined') { html += arguments[Number(vars[i])]; } else { if (i > 0 && (!(vars[i] && !isNaN(vars[i - 1]) && typeof(arguments[Number(vars[i - 1])]) != 'undefined'))) {
                    html += '$$';
                }
                html += vars[i];
            }
        }
    }
    return html;
}

and then you can call the trans function each time you want to use a text. For example:

var back_home_text = trans('Back Home');