Skeleton FX Theme

[asemion]

My next theme - to your attention...
Skeleton-FX (Futured eXpandable) designed specifically for professional web designers.
Skeleton-FX - it is not just a simple theme, this PHP-HTML-CSS3 Framework with its own responsive grid system, animated multilevel drop-down menu and other necessary elements for the modern web design.
Theme Skeleton-FX packed with great features like:

1. Solid Core subsystem, which has three modules:
   • It's own responsive, mobile ready Grid system;
     
   • All needed Typography elements;
     
   • Multilanguage animated multilevel drop-down Menu + Breadcrumbs (from own internal functions).
     
2.   Advanced Features subsystem, which has five modules:
   • Output Objects including CSS Accordion, Tabs and Tables elements;
     
   • Image Tools including Image Gallery, Ken Burns and Parallax effects;
     
   • Full featured two types Sliders with images, texts and navigation animations;
     
   • Extended Elements suit which contain Alerts, Modal windows, Animated Blocks, ToolTips and cool Text Animation effects;
     
   • Advanced Form Controls elements including CSS Buttons, Text Input Objects, Badges, Pagination, Progress Bars, Check & Radios and Animated Buttons.
     
3. Full featured Search engine and Contact pages.
   
4. All objects provided with detailed description and Source Code for easiest deploy, just copy needed element Source Code, paste it to your page and replace texts and images to your own.
   

Using this theme possibilities can be straightforward to create different levels of sites, from simple few pages sites to modern, full-featured portals.
These theme the main feature is that it completely does not use Javascript or jQuery. All elements presented on the Live Demo site (see link below) realized by using pure PHP-HTML-CSS capabilities. Therefore, sites realized on the basis of this theme will be lightweight and fast. Because the theme uses only one external source - minimized CSS file (style.css).
Themes expansion options and its appearance can be changed on the settings page. They are built using LESS system. You can at any time simple turn on the required or turn off redundant opportunity. And then generate a new style sheets CSS file (minimized or not). All themes structure elements appearance can be changed using the LESS variables, which are defined in the main file (variables.less). All elements LESS files can be also edited on the settings page in the special LESS graphic Editor.
More detailed description and downloadable source can be find on my site (see it LIVE):
http://pigios-svetaines.eu/projects/skeleton-fx/

Important! To have access to the theme administration page and for correct functioning of all it's elements you need to install my modified plugin "Theme Settings MOD" (which is already included in the theme installer).

If plugin "Theme Settings MOD" not installed or activated - theme will work without them with default settings.
It looks like this:

[hhj]

Couldn't find the Theme Settings MOD plugin. It seems not to be part of the installer.
May I know where to get it from?

[asemion]

Couldn't find the Theme Settings MOD plugin. It seems not to be part of the installer.
May I know where to get it from?

How is it not to be part of the installer? Are you really that sure?
I can guarantee you that in the both installation archives (from GS Extend and from my site) "Theme Settings MOD" plugin is included.
Just open your downloaded installer and look inside them...
You should see 2 folders and one file (install.txt).
Inside folder "plugins" is your searched plugin.
Read install.txt file there is a second point about the plugin installation:
"unzip the archive plugins directory content to the site folder plugin".
I do not know how else more intelligible to write.
So just copy folder "theme_settings" and file theme_settings.php to your site plugins directory.
And everything will be as needed.

[hhj]

Well, I am not sure what I did wrong then. I installed it as required but can't get the Configure Theme working for Skeleton-Fx. The plugin is enabled. It shows its version 0.4a.
On the contrary Configure Theme works for GS Evolve theme.

[asemion]

Well, I am not sure what I did wrong then. I installed it as required but can't get the Configure Theme working for Skeleton-Fx. The plugin is enabled. It shows its version 0.4a.
On the contrary Configure Theme works for GS Evolve theme.

Sorry, it's my fault.
Left one mistake from my continuous installation (when it was on the localhost).
Now I have corrected the error and update installation archive. So everything should be OK.
Please re-download archive file and update Theme Settings plugin on your site.
Thank you for your help in finding this mistake.
Have a nice day. Andrejus.

[hhj]

Now it works. Thank you very much.

[asemion]

Version changed to 0.1.1
1. Add Multi-language support. Just install "i18n_base" plugin and create Multi-language pages. For menu items and breadcrumbs outputs, Theme use own internal functions. So "i18n_navigation" plugin install not needed.
    1.1 Theme comes with 3 prepared translation files: English, Russian and Lithuanian.
