27 September 2019

How to create cool login form with image and login?

 create cool login form with image and login



<html>
<head>
<style>
section.elementor-element.elementor-element-809d463.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default.elementor-section.elementor-top-section {
    display: none;
}
.elementor-inner {
    display: none;
}

.wrapper{
width:100%;
height:100vh;
display: flex;
 justify-content: center;
    align-items: center;

}
.wrap{
width:80%;
margin:auto;
}
.full-box{
width: 800px;
background: #fff;
min-height: 500px;
height: 525px;
margin: auto;
box-shadow: 0 30px 60px 0 rgba(0,0,0,.2);
display: flex;


}
.login-left{
width: 55%;
padding: 50px;
position: relative;
}

input.field {
width: 100%;
height: 36px;
border-radius: 4px;
border: 1px solid #c7cfd8;
font-size: 18px;
margin-bottom: 20px;
padding: 6px 12px;
}

input.sub {
width: 100%  !important;
border: none !important;
color: #fff !important;
background: #2a870f !important;
outline: none !important;
border-radius: 4px !important;
padding: 10px 0 !important;
font-size: 16px !important;
font-weight:400 !important;
margin:0;
}

.img {
width:200px;
display: table;
margin: 20px auto;
}
.name{

font-size: 20px;
text-align: center;
font-weight: 400;

}
.p{
font-size: 16px;
text-align: center;
font-weight: 400
}
a.web {
text-decoration: none;
color: #4a5b65;
text-align: center;
width: 100%;
display: block;
font-size:18px;
padding:10px;
}

.login-reight {
    display: flex;
    width: 45%;
    padding: 40px 61px 40px 40px;
    background: #0a0a0c;
    background-image: url(<?php echo plugin_dir_url(__FILE__);?>images/logoimage.jpg);
    background-size: cover;
    height: 100%;
    box-sizing: border-box;
}

</style>
</head>
<body>
<div class="wrapper">
<div class="wrap">
<div class="full-box">

<div class="login-left">
<img class="img" src="<?php echo plugin_dir_url(__FILE__);?>images/logo.png">
<h4 class="name">Sign In</h4>
<p class="p">Need a account? Contact admin</p>
<form action="" method="post">

<input class="field" type="email" name="email" placeholder="Email">


<input class="field" type="password" name="password" placeholder="Password">


<input class="sub" type="submit" name="submit" value="Sign in">

</form>
<a href="#" class="web">Back to Website Homepage</a>
</div>
<div class="login-reight">
</div>
</div>
</div>
</div>
</body>
</html>
at No comments:

How to get background image from wordpress plugin folder?

get background image from wordpress plugin folder
<style>

background-image: url(<?php echo plugin_dir_url(__FILE__);?>images/logoimage.jpg);

</style>
at No comments:

24 September 2019

How to align center div in div in html ?

align center div in div in html




<html>
<head>
<style>
.outer{
width: 100%;
height: 100vh;
background:red;
}
.container{
width: 35%;
height: 60vh;
background:blue;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

</style>
</head>
<body>
<div class="outer">
<div class="container">
</div>
</div>

</body>
</html>



OR





<html>
<head>
<style>

.outer{
width: 100%;
    height: 100vh;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;

}
.container{
width: 35%;
height: 60vh;
background:blue;
}

</style>
</head>
<body>
<div class="outer">
<div class="container">
</div>
</div>

</body>
</html>
at No comments:

How to size 100% width and height in html?

size 100% width and height in html


<html>
<head>
<style>

.outer{
width: 100%;
height: 100vh;
background:red;
}


</style>
</head>
<body>
<div class="outer">

</div>

</body>
</html>
at No comments:

How to remove wordpress footer and header from wordpress plugin page in wordpress?

 remove wordpress footer and header from wordpress plugin page in wordpress


<style>


header#masthead {
    display: none;
}
footer#colophon {
    display: none;
}


</style>
at No comments:

23 September 2019

how to upload image file in database in php in wordpress?

upload image file in database in php in wordpress



<html>
<head>


<?php


