Hi jlar187,

Yes we have detected this, we are going to release new fix for this.

Thanks for letting us know.

Arlind

Hi vox2day

Firstly sorry for the delay of answer as we were not in the office during the weekend.

1. It includes the LESS files, see the screenshot of files structure: http://cl.ly/Vk70

2. RTL is supported in Frontend too, see the demo:

3. Since it is less compiled, you can increase the fontsize globally by changing values in assets/less/bs-less/variables.less and assets/less/neon-less/variables.less

There could be any static font size that is set but mostly there are referenced via font size variables inside these files.

Thanks

Arlind

Hi bobwoehrie

Firstly thank you for your kind words and purchasing Neon theme.

We are currently busy working on other projects which actually have a deadline and we are not able to take any custom work for now, I am sorry.

As you know, Neon is HTML based theme, so you can optimize to fit to your current framework engine as you want. The structure is easy to call, and to extend the design just add your custom CSS to assets/css/custom.css or another file you may include via <link> tag.

Thanks

Arlind

Hi swamyveera,

Here is how you can achieve this: http://cl.ly/VgkJ

1. Copy this HTML

<style>
    .top-dropdown-form .form-group {
        padding: 10px;
        border-bottom: 1px solid #EEE;
        margin-bottom: 0;
    }
</style>
<form class="top-dropdown-form">

    <div class="form-group">
        <input type="text" class="form-control" placeholder="Search anything..." />
    </div>

</form>

2. Paste it right before ”.dropdown-menu-list” of the dropdown menu container see how it looks: http://cl.ly/VhF1

Hopefully this will help you.

Arlind

You may try using this jQuery plugin which makes two divs at the same height:

To center content inside a div you can use jQuery UI Position plugin: http://jqueryui.com/position/

Here is an example:

$( "#position-element" ).position({
  my: "center",
  at: "center",
  of: "#targetElement" 
});

Hi jlar187

Please include this javascript file in order to have this issue solved:

assets/js/gsap/TweenMax.min.js

The object Sine is part of GreenSock API that creates custom animation easing.

Hopefully this will help you.

Arlind

That works. Thanks for the quick reply.

Great .

Hi swamyveera

Yes it is possible, simply add events to tab titles and when they are clicked you can load it.

Here is an example:

<script type="text/javascript">
    jQuery(window).load(function()
    {
        var $ = jQuery;

        $("#panel-1").on('click', '.nav-tabs a', function(ev)
        {
            ev.preventDefault();

            var $this = $(this);

            if($this.data('load') && $this.hasClass('loaded') == false)
            {
                $.get($this.data('load'), function(response)
                {
                    $("#panel-1").find($this.attr('href')).html( response );
                    $this.addClass('loaded');
                });
            }
        });
    });
</script>

<div class="panel minimal minimal-gray" id="panel-1">

    <div class="panel-heading">
        <div class="panel-title"><h4>Minimal Panel</h4></div>
        <div class="panel-options">

            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-1" data-toggle="tab">First Tab</a></li>
                <li><a href="#tab-2" data-load="http://neon.dev/data/ajax-content.txt" data-toggle="tab">Second Tab</a></li>
            </ul>
        </div>
    </div>

    <div class="panel-body">

        <div class="tab-content">
            <div class="tab-pane active" id="tab-1">
                <strong>Rank tall boy man them over post now</strong>

                <p>Boy desirous families prepared gay reserved add ecstatic say. Replied joy age visitor nothing cottage. Mrs door paid led loud sure easy read. Hastily at perhaps as neither or ye fertile tedious visitor. Use fine bed none call busy dull when. Quiet ought match my right by table means. Principles up do in me favourable affronting. Twenty mother denied effect we to do on.</p>

                <p>Sing long her way size. Waited end mutual missed myself the little sister one. So in pointed or chicken cheered neither spirits invited. Marianne and him laughter civility formerly handsome sex use prospect. Hence we doors is given rapid scale above am. Difficult ye mr delivered behaviour by an. If their woman could do wound on. You folly taste hoped their above are and but.</p>
            </div>

            <div class="tab-pane" id="tab-2">
                Loading...
            </div>
        </div>

    </div>

</div>

Arlind

Here is the code added to PasteBin: http://pastebin.com/gWQM8gHp

Hi dijichi,

The default configuration for DataTable is this:

jQuery.extend( true, jQuery.fn.dataTable.defaults, {
    "sDom": "<'row'<'col-xs-6 col-left'l><'col-xs-6 col-right'f>r>t<'row'<'col-xs-6 col-left'i><'col-xs-6 col-right'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
        "sLengthMenu": "_MENU_ records per page" 
    }
} );

Which can be found on this file: assets/js/dataTables.bootstrap.js

To modify the toolbars (header and footer) edit this field:

"sDom": "<'row'<'col-xs-6 col-left'l><'col-xs-6 col-right'f>r>t<'row'<'col-xs-6 col-left'i><'col-xs-6 col-right'p>>" 

So when you initialize it just do this basic call: http://pastebin.com/X7wgJenE

It will generate the exact table as shown here: http://cl.ly/VfSV

Hopefully this will help you somehow.

Arlind

This pointed me in the right direction, thanks!

You are welcome buddy

Hi themeyard, the single license can be used only for personal purpose and not for re-selling, for commercial use you need to purchase the extended license.

Art

Hi Mautone,

Thanks for your compliments we are happy to hear them!