2. Improved internal Search engine:
    2.1 Improved Search page provided information: On top displayed searched keywords; Removed short-codes and illegal characters; Improved text Excerpt mechanism.
    2.2 To the upper right Search field add submit button for mobile users convenience.
3. In the Theme settings page insert a new management area "Search settings" which has 5 fields:
    2.1 "Always use internal Search function" - if checked will be used Internal Search function, even if on site is installed "i18n_search" plugin.
    2.2 "Search the keywords in the 'Meta' fields" (if checked search try to find also in the "Tags & Keywords" and "Meta Description" fields).
    2.3 "Open the found page in a new tab" (if checked found link will be opened in the new Tab).
    2.4 "Search keywords condition (logical AND)" - if checked search try to find whole row of keywords, if unchecked search try to find each keyword separately.
    2.5 "Search Page excerpt size (in symbols)" - you can change Excerpt value, if empty used default value 200 characters.
4. In the installation archive "plugins" folder was added modified "i18n_lang_menu" plugin which is specially adapted for this theme.

[0zz]

Hi! I like your mulitlanguage support. Could you please explain, how can I do this to my own template? I would like to create language packs for my website like you did, it is more convinient than many components.

I guess it has to do with function.php but I can't figure out how to take and apply those functions to my template to make it use language variables..

Thank you!

[asemion]

Hi! I like your mulitlanguage support. Could you please explain, how can I do this to my own template? I would like to create language packs for my website like you did, it is more convinient than many components.

I guess it has to do with function.php but I can't figure out how to take and apply those functions to my template to make it use language variables..

Thank you!

Hello, Ozz.
Yes, all you need placed in the functions.php file. You can copy all the code from Skeleton-FX functions.php to yours functions file.
In the Skeleton-FX theme multilanguage menus, breadcrumbs and Search engine functions call placed in the header.inc.php file. You can open this file and see how it's realized.
For the menu items population used function - get_navigation_items(). You can see this function using modes and avalaible parameters here:
http://pigios-svetaines.eu/projects/skeleton-fx/core/navigation-menu/
For the breadcrumbs items population use function - print_breadcrumbs(return_page_slug());
You can place this function call where you want.
For Search engine activation using HTML block in the header.inc.php on line 44. So you can copy this block to you theme header.inc.php file.
Pages content multilanguage realized by i18n_base plugin. So for multilanguage content populating you must install this plugin and create multilanguage Pages structure.
Good luck. Andrejus.

[0zz]

Thank you for your reply!

As I said I only want language variables for template, like you did that.

So I have copied and pasted the following your code to my functions.php 

PHP Code:

<?php

/***  Function to get variables from Lang array  ***/
function get_lang_param($name="") {
    if(empty($name)) return false;
    if(isset($_COOKIE['current_lang'])) $def_lang = $_COOKIE['current_lang'];
    if(!isset($def_lang)) {
        global $language;
        if(isset($language) && !empty($language)) $def_lang=$language;
        else {
            $LANG = getDefaultLanguage();
            if(isset($LANG) && !empty($LANG) && substr($LANG,0,2)!="en") $def_lang = getDefaultLanguage();
            else $def_lang="en_US";
        }
        if($def_lang == "en") $def_lang = "en_US";
        if(strlen($def_lang)<3) $def_lang = $def_lang.'_'.strtoupper($def_lang);
    }
    if (file_exists(str_replace('\\','/',dirname(__FILE__)).'/lang/'.$def_lang.'.php')) {
        require(str_replace('\\','/',dirname(__FILE__)).'/lang/'.$def_lang.'.php');
    }
    if(isset($set_lang[$name]) && !empty($set_lang[$name])) $lang_param = $set_lang[$name];
    else $lang_param = "Search";
    return $lang_param;
}