extract($_POST);
global $wpsite;
global $wpdb;
if(isset($_POST['submit'])){

/* Upload  Image */
if ( ! function_exists( 'wp_handle_upload' ) )
          require_once( ABSPATH . 'wp-admin/includes/file.php' );
          $uploadedfile = $_FILES['file'];
          $upload_overrides = array( 'test_form' => false );
          $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );
          if ( $movefile ) {
              //var_dump( $movefile );
  //echo $movefile['url'];
      } else {
             echo "Possible file upload attack!\n";
}

$downloadlink = $movefile['url'];
$menutable=$wpdb->prefix.$wpsite."_menutable";
$wpdb->insert($menutable, array('item_name' => $itemname, 'item_type' => $itemtype, 'item_catagory' => $itemcata, 'meal' => $meal, 'price' => $price, 'status' => $status, 'restaurant_id' => $restaurantid,'download_link' => $downloadlink ) );

}
?>


</head>
<body>
<form action="" method="post" enctype="multipart/form-data" >
<input type="text" name="restaurantid" placeholder="restaurant_id">
<input type="text" name="itemname" placeholder="Item Name">
<input type="text" name="itemtype" placeholder="Item Type">
<input type="text" name="itemcata" placeholder="Item Catagory">
<input type="text" name="meal" placeholder="Meal">
<input type="text" name="price" placeholder="Price">
<input type="text" name="status" placeholder="Status">
<input type="file" name="file" id="file" class="form-upl">
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
at No comments:

19 September 2019

How to use if condition and change on scroll in jqurey?

 use if condition  and change on scroll in jqurey?



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > 1000 ) { 
        alert("hello");

     
    } else {
      // ...
    }
});
});

</script>
at No comments:
use javascript in php or how to redirect on any page in php



<?php


echo '<script LANGUAGE="JavaScript">window.location.href="'.site_url().'/loginform";</script>';



?>
at No comments:

How to use shortcode in wordpress?

use shortcode in wordpress in function.php or main plugin file


function login_register(){
?>


<div  id="loginform">
<form method="post" action="">
<h4>Login</h4>
<div class="border"></div>
<div><span id="or">or<span><span id="full1"> create an account</span></div>
<div class="wrap-input100 validate-input" data-validate="Enter username">
<input class="input100" type="text" name="username">
<span class="focus-input100" data-placeholder="Username"></span>
</div>

<div class="wrap-input100 validate-input" data-validate="Enter password">
<input class="input100" type="password" name="pass">
<span class="focus-input100" data-placeholder="Password"></span>
</div>

<input type="submit" name="login" value="Submit">

</form>
</div>

<?php
}
add_shortcode("loginregister","login_register");

?>







anywhere


<?php

echo do_shortcode('[loginregister]');

?>
at No comments:


at No comments:

How to link css,jquery and ajax with all files via one wordpress function?

link css,jquery and ajax with all files via one wordpress function

copy this code in wordpress function.php file or main plugin file?

