Developr - Fully Responsive Admin Skin

Hi,

Some browsers do not allow Xhr (AJAX) requests when viewing local files: check the url in your browser, if it starts by file: this may be the issue. Just put your files on your local webserver (or on any server), and everything should work fine.

You can also check the browser’s console to see if some errors are showing: they may give a hint on what’s going wrong.

Tell me if you still can’t have it to work!

Hi!

All you need for a blank start page is the default markup (see the documentation, in Template basics / How the template works / Basic markup explained), style.css, the 4 responsive stylesheets and setup.js. All other assets are optional, you should load them only when required – for instance, developr.navigable.js if you want to use the sliding menu.

You can also remove all scripts at the end of the default index.html, you won’t need them if you start over.

Tell me if you need more details!

I mostly want to change header-navigation and sidebar’s style and orientation. The default blank page still contains that header and those things.

Should I start completely from scratch ??

You should rather remove only the elements you don’t need, then rebuild them the way you want – but it’s up to you

Hi,

Sorry but I need some more details, I am not sure to understand what you want to achieve. can you tell me more?

Hi dashboard in all pages aligned to left i want it at top like menu how can i change ,

Sorry, but the template does not provide a top menu, it is either right or left…

Hi!

Do you use the class fixed-title-bar on the body element? If so, this may be the issue: this class adds an extra margin on top of content, and the title-bar use position:fixed to float into that space.

If this does not help, can you show me the code you use? Or if you have an online demo I may check

Hi!

You may just try to set the option scrolling to false, it should disable the scrollbar.

Tell me if this does not help, we’ll look for another solution

This means the plugin script and your setup code are located above the jQuery lib itself. You need to load jQuery first, then the plugin: just move your script below the script tag which loads jQuery, and everything should work fine then

Ok, I moved the scripts. The problem has been that the center is loading through an include but the jquery is loaded in the index file further down. Maybe move the jquery load higher up in 1.5?

I appreciate your patience!

Glad I could help!

Hi!

Thanks for reporting The bug is now fixed. I used a slightly different fix, but the principle is the same:

if (typeof value !== 'number')
{
    value = parseFloat(value);
    if (isNaN(value))
    {
        value = def;
    }
}

Cheers!

Hi,

Hard to tell what’s wrong without testing the actual code… I can’t think of anything in the template that could cause this right now.

Can you setup a test page where I could check this?

Well, it seems to me I already seen this issue: it happens because the font icons are loaded after the document.ready event, hence their width is incorrect when the form position is calculated.

Adding this custom style to the head section should help:

<style>
    .inputs [class^="icon-"]:before,
    .inputs [class*=" icon-"]:before {
        width: 12px !important;
    }
</style>

Tell me if you still have the issue!

haha, thats really great !!

now all the boxes’ position are correct, thank you.

a last little question, is there any styled captcha layout ?

im using Google reCAPTCHA in the login box, and find that it will break the box.

thanks in advance

The login box is not fluid, you just need to make is slightly larger: in login.css, change the width in #container and the margin-left in .js-login #container.

It should look fine then!

Hi,

There is no “built-in” way to do this, but you can take advantage of some internal plugin events to hook a function which will build the meter bars.

Here’s what I would do: set a data-* attribute on each of the select’s options with the value/type/color of the bars:

<select class="select">
    <option value="1" data-bars-value="1">One bar</option>
    <option value="2" data-bars-value="4">Four bars</option>
    <option value="3" data-bars-value="3">Three bars</option>
    <option value="4" data-bars-value="3">Three bars</option>
</select>

And add a small function to build the bars according to the data:

$(document).ready(function()
{
    function addMeterBars()
    {
        var select = $(this).closest('.select');
        select.children('.drop-down').children().each(function()
        {
            var line = $(this),
                barsValue = $(line.data('select-value')).data('bars-value'),
                markup = [], i;

            // Add your custom code to build the bars here - here's an example:
            for (i=0; i<barsValue; ++i)
            {
                markup.push('<span class="meter orange-gradient" />');
            }
            line.prepend('<span class="float-right">'+
                markup.join(' ')+
            '</span>');
        });
    }
    $('.select').one('select-prepare-open', addMeterBars);
    $('.select select').on('update-select-list', addMeterBars);
});

A bit complex, but it works and it is quite flexible. Hope this helps!

Me neither, in fact, in the “messages.html” page is the same, i opened it in the 2 enviroments in the same browser (Chrome 23), and the same results, even in firefox is the same, any ideas?

Ok, ok, i uploaded the developr package to another folder in my server, everything works fine, now i must figure out why doesnt work in the other folder. thanks a lot!

my bad, time ago y moved “animations” category to another css, cause those statements have a conflict with stylizer, i didnt remember, until now, haha, thanks!

Hi,

You will find complete instructions in the documentation, in Features reference / Menus.

Hi, and thanks!

About your first issue, it is the first time I hear of that, it may be related to the changes you made. If you have an online demo, I can try to find what causes this. Note that you can debug this in your desktop browser (with the help of the developer tools panel) simply by replacing the class no-touch by touch on the HTML element. Just run this code in the console to do it:

$('html').toggleClass('touch no-touch');

About the second issue, I have no idea what may cause this. Which version of iOS is on your iPad? If it is below 5, this may be the issue: older versions of iOS had no support for position:fixed, and while the template provides a polyfill for this, it is not as efficient as native support, and may also have be affected by your changes.

Tell me if you have more details, I will do my best to help

Thanks for the tip The second issue is definitely related to an old iOS and have solved this by bring your floating side panel into play earlier (e.g. at a greater page width for the media query). First issue still remains and is probably caused by setting the width of those elements – will try your degugging tests – thanks.

Hi,

Sure, you can use it with any kind of programming language. It is only raw HTML/CSS, there is no server-side requirements.

Tell me if you need more details!