/***  i18n Set Language function  ***/
function getDefaultLanguage() {
    if (isset($_SERVER["HTTP_ACCEPT_LANGUAGE"]))
    return parseDefaultLanguage($_SERVER["HTTP_ACCEPT_LANGUAGE"]);
    else return parseDefaultLanguage(NULL);
}
function parseDefaultLanguage($http_accept, $deflang = "en") {
    if(function_exists('return_theme_setting') && return_theme_setting('site_deflang') && strlen(return_theme_setting('site_deflang')) > 1) {
        $deflang = return_theme_setting('site_deflang');
    }
    elseif(isset($http_accept) && strlen($http_accept) > 1)  {
        # Split possible languages into array
        $x = explode(",",$http_accept);
        foreach ($x as $val) {
            #check for q-value and create associative array. No q-value means 1 by rule
            if(preg_match("/(.*);q=([0-1]{0,1}.\d{0,4})/i",$val,$matches))
            $lang[$matches[1]] = (float)$matches[2];
            else
            $lang[$val] = 1.0;
        }
        #return default language (highest q-value)
        $qval = 0.0;
        foreach ($lang as $key => $value) {
            if ($value > $qval) {
                $qval = (float)$value;
                $deflang = $key;
            }
        }
    }
    return $deflang;
}
function check_language($long = true) {
    global $language;
    global $set_lang;
    if(isset($_GET['setlang'])) {
        $langas = $_GET['setlang'];
        if(strlen($langas) == 2) {
            if($langas == "en") $langas = $langas."_US";
            else $langas = $langas."_".strtoupper($langas);
        }
        if (isset($_COOKIE['current_lang'])) {
            setcookie("current_lang", $langas, time()-100 , '/');
            $_COOKIE['current_lang']=$langas;
        }
        setcookie("current_lang", $langas, time()+3600 , '/');
    }
    if(isset($_COOKIE['current_lang'])) $langas = $_COOKIE['current_lang'];
    elseif(!isset($langas) || empty($langas) || strlen($langas)<2) {
        if(isset($language)) {
            if($long) $langas = $language."_".strtoupper($language);
            else $langas = $language;
        }
        else $langas = getDefaultLanguage();
    }
    if(!isset($langas) || empty($langas) || strlen($langas)<2) {
        if($long) $langas = "en_US";
        else $langas = "en";
    }
    if(strpos($langas, "-") !== false) $langas = str_replace("-", "_", $langas);
    if (file_exists(str_replace('\\','/',dirname(__FILE__)).'/lang/'.$langas.'.php')) {
        include(str_replace('\\','/',dirname(__FILE__)).'/lang/'.$langas.'.php');
    }
    else {
        include(str_replace('\\','/',dirname(__FILE__)).'/lang/en_US.php');
    }
}
?>

Now I have two files: en_US.php and ru_RU.php in my lang folder in the theme directory.

And I do have i18n and other plugins installed and two languages so far..

Now in my template.php I suppose I must use something like:

PHP Code:

<?php echo $set_lang['FX_MYTEXT']; ?>

and get relevant translations from those two lang files.

But I don't get any output for some reason. What could you suggest?

[asemion]

Function get_lang_param(string $name) used to get needed variable value from language array described in the your language file, in example:
in the language file is named some variable, like this
<?php
$set_lang = array ( 'FX_SEARCH_FOUND'=>'The following pages have been found', ); ?>
so in order to get it value in different languages we can use this function call with needed string as parameter:
<?php echo get_lang_param('FX_SEARCH_FOUND'); ?>
The function will print line "The following pages have been found" if active language is EN, or "Следующие страницы были найдены" if active language is RU and so on.

To get active language code and multilanguage mechanizm organizing Skeleton-FX use main function check_language(). Just add this function call to the top of your header.inc.php, like that:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }?>
<?php check_language(); ?>
That would be enough.
In the your functions.php you must to add this main function PHP realization code and also 2 of her subsidiary functions - getDefaultLanguage() and parseDefaultLanguage().
I believed that I helped you. Andrejus.

[0zz]

Yes, thank you so much, Andrejus!!!

[Arugula]