function ecom_scripts(){

wp_register_script( 'ecom-script', plugins_url('/js/custom.js', __FILE__), array( 'jquery' ), '', true );
    wp_localize_script( 'ecom-script', 'myajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    wp_enqueue_script( 'ecom-script' );
wp_register_style( 'ecom-style', plugins_url('/css/stylesheet.css', __FILE__), true );
    wp_enqueue_style( 'ecom-style' );
}
add_action("wp_enqueue_scripts","ecom_scripts");
at No comments:

How to create login and signup form in one box in html and css?

create login and signup form in one box
<html>
<head>
<style>
.col-2, label {
    width: 100%;
    float: left;
    font-size: 20px;
    margin-bottom: 3px;
}
.box {
    width: 24%;
    height: 362px;
    border: 1px solid black;
}
input[type="text"],
input[type="password"] {
    width: 100%;
    height: 40px;
    font-size: 20px;
}
.wrap{

width:80%;
margin:auto;


}

input[type="submit"] {
    width: 82px;
    height: 40px;
    background-color: #61CE70;
    font-size: 15px;
    font-weight: 500;
    padding: 11px;
    margin-top: 2px;
}

p {
    font-size: 15px;
    font-weight: lighter;
    letter-spacing: 1px;
}

h4 {
    font-size: 24px;
    font-weight: 700;
    color: #61ce70;
cursor: pointer;
}
.link{

color:red;

}
.loginform{

display:none;


}
</style>
<script src="<?php echo plugin_dir_url(__FILE__);?>/js/jquery.min.js"></script>
<script>

$(document).ready(function(){

  $("#login").click(function(){
 $(".regform").hide();
 $(".loginform").show();
});

 $("#register").click(function(){
 $(".regform").show();
 $(".loginform").hide();
});



});



</script>
</head>
<body>

<div class="box">
<div class="wrap">
<h4><span id="register"> Register</span> / <span Id="login">Login</span></h4>
</div>
<div class="wrap">
<form action="" method="post" class="regform">
<div class="col-2">
<label>Phone</label>
<input type="text" name="phone" placeholder="Phone" required>
</div>
<div  class="col-2">
<label>Password</label>
<input type="password" name="password" placeholder="password" required>
</div>
<div  class="col-2">
<input type="submit" name="register" value="Register">
</div>
<p>Lost your Password?</p>
</div>
</form>

<form action="" method="post" class="loginform">
<div class="wrap">
<div class="col-2">
<label>Phone</label>
<input type="text" name="phone" placeholder="Phone" required>
</div>
<div  class="col-2">
<label>Password</label>
<input type="password" name="password" placeholder="password" required>
</div>
<div  class="col-2">
<input type="submit" name="login" value="Login">
</div>
<p>Lost your Password?</p>
</div>
</form>


</div>


</body>
</html>

at No comments:

10 September 2019

How to get wordpress site title name from url ?

get wordpress site title name from url 

<?php

// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;


function oops_script(){

wp_enqueue_style("oops-style", plugin_dir_url(__FILE__)."style.css");

}
add_action("wp_enqueue_scripts","oops_script");



/*+++++++ Declaring Global Variables +++++++++*/
$domain = site_url(); //or home
$domain = str_replace('http://', '', $domain);
$domain = str_replace('www', '', $domain);
$domain = str_replace('.com', '', $domain);
$domain = str_replace('/', '', $domain);
$domain = str_replace('localhost', '', $domain);

 $wpsite = $domain;


?>

use it in another page with global variable


<?php



global $wpsite;

echo $wpsite ;



?>
at No comments:

09 September 2019

How to get back page in php with back button? 

Get back page in php with back button
<button onclick="history.go(-1);">Back </button>
at No comments:

How to convert minutes in hours and minutes in php?

convert minutes in hours and minutes in php




<html>
<body>
<?php
$minutes=127;

$hours = floor($minutes / 60);

$min = ($minutes % 60);
echo $hours.":".$min ;

?>
</body>
</html>
at No comments:

How to get timstamp from time in php?

Get timstamp from time in php
<html>
<body>

<?php
$first="11.06am";
echo(strtotime("$first") . "<br>");

?>

</body>
</html>

at No comments:

05 September 2019

How to insert data from dynamically created add/remove fields in wordpress $wpdb? (second method)

insert data from dynamically created add/remove fields in wordpress $wpdb?
 (second method)


<html>
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head> 
    <script> 
        $(document).ready(function() { 
            $("#Add").on("click", function() {
var backbone = $('.backbone').val();
$('.backbone').val(parseFloat(backbone) + 1);
var newbackbone = $('.backbone').val();
                $("#textboxDiv").append("<div><input type='text' name='field" + newbackbone +"' placeholder='Field " + newbackbone +"'>"+ "<input type='text' name='field10" + newbackbone +"' placeholder='Field10" + newbackbone +"'>"+ "<input type='text' name='field200" + newbackbone +"' placeholder='Field200" + newbackbone +"'>"+ "<input type='text' name='field300" + newbackbone +"' placeholder='Field300" + newbackbone +"'>"+ "<input type='text' name='field400" + newbackbone +"' placeholder='Field400" + newbackbone +"'>"+ "<input type='text' name='field500" + newbackbone +"' placeholder='Field500" + newbackbone +"'>"+ "<input type='text' name='field600" + newbackbone +"' placeholder='Field600" + newbackbone +"'></div>");
            }); 
            $("#Remove").on("click", function() { 
                $("#textboxDiv").children().last().remove(); 
            }); 
        }); 
    </script>
<?php
if(isset($_POST['submit'])){
$j=$_POST['backbone'];
$n=$j;
$f ="";
for($i=1; $i<=$j; $i++){
${"field$i"} = $_POST["field$i"];
${"field10$i"} = $_POST["field10$i"];
${"field200$i"} = $_POST["field200$i"];
${"field300$i"} = $_POST["field300$i"];
${"field400$i"} = $_POST["field400$i"];
${"field500$i"} = $_POST["field500$i"];
${"field600$i"} = $_POST["field600$i"];
$a= ${"field$i"};
$b= ${"field10$i"};
$c= ${"field200$i"};
$d= ${"field300$i"};
$e= ${"field400$i"};
$f= ${"field500$i"};
$g= ${"field600$i"};
$table_name = $wpdb->prefix . "createtable";
$wpdb->insert($table_name, array('field' => $a, 'field1' => $b, 'field2' => $c, 'field3' => $d, 'field4' => $e, 'field5' => $g, 'field6' => $g)
);
 }
}
?>
  <form action="" method="post">

<input type="text" name="field1" placeholder="Field1">
<input type="text" name="field101" placeholder="Field101">
<input type="text" name="field2001" placeholder="Field2001">
<input type="text" name="field3001" placeholder="Field3001">
<input type="text" name="field4001" placeholder="Field4001">
<input type="text" name="field5001" placeholder="Field5001">
<input type="text" name="field6001" placeholder="Field6001">
<input type="hidden"  name="backbone" class="backbone" value="1">
    <div id="textboxDiv"></div> 
<input type="button" value="add"  name ="add" id="Add">
<input type="button" value="remove"  name ="remove" id="Remove">
<input type="submit" name="submit">
</form>
</body>
</html>
at No comments:

How to insert data from dynamically created add/remove fields in wordpress $wpdb?



 insert data from dynamically created add/remove fields in wordpress $wpdb?






<html>
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head>
   <script> 
        jQuery(document).ready(function($) { 
            $("#Add").on("click", function() {
var backbone = $('.backbone').val();
$('.backbone').val(parseFloat(backbone) + 1);
var newbackbone = $('.backbone').val();
$("#textboxDiv").append("<input type='text' name='a"+ newbackbone +"' placeholder='a " + newbackbone +"'>"+ "<input type='text' name='b"+ newbackbone +"' placeholder='b" + newbackbone +"'>"+ "<input type='text' name='c"+ newbackbone +"' placeholder='c" + newbackbone +"'>"+ "<input type='text' name='d" + newbackbone +"' placeholder='d" + newbackbone +"'>"+ "<input type='text' name='e" + newbackbone +"' placeholder='e" + newbackbone +"'>"+ "<input type='text' name='f" + newbackbone +"' placeholder='f" + newbackbone +"'>"+ "<input type='text' name='g" + newbackbone +"' placeholder='g" + newbackbone +"'><br><br>");
});
        }); 
    </script>
<?php
if(isset($_POST['submit'])){
global $wpdb;
$table_name = $wpdb->prefix . "createtable";
$backbone = $_POST['backbone'];
for($i=1;$i<=$backbone;$i++){
$wpdb->insert($table_name, array('field' => $_POST["a".$i], 'field1' => $_POST["b".$i], 'field2' => $_POST["c".$i], 'field3' => $_POST["d".$i], 'field4' => $_POST["e".$i], 'field5' => $_POST["f".$i], 'field6' => $_POST["g".$i]));
}
}
?>
<form action="" method="post">
<input type="text" name="a1" placeholder="a1">
<input type="text" name="b1" placeholder="b1">
<input type="text" name="c1" placeholder="c1">
<input type="text" name="d1" placeholder="d1">
<input type="text" name="e1" placeholder="e1">
<input type="text" name="f1" placeholder="f1">
<input type="text" name="g1" placeholder="g1">
<input type="hidden"  name="backbone" class="backbone" value="1">
<div id="textboxDiv"></div> 
<input type="button" value="add"  name ="add" id="Add">
<input type="button" value="remove"  name ="remove" id="Remove">
<input type="submit" name="submit">
</form>
</body>
</html>
at No comments:
Subscribe to: Posts (Atom)

How to add re-captcha v3 on all Elementor forms using coding?

 Add re-captcha v3 on all Elementor forms using coding add_action('wp_footer',function(){     ?> <script src="https://www...