About the CSS inconsistencies we use LESS generator to compile the CSS so during the LESS validation I get no errors, its the engine of LESS that generates CSS, so is it possible to know the exact line where the error is thrown?

Thanks again!

Arlind

selector { *background: #ccc; }

This is because of some older browser hacks used in our CSS, anyway I have used RegExp to replace the :

*background... -> background...

Here you can download this file:

This is not a big issue, browser CSS parse simply ignores invalid CSS properties.

Hopefully this will help you.

Arlind

Thanks Arline, can you help me isolate the code that controls the sidebar in addition to the files? So far I have extracted what you see here

and it allows the submenus in the sidebar to open but not close. Also when you resize your screen from desktop to mobile or visa versa the text disappears as shown here

Can you help me find the code which allows you to close submenus and keep text visible as you resize your window?

Thanks!

Also, when there are two dropdowns in the sidebar they dont open, it only works when there is only one subnav list in the sidebar

Hi mbax,

I suggest you to keep all the contents of neon-api.js so it wouldn’t cause any issues.

I have edited the neon-custom.js and this would be the minimal version: http://cl.ly/Vd52 other files do not need to change.

Hopefully this will help you.

Arlind

Hi geekybeaver,

Thanks for your suggest, I have added this fix which will be available in the next update.

Arlind

Hi StaticNomad,

To increase the general height of Header sidebar you must play with padding values, for example the current padding for Logo element is 20px top, 20px bottom so if you are going to increase the padding of header here is the sample CSS code:

.page-container.horizontal-menu header.navbar .navbar-brand,
.page-container.horizontal-menu header.navbar .navbar-nav>li>a,
.page-container.horizontal-menu header.navbar .navbar-inner>ul>li#search .search-input, 
.page-container.horizontal-menu header.navbar>ul>li#search .search-input,
.page-container.horizontal-menu header.navbar .navbar-inner>ul>li#search button, 
.page-container.horizontal-menu header.navbar>ul>li#search button,
.page-container.horizontal-menu header.navbar ul.nav>li>a, 
.page-container.horizontal-menu header.navbar ul.nav>li>span,
.page-container.horizontal-menu header.navbar ul.nav>li.sep {
    padding-top: 30px;
    padding-bottom: 30px;
}

.page-container.horizontal-menu header.navbar ul.nav>li.dropdown>a {
    margin-top: 30px;
}

It will increase the header height to look like this (with the given parameters):

Arlind

If you want to change the color for the Off state you can do this simple:

.has-switch span.switch-info.switch-right {
background-color: #FFF;
color: #000;
}

Is this what you wanted?

Arlind

I’ll try it tonight. But I think that might be it.

I hope so it will

The reason why it breaks because the divs are floating.

The only way is to make these div containers display: table-cell and the text will not hide, but whenever the text exceeds the limit of container, it may break the structure of the grid and overflows.

Do you prefer using ”...” ellipsis when the text is too long?

Arlind

Yes, i use ellipses, but in dropdown i have to show full text. When the text increases, the text should continue in next line with proper line height.

In this case: http://cl.ly/Vbsa when user opens the dropdown menu text will be visible, otherwise in the default selection I think its not a big problem if you overflow the text with ellipsis, just a though.

Dont have an idea for other solution regarding this plugin!

Arlind

Hi swamyveera,

Modals must not be wrapped with main-page container, so add them right before the ends, otherwise modals will not work properly.

Arlind

Yes i figured that out Arlind. But in my case, its a complex web application and modules are loaded dynamically into the main-content. It is not feasible to add all x number of modals into the bottom. Any solution to this?

I suggest you then to use a JavaScript code to move the modals out of the main container, you can do this easily with jQuery for example:

jQuery(document).ready(function()
{
    jQuery("body").append( jQuery(".page-container .all-of-your-modals") );
});

Hopefully this will work for you.

Arlind

Hi cjanuzi,

Now I have clear what is the problem, try this fix:

.datepicker.datepicker-dropdown {
    z-index: 10000 !important;
}

It worked for me!

Sorry for the delay of the answer.

Arlind

Hi Arlind.

I’ve changed the z-index for .datepicker-dropdown and it worked. But when I put it inside a long modal, the datepicker does not “scroll” together.

I’ve attached a image again to illustrate what is happening:

Thanks again and sorry for the incovenience.

The problem is that “fixed” position must be removed from body I guess in order to make that dropdown sticked to the field.

Set

.modal {
  position: absolute !important;
}

And see it it works.

Arlind

Hi Neoos,

Thanks for your words!

There is a way to add buttons inside panels tabs titles, this is the markup:

<div class="panel-heading">
    <div class="panel-title"><h4>Minimal Panel</h4></div>
    <div class="panel-options">

        <ul class="nav nav-tabs">
            <li><a href="#profile-2" data-toggle="tab"><span class="btn btn-primary">Second Tab</span></a></li>
            <li><a href="#profile-2" data-toggle="tab"><span class="btn btn-info">Second Tab</span></a></li>
            <li><a href="#profile-2" data-toggle="tab"><span class="btn btn-danger">Second Tab</span></a></li>
        </ul>
    </div>
</div>

And the result will be like: http://cl.ly/VUyf

Hopefully this will help you somehow.

Arlind

Hi fluentd,

The new update for Neon will take some time as we are currently working on some new theme so when they are finished we will release new Neon update, I guess it will take 30 or 40 days. I am sorry for this.

Arlind

Hi bobgager, the fixed footer will be added in the next update as many users have asked for this feature.

Art