2,800,493
Total Marketplace Items3,708,017
COPYRIGHT © 2013 ENVATO| TERMS OF USAGE| SUPPORT/HELP| ICONS BY TANGO + WEFUNCTION + FAMFAMFAM
Adobe®, Flash®, Flex®, Fireworks®, Photoshop®, Illustrator®, InDesign® and After Effects® are registered trademarks of Adobe Systems Incorporated.
The wizard section is displayed in full page width, we want the wizard to be in center (width wise), some thing like attached screen. Not sure what is going wrong with the demo page which is forcing the wizard to appear in full width.
https://dl.dropbox.com/u/14985576/Issue%20copy%202.PNGHi,
You just need to add the class full-page-wizard to the body element, as in the example file
Your wizard block will be centered then.
Greets!
I’m having an issue where the icons are really large in IE9. If I specify an icon size class, they’re even larger. Any idea what may be causing it?
Hi,
Well, hard to tell what causes this without seeing the actual page… IE has a weird handling of em-sized pseudo-elements – it changes from one version to another – so I had to include hacks to fix it. Did you make sure none of them were removed in style.css?
Also, make sure your document has a valid HTML5 doctype at the beginning of the file (there should be absolutely nothing before):
Tell me if you still make them right!
No luck.
I haven’t done anything with style.css, and the doctype is the first thing in the file. Here’s a link where you can see the issue in IE9 (the icons on the left are too large):
http://dev1.dev.subrigo.net/Thanks!
Bart
Well, these font-icons size issues with IE have been driving me mad… They seems to occur for no reason. You may try to download the update I made to include the new Entypo Icon set (it has now 238 icons), as it includes some improved IE hacks and seems to work fine here with every version I tested.
Just overwrite the existing files with the ones in the zip, and clear your browser’s cache.
Tell me if this solve your issue, and if not, I’ll be looking for another solution
Hello display. In constellation theme you made a class for inputs elements in a form when they’re required. In this theme there is a class to do that? I looked into the docs but I don’t find anything like that.
Let me know.
Thank you.
Hello,
I did not include a default style for this, but you can easily add one, for instance to make the label black and add a red dot:
/* Required style */ .required .label { color: black; } .required .label:after { content: ' *'; color: red; }Apply it on any parent of the label, or even on the form itself if all fields are required.
Is this what you were looking for?
Yes, but I’m testing and not working
<label for=”name” class=”required label”>Name</label>
Just apply the class to any parent of the label – for instance:
<p class="button-height inline-label required"> <label for="input-2" class="label">Label</label> <input type="text" class="input" value=""> </p>If you want to have the option to apply it directly on labels, add another selector:
/* Required style */ .required .label, .label.required { color: black; } .required .label:after, .label.required:after { content: ' *'; color: red; }Hope this helps!
Yes! Works perfectly
thank you 
Hi – Does the admin theme include the front end templates for the Home page, Features, Login, etc?
Thanks -
Hi,
Sure, the landing page you can see here is included in the package, as well as the corresponding PSD
im a huge fan of your work so I hope this wasnt answered already.. can yousetup a page like you did for constellation where there are links to the different features? there are SOO many features that it is hard to get an overview of them all by clicking around the demo or viewing the psd.
Also, in constellation there was a way to see each feature individually in the docs and at the top you listed the dependant css files. I might be blind but is there anything like that in developr?
Hi there:)
I don’t know if this is a bug or not, but I am trying to find a workaround. I have applied the “scrollable” class to the #shortcuts menu, so that I will be able to scroll it down while using a tablet…..the problem is that this class eliminates the small carrot arrow at the top of the open shortcuts menu when viewing on mobile (#shortcuts:before)...
I tried the following with no success… if ($.template.mediaQuery.name === ‘desktop’) { $(’#shortcuts’).addClass(‘scrollable’); } });
Any Ideas?
Hi!
Sure, you can take advantage of the template responsive events to enable or disable the scrolling, depending on the active layout:
$(document).on('init-queries change-query', function() { if ($.template.mediaQuery.isSmallerThan('tablet-portrait')) { $('#shortcuts').removeCustomScroll(); } else { $('#shortcuts').customScroll(); } });Note that you must put this before the line
$.template.init();if you use it, in order for this script to catch the init-queries event.Hope this helps!
Works like a charm:) Thanks buddy! You absolutely rock!
ignore my last question, i was dumb.
On the wizard I am trying to change the color of the bar with the step numbers and legend field from the brownish color to the blue gradient.. can you tell me what element I should apply the color class to please?
Hi!
These were not dumb questions, I would have answered to you
On your question about how to change the background color of the wizard steps, there is no built-in method for this, but you have several options:
- If you just want a particular wizard to have a blue bar, just add this script at the end of your file:
$(document).ready(function() { $('.wizard-steps').addClass('blue-gradient'); });- If you want all wizards to use a blue steps bar, edit the file css/colors.css remove the selector from the anthracite gradient grouped declaration (line 400) and add it to the blue gradient grouped declaration (line 549).
- You may also edit the wizard plugin (js/developr.wizard.js) and add the class directly on the steps list UL (at line 109), or even add a new option to pass a custom color class.
Hope this helps!
tyvm.. that helped a lot for real.
Hello,
This may happen sometimes if the webfont takes too long to load: the rendering engine uses another local font in the meantime, but it does not have the same size as the webfont.
To prevent this, you may add this in the head of your page:
<style> .icon-user, .icon-lock { display: inline-block; width: 12px; } </style>Tell me if you still have issues with this!
You are writing abou that too big height of box?;) It happens only when in iOS Web App mode.
Sorry, I just realized my explanation was not really clear: this issue is related to the font icons on the left of the inputs, because they happen to be too large for a short time, pushing the inputs next to them on the line below – all of this precisely when the script that controls the layout detects the size of the form.
If you set a fixed size, this won’t happen anymore, and the login form should display fine
Thanks working now
Hello,i just bought you theme. I was the one which i was searching for quite a long time. It is just awesome. You have provide the event and calender. I want to know how to add events to the calender or the event list.
Hello,i just bought you theme. I was the one which i was searching for quite a long time. It is just awesome. You have provide the event and calender. I want to know how to add events to the calender or the event list.
Hello, and thanks!
You will find all instructions in the documentation, in the section Features reference / Agenda and calendars, along with ready-to-use markup examples.
Remember that this template is only a skin, so if you want to dynamically add events, you will need to code a function yourself, for instance in the browser using jQuery of server-side using AJAX calls.
Tell me if you have any other question or if you want more details!
Thanks for the reply.. Can you please show me example(a demo link with the js code) to dynamically add events, which i can use with this skin.
Hi display. Me again
I have some issues with the error bubble of the validationEngine on a modal window. The content (form) is loaded with ajax, but when I press the “Guardar” (Submit) button some bubbles are showing inside the content of the modal insted outside… you know what I mean
Check the image for the reference:
Let me know
thanks.
Hi,
This happens because the modal windows have the scrolling option set to true by default, so the content block uses
overflow:auto, and everything out of this block is hidden.To remove this property, just pass the option
scrolling: falsewhen you open the modal: the validation bubbles will display fine thenThank you for reply. The option
scrolling: falseis not working my friend… The bubbles is showing like the image in my previous postHmmm, it works fine here, so this may be something I fixed recently in the plugin, because it was not correctly handled before: just download and use this version, it should work fine
Hi. Thank you again for reply. Well, I updated the script that you sent in the previous post and still not working… The bubbles continues showing like the image that I posted. Is there any modification on the CSS? I don’t know… maybe is that… please check that and check your email… I sent you the modal script with the new method that I added days ago. Let me know about this if some CSS is missing
Thank you.
Actually, this is not related to the CSS, but to the correct detection of the scrolling option by the plugin: find this line in your version of the modal plugin:
And replace it with:
It should work fine then. I got your mail, if you want I can send you back your file with this fix, just tell me!
I have the same version of yours… The line that I have to replace exists in my version….
what is wrong 
When the modal is open, right-click on the content and click Inspect: in the developer panel, locate the div with the class modal-content, it should have none of these other classes: modal-scroll, custom-scroll.
If it has, it means to plugin it not correctly updated. If not, this might mean something else than the modal is causing the issue. Inspect all elements inside your modal (for instance, the form, any wrapping DIV or FIELDSET) and in the computed styles (most often on the right column of the inspect tab, above or below the CSS stack) check if any of them has an overflow value different from visible.
Also, can you show me the exact code you use to open the modal?
Ok…. I checked and none of those classes appears on the div where is modal-content…. I’m sending you an email with the screenshot of the code with the inspect. Also, the javascript of that modal. Let me know in this way or by email any comments.
Works perfect now after we talked by email
Check this out:
You are the best!
Hello, I recently sent you a message with some IE issues that I am currently having with this theme. Please review and let me know if you need any other information
Download here: https://www.dropbox.com/s/lroghffh6x3jqqi/ieissues.pdf
Thanks for your help
Hello,
This issue happens because the older versions of IE have no support for CSS media queries: the template uses a javascript polyfill to enable them, Respond.js.
What seems to happen here is that the polyfill fails to load, probably because of a wrong path, so the template displays in the mobile layout in IE, even for wider screens. You may solve this by editing js/setup.js and setting the right path to the folder where the polyfill is located at line 123: you may either use
respondPath: $('script').last().attr('src').replace(/[^\/]+$/, '')+'libs/',If you can’t find the line, make sure to upgrade to version 1.4.
Tell me if you need more details or if you still have issues!
Hello, I am trying to use the login-full.html,
else { // Remove previous messages formWrapper.clearMessages(); // Show progress displayLoading('Checking credentials...'); // Stop normal behavior event.preventDefault(); $.ajax({ type:'POST', url:'login.php', data:'&user='+user+'&password='+pass, success: function (result) { if (result == 'success') { document.location.href = './index.html'; } else { formWrapper.clearMessages(); displayError('Invalid user/password, please try again'); } } }); } });and the login.php as
$user = $_POST['user']; $password = $_POST['password']; if($user == 'admin' && $password == 'admin') { echo "success"; exit; }else{ echo "error"; } ?>The problem is its always showing always “Invalid user/password, please try again”. Is der any probz with the code? Please help
Hello,
Just to make sure, did you check if the correct login.php script path is used? Remember you can use your browser’s developer tools to inspect what’s sent and received during AJAX calls. For instance, in Chrome, hit F12 and switch to the Network tab.
Aside from that, it’s hard to tell what’s not working without testing the actual code and making some tests on it… You may for instance try to dump the content of $_POST to a file to make sure the form data is correctly received:
file_put_contents('form-data.txt', var_export($_POST, true));Sorry I can’t help more!
Thanks i could fix the bugs. Thanks a lot. You Rock.
Hi.
I’m trying to add custom options to “confirm” dialog inline but is not working
I have this:
<a href="javascript:void(0);" class="button icon-trash with-tooltip confirm" data-confirm-options="{message:'New message here'}"></a>The custom message is not showing, only the default “Are you sure?” text.
Let me know if I’m doing right.
Thanks.
Hi,
The syntax of JSON in data-* attributes is a bit tricky, here is the exact syntax you should use:
data-confirm-options='{"message":"New message here"}'The message key has no quotes in your code, so parsing fails and jQuery considers this to be a string, not an object. Also, you should rather use single quotes for the attribute, as double quotes are the standard in JSON.
Quick tip: you can use jsoneditoronline.org to build or even just check your JSON syntax.
Hope this helps!
Yes, you right. Sorry for my noob problem LOL
There’s no noob problems, only problems you haven’t met yet
Attached are some of the sample screens of different pages on the site, issue encircled in red. The incons show up twice.
Till now this is only happening on android phone/browser not able to replicate on ipad, or iphone or in a browser.
https://dl.dropbox.com/u/14985576/Screenshot_2013-02-05-23-02-22%20%281%29.png https://dl.dropbox.com/u/14985576/Screenshot_2013-02-05-23-08-19.png https://dl.dropbox.com/u/14985576/Screenshot_2013-02-05-23-11-58.pngHi,
This is a know issue with the version of Modernizr included in the first versions of the template: it triggered a false negative on pseudo-elements (:before and :after) support in some older versions of Android.
Try creating a custom build of the latest version of Modernizr using this link (it includes all required features). In most cases this was enough to solve the issue.
If this doesn’t work, try editing setup.js, and change this line:
if ($('html').hasClass('no-generatedcontent'))To this:
Tell me if you still have this issue!
We tried this and it didn’t have any effect. Even cleared the cache
I am surprised, even the second solution gave no results? Mmh… And updating Modernizr should have fixed that too.
What kind of android browser do you use? Chrome or the native browser? Also, did you have the opportunity to test this on another type of Android phone?
For instance, if the second screenshot is from your Sign In process (the link you gave in the other comment), I don’t have the issue on my Galaxy SIII.
still having an issue with this. Updated the Modernizr too.
Android Version: 4.0.4 Build Number: 6.1.A.2.55 Mobile Model: Xperia S LT26i
https://dl.dropbox.com/u/14985576/Screenshot_2013-02-13-22-44-34.pngThis is not an issue, this is the expected behavior: in mobile touch browsers, the system UI for selection is used by default, because it provides a better and familiar experience for the user.
If you want to disable this and use the plugin’s style, set the option styledOnTouch to true (either in the plugin’s defaults or select by select).
This feature was previously disabled for Android browsers, because of support issues, but now it should work fine so it has been enabled by default.
Tell me if you need more details!
Issue: Step 1/2/3 of the wizard have dropdowns, though they are implemented correctly but still creating issue while selecting the any of the listed values in them. 1. If user try to select some value the dropdown opens and closes immediately. 2. After repeated try it may stick there for some time but as soon as user try to select any value list over there it closes. 3. Issue only happening on iPod/iPhone/Android. 4. Dropdown for Country (Step 2/3) have search enabled, but it also do not work due to above mentioned issue.
Hi again,
Sorry, but your demo seems to work fine on my iPad and on Android on my Galaxy SIII. Silly question, but did you make sure to clear the browser’s cache?
You may also try to update these two template plugins to see if it helps, I have made a few fixes and improvements in them.
About the search field, this is a bit more complex, as touch browsers tend to trigger various distinct events when the user focuses the input, and sometimes it just break the plugin’s logic. I am working on it, but it is not ready yet. In the meantime, you may just disable the countries styled drop-down for touch devices and use the native OS selector UI (set option styledOnTouch to null), this will also provide a much better and intuitive user experience in long lists.
We did the updates and tried your suggests, still no effect.
I still don’t have the issue on my test phone nor my iPad… Same remarks as for your other question, did you test on another smartphone? What kind of browser do you use on Android?
I am testing this on Sony Xperia S (4.3inches screen) Using the native browser.
Tested this on chrome, it’s not having double IMAGE ISSUE on chrome. The native browser is having issue only.
Related to the dropdown issue on chrome, it’s there but less severe.. But it’s there..
Well, I am currently working on a rewrite of the inputs plugin, it should get rid of many of these issues. I’ll notify you when it’s ready!
Great! Do you have an eta for it, just so we can do some dev planning? Thank you so much!
Hope to release it within a couple of days
Hi again!
I just finished my rewrite of the input styling plugin, you can download it here.
I tested it on many browsers and platforms, but if you notice any issue please report it to me
Thank you! I checked the MtSIgnInNew2 page post refresh of the static resource by you with new lib file.
There are issues with the dropdown now on step 2, 3 the dropdown are appearing broken.
NOTE: Its broken on mobile/pc browser both.
https://medtexter.stripe01.cs12.force.com/mtsigninnew2Hi,
I found that this issue is related to the form validation plugin, here is how to fix it: replace this line in developr.input.je (close to the end of the file):
By this one:
hidden.css('display', '');It should work fine now, I updated the files in the download link.
Thanks for reporting!
QUERY: Dropdowns having long entries as options are breaking the UI of the form. In Order to contain this issue applied Class=”expandable-list” also added style=”width:200px”. Its a porblem only on mobile view with Firefox ANy suggestions?
You may do as follow in form.css:
- find the selector
.select.expandable-list > .drop-down, and add this property:- then inside the 768px media-query block at the end of the file, add this style:
.select.expandable-list > .drop-down { max-width: none; }- and just above the 768px media-query block, add this media-query size:
/*480px*/ @media only screen and (min-width: 480px) { .select.expandable-list > .drop-down { max-width: 440px; } }/*/mediaquery*/Now the drop-down will have a maximum width in mobile mode, and none in desktop mode.
It this what you are looking for?
Hello, me again
I found an issue using textarea with a class autoexpanding on a modal window. Check the image to see what I mean:
Is there a possible fix for that? Let me know.
Thank you
Hello!
This happens because your modal window has reached its own max-height. Setting a bigger value will only report the problem, and will not work on smaller screens.
I think you should set a max-height on the textarea itself:
You will need to fine-tune the height until it gives the expected result, but I think this is the best option.
Hope this helps!
Helped me a lot! Thank you.
Hi there! I have a quick question, how can I add a custom loading symbol inside a modal when an ajax request is processing?
Hi!
Just set the content of the window with whatever you like, it will be replaced when the ajax request completes:
var modal = $.modal({ title: 'Ajax content', content: '<div style="height: 200px; line-height: 200px; text-align: center;"><span class="loader big" /></div>', url: 'some-page.html', width: 300, ajax: { complete: function() { modal.centerModal(); } } });The ajax.complete callback is used to center the window once the content is loaded, you can get rid of it if you don’t need it (for instance if your window has fixed size).
And if you want to call an AJAX request on an already open window, just do:
// Open the window var modal = $.modal({ ... }); /* Later: */ // Set loading content modal.setModalContent( '<div style="height: 200px; line-height: 200px; text-align: center;"><span class="loader big" /></div>' ); // Load content modal.loadModalContent( 'some-page.html' );You will find the various sizes and styles for the loader in the documentation, in Template basics / Generic elements / visual elements
Tell me if you need more details!
This was exactly what I needed!! Thanks again for your help!
Glad I could help!
hi, apparently the collapsible plugin is not working with both Safari and Firefox. However it is working with Chrome.
http://dev.esoundz.com/landingpages/drummasters2.phpAny idea why? Even if I run the DOC in Safari or Firefox, the demo Collapsible would not fold/unfold when I click on the header.
Hi,
You just need to add the javascript polyfill for browsers with no native support for details elements: js/libs/jquery.details.min.js.
Without it, they don’t know how to handle this type of element.
Tell me if you need more details!
Hi again,
The following problem is a bit off from “using” your great template, instead its more of a JS problem. But if you could take a look, it would be much appreciated.
I started to add some code to have all user interaction with the site is handled via ajax. this works as expected for normal links, but not so for tabs. (its acting kinda strange to be precise)
i registered a setup function like:$.template.addSetupFunction(function(self, children) { $('div.standard-tabs.ajax div.tabs-content > div').on('showtabinit', function(){ var url = $(this).find('div:first-child').data('url'); $(this).load(url + '/ajax/1', function(){ $('.stanard-tabs').refreshTabs(); }); }); return this; }); $('#maincontent').applySetup();First Problem: if i call the page normaly tab-1 isnt loaded, but clicking on tab-2 loads the content.
Second Problem: if the page containing the tabs is loaded via ajax, tab-1 is shown directly. But clicking on tab-2 leads to loading the content 4 times (according to firebug).
You can see this on http://demo.cwd.at/admin
As you see tab-1 doesnt load (or isnt triggered) tab-2 works as expected.
Now click on the “Ajax Loading Link” above (and have firebug open).
tab-1 is autoloaded with the content. but as soon as you click tab-2 the content is loaded 4 times instead of 1.
It looks like the showtabinit hook is registered more than once.
Any hint/tip suggestion what goes wrong?
I really like the setup function, as you say the lead to less code, but it seems i just dont get them right.
TIA Rufinus
Hi!
There is just a little change to make to your code: you should only add this listener on the content affected by the applySetup() call, so instead of:
$('div.standard-tabs.ajax div.tabs-content > div').on('showtabinit', function(){Use:
this.findIn(self, children, 'div.standard-tabs.ajax div.tabs-content > div').on('showtabinit', function(){Otherwise, you listener is applied every time the setup function is called, whether it runs on your main content or anywhere else – which is why it your listener gets called several times after a few DOM changes.
About the first tab not being loaded, this is because the tabs plugin initializes it (and so triggers the init event) before your setup function runs. To prevent this, just take your call to
$.template.addSetupFunction()out of the document.ready callback in admin.js. And so you won’t need the$('#maincontent').applySetup();as the initial global setup will take care of applying your setup.Note that you may even drop the automatic setup and use event delegation:
$('#maincontent').on('showtabinit', 'div.standard-tabs.ajax div.tabs-content > div', function(){ var url = $(this).find('div:first-child').data('url'); $(this).load(url + '/ajax/1', function(){ $('.stanard-tabs').refreshTabs(); }); });Tell me if you still have issues or if you need more details!
hi!
very nice. with the findIn, after reloading per ajax, on click on tab-2 its still loading twice, but nevermind, using the event delegation as in your second example fixes this too.
thank you very much. your level of support is just awesome.
Rufinus