Hi! I really like the ideas in 'Skeleton FX'. It has the BEST approach of all dropdown multilevel responsive menus! And NO JS!! Great!! And you use 'LESS'!
But.... Big Bug... The mobile menu does NOT seem to work! (click the icon and it just moves to other side. Does not show anything. ]
Even when I deactivated all the i18n plugins from Mylcek that I had there, the same problem persisted.
I then added and activated your 'i18n_Lang_menu plugin. It caused all the content from all my pages to dissapear! (only the menu showed, no content. And in mobile view, not even the menu, just all blank. ) (and similar bug in 'evolve' )
This testing was done on Localhost [xammp] in both Firefox and Chrome browser. (I simply make the screen window very narrow to test the 'mobile' version. This is how I test all new themes. But yours are the only responsive menus that failed this test.
However, I REALLY like the ideas you wrote about. So if I can get it to work, I'd love to use it a lot!!
Thank you in advance for any fix ideas or suggestions you have.

[asemion]

Hi!  I really like the ideas in 'Skeleton FX'.  It has the BEST approach of all dropdown multilevel responsive menus!  And NO JS!! Great!!   And you use 'LESS'!
But.... Big Bug...   The mobile menu does NOT seem to work!  (click the icon and it just moves to other side.  Does not show anything. ]
Even when I deactivated all the i18n plugins from Mylcek that I had there, the same problem persisted.
I then added and activated your 'i18n_Lang_menu plugin.  It caused all the content from all my pages to dissapear!   (only the menu showed, no content.  And in mobile view, not even the menu, just all blank. ) (and similar bug in 'evolve' )
This testing was done on Localhost [xammp] in both Firefox and Chrome browser.  (I simply make the screen window very narrow to test the 'mobile' version.  This is how I test all new themes.   But yours are the only responsive menus that failed this test.    
However, I REALLY like the ideas you wrote about.  So if I can get it to work, I'd love to use it a lot!!  
Thank you in advance for any fix ideas or suggestions you have.

Hi, Arugula.
Thank you for using my themes.
And Skeleton FX my favorite theme which I use mostly.
So this theme used in many of my latest sites. And I think without problems. At least I have not seen them yet.
Will you try my site with Skeleton FX enabled? You can achieve it here:
http://pigios-svetaines.eu/projects/skeleton-fx/
Are you find problems descibed by you on this site?
If not then the problems probably is on your site or installation.
All of my realized themes I'll try also on localhost (XAMPP for Windows) with Chrome, Firefox and IE11 (including Skeleton).
If you get blank Front End page usually this means that fired some PHP error. You can see this error message if enable plugin "Debug".
When you get this error message please post it. Then I can help you.
Happy New Year. Andrejus.

[Arugula]

Hi, thanks for the response! Theme on Your site works fine. But the theme's menu on my localhost doesn't. when I reduce the browser width, all the content perfectly adjusts to the new width. But when to click the 'hamburger' menu icon, it jumps to the right, but NO menu appears on the left.
It's an older xampp (XAMPP-USB-LITE 1.7.7 Using PHP: v5.3.8 ). Could that be the problem?
(my actual online server is new, and uses php 7.1 )
PS: (I'll be at work all weekend, so may not get back to you till later)

[asemion]

Hi, thanks for the response!   Theme on Your site works fine.   But the theme's menu on my localhost doesn't.    when I reduce the browser width, all the content perfectly adjusts to the new width.  But when to click the 'hamburger' menu icon, it jumps to the right, but NO menu appears on the left.  
It's an older xampp (XAMPP-USB-LITE   1.7.7  Using PHP: v5.3.8 ).   Could that be the problem?  
(my actual online server is new, and uses php  7.1 )
PS: (I'll be at work all weekend, so may not get back to you till later)

Hi.
I use the same XAMPP version - USB-Lite 1.7.7.
On my XAMPP installation I do not have this problem. Everything works OK.
So for help you I need some additional information about your project.
It will be perfect it you can send me all your project files (zipped) to the my e-mail.
Also provide to me info about used GS version and installed plugins.
Andrejus.

[Arugula]

Hi, I'm back. I'm going to try it on a new GS install, (on same localhost). I'll send you the results or the files later today or tomorrow. thanks.

[Arugula]

(I have sent a zip of site to your email listed on your sites contact page.)
Well, on the same XAMPP I set up a new install of GS, the current Version 3.3.13.
But I found many more problems!!
I Created a few 'lorum ipsum' pages for the menu.
With the skeleton theme, NOTHING showed on the pages (not even the site name)! (text showed only if I switched back to innovation theme).
I then added the 2 plugins you included. (but I thought they weren't required??!)
With the plugins activated, the sitename and menu now show. but all the pages text is missing!!
And when I make the window narrow, to mimic a mobile phone, everything disappears, — only a blank page.
With further testing, I discovered that if I DEactivate the 'i18n language menu (but leave theme settings activated), then it worked best (all showed ok on the desktop screen). But the problem with narrow window moible remains as on my original localhost site. Clicking the mobile icon causes it to jump to far side of screen, but NO MENU ever appears!
PS:
Is the 'theme Settings MOD' you refer to the same one as Mylcek's 'theme settings', which I already have on my localhost?
—-

[Arugula]

Hi, I'm back!  I received your email with the code to patch, and the fix worked perfectly.  
I enlose your email code here, so that others can use it.  
It seems the theme itself should be updated to include the fix.    (Remember the bug appeared on a clean new, basic, install of current version of getsimple, so it will effect most users.   If the bug is not appearing on your own site, then some plugin or tweak there must be resposnible. )

The fix  involes simply commented out on line,     /*position: fixed;*/
In the  class "offcanvas-bar" (on line 968) of main.less, then recompiling the style.css
Here then, is from your quoted email:

"Main problem with mobile Nav menu - is one CSS property:
position: fixed;
which is mixed with another property:
transform: translateX(0px);
I don't know for now why it not work on your site while on all my sites it works fine on 3 main browsers type.
So for quick responce you can just remark this property.
For this go to the theme admin page and in the area " LESS File Management" choose "main.less" file and push Edit button.
Find class with name "offcanvas-bar" (on line 968) and remark problematic property. So your block should look like this:
.offcanvas-bar {
   display: inline-block;
   /*position: fixed;*/
   top: 0;
   bottom: 0;
   left: -100%;
   z-index: 1001;
   width: 270px;
   max-width: 100%;
   background: @offcanv-bgr;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   -webkit-animation: slide-right 0.5s forwards;
   animation: slide-right 0.5s forwards;
}
Save changes and recreate CSS file in the block "Settings style.css".

"

[Arugula]

PS: I like this theme, for its functionality. Thanks. I gave it a 5star rating. I'm going to study the code, and will likely have some questions in the future.

[Arugula]

PS:  There is a minor bug with the directional arrows in the mobile menu: they are backwards.
In the desktop site the arrows work correctly.
But in mobile, they are backwards from internet standards, and will confuse the user.   The arrow icon in the dropdown menu should point to the right, to suggest 'MORE', (as in, click here for 'More' subpages, to 'expand' the view.   Similar to the '+' sign in file managers tree-maps.).  Instead, the current arrow point to the left, or backwards, as if to 'collapse' or hide it.  
Clicking the arrow will correctly expand it, but now the arrow changes to a 'down' arrow.    But at this point, to indicate how the user can collapse the view, the arrow should be pointing to the left, or 'up', to retract/hide the subpages below it.
I see that line 246 in   fa_icons.less  has:  fa-chevron-left:before
Is that what handles these arrows?   Or is it one of the images?
Thanks again for all your input and work.

[asemion]

Hello, Arugula.
Thank you for your comments and wishes and for helping you improve this theme.
Soon I will try to realize all the described options and release a new Skeleton-FX version.
Andrejus.

[asemion]

Version changed to 0.1.2
1. Fix mobile menu showing problem if "Extend CSS" module is not turned on. Change mobile drop-down menu icons to arrow-to-bottom (for Expand) and arrow-to-top (for Collapse).
2. To the Context menu Top level labels add tool-tips (Expand / Collapse). This words can be translated to other languages.
3. To the plugin "i18n_lang_menu" (included to the theme installation) add check for "i18n" plugin is installed and turned on.

To Arugula:
About Context menu signs "+" for expand and "-" for collapse I disagree with you. This signs certify as standard icons for expand / collapse. So I would not change them. But I add tool-tips to it for making it even clearer for users.

[Arugula]

Hello, thanks for the update. I was not referring to what you call the 'context menu' symbols. They already are perfect, and yes, they are already the correct standard symbols, of course. I was referring only to the MOBILE version of the dropdown menu, where the arrows were backward.
The addition of tool-tips (Expand / Collapse) sounds fantastic! I will try this. Thanks so much.

[Arugula]

To elaborate further: my earlier comment meant to suggest that the use of the '+' sign for 'expand' is a CORRECT way to do so. The problem was only in the MOBILE menu's arrows, which you have fixed now. Thanks.

( Also, for your use and info: in English, on Windows Computer systems, 'Context Menu' means the menu that pops up whenever you right-click on something. It's part of MS Windows and the browser, and no website can effect it. The sidebar nav menu in your theme is just called a 'sidebar menu'. Calling it a 'context menu' was a bit confusing when I read your site's tutorials.)