Search the Community
Showing results for tags 'javascript'.
Found 2 results
-
Hello everyone. This login integration builds on the work done by licenesecart. See the guide below. https://licensecart.com/billing/plugin/support_manager/knowledgebase/view/31/external-login-form/1/ In my case, pure CSS was not enough to use the custom site integrated login. The problem appears to be that the data-toggle="modal" attribute will not work on my site due to the way it's already used in other modals. The reason is not clear, (if anyone can shed light that would be great). I simply could not submit a form from a modal window. So my work around is to use javascript, to submit the form. I will start working on a spam catcher for the form later but for now here is my. ( data-toggle="modal") work around. Starting from the top of the page. Before you start, in order for it to work you need to do the following...Be extreamly care full here, as editing this page has risks if you make a mistake. From licesecart's guide. Next, on your site, somewhere you need to call the modal. I used a stacked font awesome icon. Font Awesome (modal link) <a href="#openModal" title="Customer Sign-in"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-sign-in fa-stack-1x fa-inverse"></i> </span> </a> Non-fontawesome, basic (modal link) <a href="#openModal" title="Customer Sign-in">Sign-in</a> Here is the main modal and the login form. (I used a combination of the bootstrap core, the blesta bootstrap and this guide from JSFiddle. http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/ ) Remember to use https:// if you have a certificate. <!--Start of Blesta Login Modal--> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close"><i class="fa fa-times"></i></a> <form id="blestalogin" action="http://yourwebsite.comy/client/login/" method="POST"> <fieldset> <div class="form-group"> <label for="login_username">Username</label> <input type="text" name="username" value="" id="login_username" class="form-control" placeholder="Username" /> </div> <div class="form-group"> <label for="login_password">Password</label> <input type="password" name="password" id="login_password" class="form-control" placeholder="Password" /> </div> </br> <button type="submit" class="btn btn-success btn-block" name="login" value="Login" id="linktoblesta" hidefocus="true"><i class="fa fa-sign-in fa-lg"></i> sign in</button> </fieldset> </br> <a href="http://yourwebsite.comy/client/login/reset/">Reset My Password</a> </form> </div> </div> <!--End of Blesta Login Modal--> The form is submitted with javascript at the bottom of your page is best, after the <body> tag. <!--Blesta Login javascript--> <script> window.onload = function() { document.getElementById('linktoblesta').onclick = function() { document.getElementById('blestalogin').submit(); return false; }; }; </script> <!--End of Blesta Login script--> Finally, the style sheet uses the JSfiddle exampe, (i removed the white to black gradient) but the rest is standard. Add this to your css file. I used goolgle fonts, so remember to edit this to your needs. and also declare google fonts link in your html header (99% will already have done this) .modalDialog { position: fixed; font-family: 'Roboto Slab', serif; font-weight: 450; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 300px; position: relative; margin: 5% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; } .close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; } The finished form will look something like this. Spam will be filtered by blesta. However there is no harm (as far as i can see) in adding an extra layer. Basically i usually add an extra form field with a null or placeholder value in the form. This field is hidden from humans with css, but spam bots tend to fill it out by default. A PHP page then rejects logins where the hidden form has been filled out. Simple and 90% effective in my experience. -
Hello The community . LAST UPDATE : 9-2-2015 , Version 1.6.0 IF YOU WANT TO THANK ME WITH A LITTE DONATION , you can do it with PAYPAL DONATION from here we bring free and exclusive content , this time is Css Javascript Toolbox plugin . the Magic BOX . The Css Javascript Toolbox plugin Easily add custom CSS, JavaScript, HTML and PHP code To Heeder , Body , Footer in any page you need . 1.6.0 -fix language difinition error in updating file. -fix include multiple files in on controller. -fix preselect page/controller in edit page. 1.5.1 -cleanup code . -offcial release . the plugin can : Show css/js/html/php in all blesta pages (client/admin) Show css/js/html/php in all client side pages . Show css/js/html/php in all admin side pages . Show css/js/html/php in Some specific pages . TODO LIST : - add plugins pages to the list inn the second post you can see exemple of usage . screenshoot : admin area admin rendered page with custom css / js the add function page HOW IT WORk : select what content you need to add , then : for css add just the style without <style> tags like .head { padding: 0px 10px; height: 16px; background: url('../images/arrow06.gif') no-repeat scroll 0% 0% transparent; } .logo { padding: 0px 10px; height: 16px; margin: 0px 0px 0px 20px; background: url('../images/arrow06.gif') no-repeat scroll 0% 0% transparent; } for javascript , add just the function without <script> tags : alert('TEST ALERT'); for html , add html as you want . for php add the complete code with php tags . (do not use echo command) . This Plugin is tested in our test server , no bugs at the moment . as always the installtion steps is : 1 - download the file https://github.com/Blesta-Addons/Css_Javascript_Toolbox 2 - upload the css_javascript_toolbox folder inside plugin directory . 3 - goto plugins , and install css javascript toolbox . 4 - enjoy the free content . The Plugins / Modules take from us a lot of time , so any donation are welcome . Any Suggestion/Bug Please report it here .
- 49 replies
-
- 4
-
-
- javascript
- magic box
- (and 5 more)
