Hi im working on a page wich allows my viewers on twitch to donate for my stream...
When a user clicks on paypal he gets redirected to paypal and if he clicks on visa it opens the popup
The problem i have now is that the donation ammount alway has the same opacity as the popup....
Popup screenshot
Did someone knows what the problem could be?
My index.php:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- META -->
<meta name="description" content="RyuZockt.at StreamDonations" />
<meta name="keywords" content="stream, livestream, ryuzockt, donation, spende, support" />
<meta name="author" content="RyuZockt">
<meta name="revisit-after" content="3 days" />
<title> RyuZockt.at Donations</title>
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Comfortaa:400,700" rel="stylesheet" type="text/css">
<!-- STYLE -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<!-- Font Awesome 4.1.0 -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Theme -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/popup.css" rel="stylesheet">
<!-- /STYLE -->
</head>
<body oncontextmenu="return false;" style="background-image: url(assets/img/bg.jpg);">
<!-- Modal PopUp-->
<div id="myModal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close"><i class="fa fa-times" aria-hidden="true"></i></span>
<p><strong>Diese Zahlungsmethode ist momentan noch nicht verfügbar <img src="assets/img/sad.png"></strong></p>
</div>
</div>
<div class="col-md-12">
<div class="container-md">
<div class="panel cart panel-default">
<div class="panel-heading text-center">
<img class="avatar" src="assets/img/ryu.jpg">
<h1>RyuZockt</h1>
</div>
<div class="panel-body cart-form">
<form method="post" enctype="multipart/form-data" action="startDonation.php">
<!-- Name und Betrag -->
<div class="row">
<!-- Name -->
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control" placeholder="Benutzername">
</div>
</div>
<!-- Betrag -->
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<input type="text" name="betrag" required="required" class="form-control" placeholder="Betrag (frei wählbar)" value="5">
<span class="input-group-addon" id="basic-addon2"><i class="fa fa-eur fa-lg" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<!-- /Name und Betrag -->
<!-- Nachricht -->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="8" maxlength="50" type="text" name="msg" class="form-control" placeholder="Nachricht an RyuZockt (max. 50 Zeichen)"></textarea>
</div>
</div>
</div>
<!-- /Nachricht -->
<!-- Spacer -->
<div class="labelled-separator">
<div class="label-wrapper">
<label class="required"> Donaten mit</label>
</div>
</div>
<!-- /Spacer -->
<!-- Pay Buttons -->
<div class="row small-gap">
<!-- PayPal -->
<div class="col-md-6 col-xs-6 payment-mean payment-paypal">
<div class="form-group">
<button type="submit" style="width: 100%;" name="paypal" required="required" class="btn btn-default btn-bump btn-paypal" value="PAYPAL">PayPal</button>
</div>
</div>
<!-- /PayPal -->
<!-- Sofort -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="sofort" type="button" style="width: 100%;" name="mangopay-sofort" required="required" class="btn btn-default btn-bump btn-mangopay-sofort" value="MANGOPAY_SOFORT">MangoPay-Sofort</button>
</div>
</div>
<!-- /Sofort -->
<!-- Paysafe Card -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="psc" type="button" style="width: 100%;" name="mangopay-psc" required="required" class="btn btn-default btn-bump btn-mangopay-psc" value="MANGOPAY_PSC">MangoPay-PSC</button>
</div>
</div>
<!-- /Paysafe Card -->
<!-- Visa-Mastercard -->
<div class="col-md-6 col-xs-6 payment-mean payment-mangopay">
<div class="form-group">
<button id="visa" type="button" style="width: 100%;" name="mangopay-visa" required="required" class="btn btn-default btn-bump btn-mangopay-visa" value="MANGOPAY_VISA_MASTERCARD">MangoPay-Visa-Mastercard</button>
</div>
</div>
<!-- /Visa-Mastercard -->
</div>
<!-- /Pay Buttons -->
</form>
</div>
</div>
</div>
</div>
<!-- Scripte -->
<script src="assets/js/modal-popup.js"></script>
</body>
</html>
My style.css:
html, body{
min-height: 100%;
font-family: 'Comfortaa', 'sans-serif';
letter-spacing: -0.5px;
width: 100%;
}
h1{
font-family: 'Comfortaa', 'sans-serif';
letter-spacing: -0.5px;
font-size: 2.6rem;
word-break: break-word;
}
.div{
display: block;
}
.img{
vertical-align: middle;
}
.h1{
font-size: 2.6rem;
margin-top: 0;
margin-bottom: 20px;
}
.form{
display: block;
margin-top: 0em;
}
.form-group{
margin-bottom: 15px;
}
.textarea{
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 6px 12px 6px 12px;
resize: none;
overflow: hidden;
border-bottom: 0;
}
.input-group{
position: relative;
display: table;
border-collapse: separate;
font-family:
}
.input-group-addon{
border-radius: 0;
background-color: #f9f9f9;
padding: 6px 12px;
font-size: 14px;
font-weight: normal;
line-height: 1;
color: #555555;
text-align: center;
border: 1px solid #ccc;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
box-sizing: border-box;
}
.cart-body .form-control{
font-size: 1.8rem;
line-height: 3rem;
min-height: 45px;
}
.form-control{
display: block;
width: 100%;
padding: 6px 12px;
color: #555555;
background-color: #FFF;
border: 1px solid #ccc;
border-radius: 2px;
height: 40px;
border-width: 1px;
}
textarea {
resize: none;
}
.row{
margin-left: -15px;
margin-right: -15px;
}
.cart{
position: relative;
margin-top: 100px;
border: none;
box-shadow: none;
}
.panel{
margin-bottom: 20px;
background-color: #FFF;
border: 1px solid transparent;
border-radius: 2px;
}
.cart .avatar{
margin-top: -60px;
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #FFF;
}
.cart-body .panel-body{
padding: 20px;
background-color: #FFF;
box-sizing: border-box;
}
.col-md-12{
width: 100%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.container-md{
width: auto;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
max-width: 500px;
}
.labelled-separator{
border-top: 1px solid #ccc;
margin-bottom: 20px;
margin-top: 40px;
position: relative;
}
.labelled-separator .label-wrapper{
position: absolute;
top: -13px;
width: 100%;
text-align: center;
}
.cart-body .labelled-separator label{
background-color: #f4f4f4;
}
.labelled-separator label{
display: inline-block;
padding: 0 10px;
background: #fff;
}
label{
font-size: 10px;
font-family: sans-serif;
color: #777788;
text-transform: uppercase;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.row.small-gap{
margin-left: -3px;
margin-right: -3px;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.btn-bump{
line-height: 3rem;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
border-width: 2px;
}
.btn-paypal{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/paypal.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-sofort{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-sofort.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-psc{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-psc.png) no-repeat 50% 50%;
background-size: auto 60%;
}
.btn-mangopay-visa{
text-indent: -9999px;
color: #333333;
border-color: #cccccc;
background: url(http://ryuzockt.at/donate/assets/img/mangopay-visa.png) no-repeat 50% 50%;
background-size: auto 60%;
}
and at least
my popup style.css
/* Modal PopUp */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 45%;
text-align: center;
}
/* The Close Button */
.close {
float: right;
font-size: 20px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
It looks like the z-index of the input is greater than the z-index of the modal. I removed this line from the code and the donation amount has the same opacity as the background...
change this styling:
.input-group .form-control{
z-index: 2;
}
to this:
.input-group .form-control{
z-index: 0;
}
As mentioned by the other answer the problem is due to the z-index. I would not recommend you changing or generally overwriting the bootstrap code as long as you are not 100% secure in what you do. Better just increase the z-index of your modal like this.
.modal {
/* your other properties */
z-index: 10; /* Sit on top */
}
Related
I have a problem that, like I wrote at title, though its because wordpress.
Im working with a basic wordpress theme but I made my own header, my own footer and my own pages.
Heres my header:
<body>
<div class="wrapper">
<header>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/assets/js/scriptmain.js" type="text/javascript"></script>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ArvanJobs
</div>
<?php
wp_nav_menu( array(
'theme location' => 'top',
'container' => 'div',
'container_class' => 'menu',
));
?>
</nav>
</header>
And here's the footer:
<?php
/**
*
* #link arvanjobs.com
*
* #package Klmfsk
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Footer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
</head>
<footer class="container-fluid bg-grey py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6 ">
<div class="logo-part">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" class="w-50 logo-footer" >
<p>7637 Laurel Dr. King Of Prussia, PA 19406</p>
<p>Use this tool as test data for an automated system or find your next pen</p>
</div>
</div>
<div class="col-md-6 px-4">
<h6> About Company</h6>
<p>But horizontal lines can only be a full pixel high.</p>
More Info <br>
Contact Us
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 px-4">
<h6> Help us</h6>
<div class="row ">
<div class="col-md-6">
<ul>
<li> Home </li>
<li> About </li>
<li> Service </li>
<li> Team </li>
<li> Help </li>
<li> Contact </li>
</ul>
</div>
<div class="col-md-6 px-4">
<ul>
<li> Cab Faciliy </li>
<li> Fax </li>
<li> Terms </li>
<li> Policy </li>
<li> Refunds </li>
<li> Paypal </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 ">
<h6> Newsletter</h6>
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
<p>That's technology limitation of LCD monitors</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
Then, my method is:
1- To make a new wp page. Named for example: Index.
2-Make a page-index.php and I code there calling the header and the footer.
U can se at arvanjobs.com. I made a page-index.php, and I code this: (and works fine.)
<?php get_header(); ?>
<div class="main-container">
<div class="item1 cnt">
<video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2 cnt">
<p style="font-size:50px; color:white;"> Join Us! </P>
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:transparent; border-radius: 3px; color:yellow; font-size:50px; border: 2px solid yellow;">Warning</button>
</div>
<div class="item3 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" />
</div>
<div class="item4 cnt">
</div>
<div class="item5 cnt">
<h4>WHO WE ARE?</h4>
<p>
ArvanJobs is above all peace of mind. It is a new way
of working, of traveling, of training, of advancing in
your career. Whether you are a company looking for
workers or you are looking for a new job
opportunity, ArvanJobs will always be by your side,
selecting the best workers and the best companies
that will boost your career.
</p>
</div>
<div class="item6 cnt">
<h4>WHY WORK WITH US?</h4>
<p>
For our personal treatment, our advice, and above
all for our experience working in hotels in
numerous countries.
Because we know how difficult it is to take that step
of daring to work in a foreign country. Because we
know how hard it is to find the right staff.
</p>
</div>
<div class="item7 cnt">
</div>
<div class="item8 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan3.jpg">
</div>
<div class="item9 cnt">
<h4>HOW WE WORK?</h4>
<p>
All candidates are interviewed by staff who have
worked in hotels, not offices
The same happens with our clients who have to
satisfy a series of criteria and guarantees for the
worker to work with us.</p>
</div>
<div class="item10 cnt">10</div>
<div class="item11 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
</div>
<div class="item12 cnt">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan4.jpg" />
</div>
<div class="item13 cnt">
<!--<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan3.jpg" />-->
</div>
</div>
<?php get_footer(); ?>
As u can see at arvanjobs.com, the header is at top, the footer at bottom...well, nice. Then I do THE SAME EXACTLY THING, I make a wp page called "Candidates", then I make a .php called "page-candidates.php" with this:
<?php get_header(); ?>
<body>
<div class="bg">
<section class="form">
<div class="formwrap">
<form method="POST" id="Form" action="https://www.arvanjobs.com/wp-content/themes/astra/registered.php" enctype="multipart/form-data">
<h4>My short CV</h4>
<label for="lastname">Last name:</label>
<input class="controls" type="text" name="lname" id="lname" placeholder="Ex: Sorribes" required="">
<label for="name">Name:</label>
<input class="controls" type="text" name="name" id="name" placeholder="Ex: Pablo" required="">
<label for="bcountry">Country of birth:</label>
<select id="bcountry" name="bcountry" class="date" placeholder="Ex: Spain" required="">
</select>
<div>
<label for="email">Email:</label>
<input class="controls" type="email" name="email" id="email" placeholder="Ex: pablo#sorribes.com" required="">
</div>
<div>
<label for="phone">Phone number</label><br>
<input type="tel" id="phone" name="phone" maxlength="12" required="">
</div>
<!-- country codes (ISO 3166) and Dial codes. -->
<select name="countryCode" id="prefix">
<option data-countrycode="ES" value="34" selected="">ES (+34)</option>
<option data-countrycode="US" value="1">USA (+1)</option>
<optgroup label="Other countries">
</optgroup>
</select>
<div>
<label for="date">Birthday</label>
<input class="date" type="date" name="date" id="date" required="">
</div>
<label for="jcountries">Where do you wanna work?:</label>
<div class="jcountries" id="countrys">
<div class="left">
<div>
<input type="checkbox" id="ireland" name="jcountries[]" value="ireland">
<label for="ireland">Ireland</label>
</div>
<div>
<input type="checkbox" id="iceland" name="jcountries[]" value="iceland">
<label for="iceland">Iceland</label>
</div>
</div>
</div>
<label for="jobs">What kind of job do you want?:</label>
<div class="jcountries" id="job">
<div class="left">
<div>
<input type="checkbox" id="reception" name="jobs[]" value="reception">
<label for="reception">Reception</label>
</div>
<div>
<input type="checkbox" id="housekeeping" name="jobs[]" value="housekeeping">
<label for="housekeeping">Housekeeping</label>
</div>
</div>
<div class="right right1">
<div>
<input type="checkbox" id="chefs" name="jobs[]" value="chefs">
<label for="chefs">Chefs</label>
</div>
<div>
<input type="checkbox" id="waiters" name="jobs[]" value="waiters">
<label for="waiters">Waiters</label>
</div>
</div>
</div>
<label for="cv">Send your CV</label>
<div class="scv">
<input type="file" id="cv" name="cv" accept=".pdf, .doc, .docx, .docm, .odt, .odf, .odt, .ods, .odp" required="">
</div>
<input class="botons" type="submit" value="Send" onclick="location.href='http://www.google.com'">
</form>
<!--<div class="alert alert-info" style="display: none;"></div>-->
<script src="https://www.arvanjobs.com/wp-content/themes/astra/assets/js/script.js"></script>
<!--<script>
/**Make the plugin location-aware*/
function getIp(callback) {
fetch('https://ipinfo.io/json?token=<your token>', { headers: { 'Accept': 'application/json' }})
.then((resp) => resp.json())
.catch(() => {
return {
country: 'us',
};
})
.then((resp) => callback(resp.country));
}
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
/**this is the plugin code that converts the selected country code and user input into the international format.*/
const info = document.querySelector(".alert-info");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "";
info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
}
</script>-->
</div>
</section>
</div>
</body>
<?php get_footer(); ?>
U can see at arvanjobs.com/candidates what happen. The footer goes crazy. I cant understand why this happen. Its not because the display grid coz I tried to make a grid 1x1 to put in the form there, but the footer stay like it is absolute positioned :/
And this is my css
* {
font-family: "forum";
font-weight:bold;
}
/*GRID CSS*/
/*GRID header*/
.header-container {
display:grid;
background-color:red;
grid-template-columns: 50% 50%;
font-family: "forum";
font-weight: bold;
}
.header-container div{
text-align:center;
font-family: "forum";
font-weight: bold;
z-index:100000000000000;
}
/*GRID index*/
.main-container {
top:0;
display:grid;
background-image:url('http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/wal.png');
background-attachment:fixed;
grid-template-columns: 50% 50%;
box-sizing:border-box;
z-index:-1;
}
.main-container > * {
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.main-container div {
color:black;
border: px solid black;
}
.main-container video {
display:block;
width:100%;
height:100%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
z-index:10000;
}
.main-container h4 {
color:#edbd87;
}
.main-container p {
color:#1f1f1f;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
.item2{
right:0;
left:0;
top:300px;
bottom:0;
position:absolute;
grid-column: 1 / 3;
display:inline-block;
z-index:1000000;
}
.item3{
background:#e0e0e0;
grid-column: 1 / 3;
height:40vh;
border-bottom:1px solid #967b5d;
z-index:100000;
}
.item4 {
background-color:#e0e0e0;
padding:30px;
z-index:9;
width:100%;
height:900px;
}
.item4 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item5{
height:900px;
background-color:#e0e0e0;
align-content:start;
align-items:start;
justify-self:start;
justify-content:right;
justify-items:right;
object-position: right;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
align-content:center;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item5 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item5 p{
margin-top:10px;
font-size: 120%;
}
.item5 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item6{
height:900px;
background-color:#e0e0e0;
align-content:end;
align-items:end;
justify-self:end;
justify-content:right;
justify-items:right;
object-position: right;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
align-content:center;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item6 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item6 p{
margin-top:10px;
font-size: 120%;
}
.item6 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item7 {
height:900px;
padding:30px;
z-index:10;
width:100%;
z-index:10000000;
}
.item7 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item8 {
top:110px;
right:309px;
z-index:1888;
width:100%;
height:900px;
background-color:#e0e0e0;
align-content:start;
align-items:start;
justify-self:start;
justify-content:right;
justify-items:right;
object-position: right;
}
.item8 img{
margin-left:140px;
display:block;
width:71%;
height:63%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
.item9{
height:900px;
background-color:#e0e0e0;
align-items:start;
align-content:start;
justify-self:start;
justify-content:start;
justify-items:start;
object-position: left top;
padding:100px;
width:80%;
display: inline-grid;
z-index:9;
box-sizing:border-box;
justify-content:center;
justify-items:center;
align-items:center;
z-index:1000;
}
.item9 * {
width:80%;
display:flex;
margin-right:50px;
margin-left:30px;
font-weight:bold;
}
.item9 p{
margin-top:10px;
font-size: 120%;
}
.item9 h4{
display:flex;
justify-content:center;
align-self:center;
margin-top:20px;
font-weight:bold;
font-size: 340%;
}
.item10{
z-index:100000000;
background-color: orange;
grid-column: 1 / 3;
}
.item11 {
top:110px;
right:309px;
position:fixed;
padding:30px;
z-index:11;
width:100%;
height:800px;
}
.item11 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
.item12 {
top:110px;
left:309px;
position:fixed;
padding:30px;
z-index:9;
width:100%;
height:800px;
z-index:100;
}
.item12 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
}
.item13 {
top:110px;
right:309px;
position:fixed;
padding:30px;
z-index:16;
width:100%;
height:800px;
}
.item13 img{
padding:15px;
justify-self:center;
display:block;
width:35%;
height:66%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:1000;
}
/*CSS*/
html, body {
margin: 0;
padding: 0;
width: 100%;
height:100%;
font-family: "forum";
font-weight: bold;
}
header {
position:absolute;
width: 100%;
height:80px;
z-index:100000000000000;
}
}
.content {
width: 100%;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position:fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-family:"Forum";
font-weight: bold;
font-size: 25px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: transparent;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
login
.loginform {
position:relative;
}
/*footer*/
.w-50 {
width: 100%!important;
}
.bg-grey {
background: #edbd87;
}
.logo-footer {
margin-bottom: 40px;
}
footer {
z-index:1000000000;
position:relative;
color: #1f1f1f;
}
footer p, a {
font-weight:bold;
font-size: 12px;
font-family: 'Forum', sans-serif;
}
footer h6 {
font-family: 'Forum', serif;
margin-bottom: 40px;
position: relative;
font-weight:bold;
}
footer h6:after {
position: absolute;
content: "";
background: #1f1f1f;
width: 12%;
height: 1px;
left: 0;
bottom: -20px;
}
.btn-footer {
font-weight:bold;
color: #1f1f1f;
text-decoration: none;
border: 1px solid;
border-radius: 43px;
font-size: 13px;
padding: 7px 30px;
line-height: 47px;
}
.btn-footer:hover {
font-weight:bold;
text-decoration: none;
}
.form-footer input[type="text"] {
font-weight:bold;
border: none;
border-radius: 16px 0 0 16px;
outline: none;
padding-left: 10px;
}
::placeholder {
font-weight:bold;
font-size: 10px;
padding-left: 10px;
font-style: italic;
}
.form-footer input[type="button"] {
border: none;
background:#1f1f1f;
margin-left: -5px;
color: #fff;
outline: none;
border-radius: 0 16px 16px 0;
padding: 2px 12px;
}
.social .fa {
font-weight:bold;
color: #1f1f1f;
font-size: 22px;
padding: 10px 15px;
background: #967b5d;
}
footer ul li {
font-weight:bold;
list-style: none;
display: block;
}
footer ul {
padding-left: 0;
}
footer ul li a{
text-decoration: none;
color: #1f1f1f;
text-decoration:none;
}
a:hover {
text-decoration: none;
color: #967b5d !important;
}
.logo-part {
font-weight:bold;
border-right: 1px solid #1f1f1f;
height: 100%;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#media all and (max-width: 1400px) {
.main-container div {
grid-column: 1 / span 3;
}
}
/*form*/
/*fondo*/
.bg {
height:600px;
position:absolute;
width:100%
word-wrap: break-word;
background-image:url(' https://www.arvanjobs.com/wp-content/uploads/2022/02/manitas.jpg');
background-position:center;
background-attachment:fixed;
opacity:70%;
padding-top:20px;
padding-bottom:40px;
z-index:-1;
display:grid;
grid-template-columns: 100%;
box-sizing:border-box;
z-index:-1;
height:100vh;
}
.bg2 {
position:relative;
width:100%
word-wrap: break-word;
background-image:url(' https://www.arvanjobs.com/wp-content/uploads/2022/02/manitas.jpg');
background-attachment: fixed;
opacity:70%;
padding-top:20px;
padding-bottom:40px;
z-index:-1;
}
.formwrap {
height:600px;
border:1px solid #967b5d;
padding:30px;
border-radius: 4px;
background: #fff;
}
Ive tried too to make a template for solve this. I made this blank template:
<?php /* Template Name: Blank*/ ?>
<?php
get_header();
?>
<?php
get_template_part( 'template-parts/content/content-page' );
?>
</div>
<?php
get_footer();
?>
Well, if i choose this template when I make a new wp page, it will only show the header and the footer, no content. (for every pages) I have to choose "Default template" for things working. What happen here? Why at page-index.php the footer is working fine, but when i do the same with other page the footer stay at top? Any suggestion? Thanks!
When I try to display content from another blade template, it will only show certain data on the webpage. What I want is inside this page, the content from test.blade.php together with the button, when click will pop up a form(I don't want the test.blade.php content to be inside). But whenever I try to do it, only certain information is shown and when I view page source, all the data has already been loaded. I have asked this question before already and someone told me it was the fault of my css, but I when I try to look at it, I don't really see anything which is causing this to happen. Can someone help me please? Thanks in advance!
I will put the screenshot here first in the question.
This is what it is suppose to look like where it will have a scroll down bar, and below there should be a button for the popup form.
But this is what I am getting (I have checked that all the data are already loaded)
elements.css (here is the css that I used)
#abc {
width: 100%;
height: 100%;
opacity: .95;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: auto;
}
img#close {
position: absolute;
right: -14px;
top: -14px;
cursor: pointer;
}
div#popupContact {
position: absolute;
left: 50%;
top: 17%;
margin-left: -202px;
font-family: 'Raleway', sans-serif;
}
form {
max-width: 300px;
min-width: 250px;
padding: 10px 50px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
background-color: #fff;
}
p {
margin-top: 30px;
}
h2 {
background-color: #FEFFED;
padding: 20px 35px;
margin: -10px -50px;
text-align: center;
border-radius: 10px 10px 0 0;
}
hr {
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
}
input[type=text] {
width: 82%;
padding: 10px;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
}
#name {
background-image: url(../images/name.jpg);
background-repeat: no-repeat;
background-position: 5px 7px;
}
#email {
background-image: url(../images/email.png);
background-repeat: no-repeat;
background-position: 5px 7px;
}
textarea {
background-image: url(../images/msg.png);
background-repeat: no-repeat;
background-position: 5px 7px;
width: 82%;
height: 95px;
padding: 10px;
resize: none;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
margin-bottom: 30px;
}
#submit {
text-decoration: none;
width: 100%;
text-align: center;
display: block;
background-color: #FFBC00;
color: #fff;
border: 1px solid #FFCB00;
padding: 10px 0;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
span {
color: red;
font-weight: 700;
}
button {
width: 10%;
height: 45px;
border-radius: 3px;
background-color: #cd853f;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 18px;
cursor: pointer;
}
evaltest.blade.php
<html>
<head>
<title>Popup form </title>
<meta name="robots" content="noindex, nofollow">
<link href="{{ asset('css/elements.css') }}" rel="stylesheet">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43981329-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<!-- body starts here -->
<body id ="bdy" style="overflow:hidden;">
<div id="abc">
<!-- Popup div starts here -->
<div id="popupContact">
<!-- contact us form -->
<form class="form-horizontal" method="post" action="{{ url('/evaltest/'.$data0->id) }}">
{{ csrf_field() }}
<img id ="close" src="{{ URL::to('/image') }}/3.png" onclick ="div_hide()">
<input type="hidden" name="user_id" value="{{$data0->id}}">
<div class="form-group">
<label class="col-md-2"><b>Recommendation:</b></label>
<div class="col-md-6">
<input type="radio" id ="recommendation" name="recommendation" value="Yes"> Yes<br>
<input type="radio" id ="recommendation" name="recommendation" value="No"> No<br>
</div>
</div>
<div class="form-group">
<div class="col-md-6-offset-2">
<input id= "submit" type="submit" href="javascript: check_empty()" class="btn btn-primary" value="Save">
</div>
</div>
</form>
</div>
<!-- Popup Div Ends Here -->
// #include('test')
//it will show all data if I were to put here but I don't want to put it together with the popup form
</div>
<!-- Display Popup Button -->
//this will show a few info but no button
#include('test')
<h1>Click Button to Evaluate</h1>
<button id="popup" onclick="div_show()">Popup</button>
<script src="{{ asset('/js/my_js.js') }}"></script>
//this will show even lesser info but button is shown
//#include('test')
</body>
</html>
test.blade.php (there are more information inside but I only put some as an example of how I got the information)
<div class="container">
#foreach ($data as $object)
<b>Name: </b>{{ $object->Name }}<br><br>
<b>Alias: </b>{{ $object->Alias }}<br><br>
<b>Email: </b>{{$object->Email}}<br><br>
#endforeach
</div>
I have tried removing some of the things inside the css but nothing happen, I even try removing those with the position: fixed and also added .container but it still doesn't work.
myjs.js
// function to display popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
// function to hide popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
I have figured it out how to show my data is that I have to remove the style="overflow:hidden;" part so that it will work
So Im working on a project for a client and ran into an issue with Border-Radius + Bootstrap,
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is after adding bootstrap to make it more responsive on mobile, well after doing that this is what the top now looks like;
This is what it looks like when I remove the Bootstrap code;
This is the code with out bootstrap on the image
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is my css
/* Top Header */
.header {
padding-top: 1.5em;
border-top: solid .3em rgba(46, 204, 113, 1.0);
}
.top-nav {
margin-top: 1.2em;
margin-right: auto;
margin-bottom: .8em;
margin-left: auto;
width: 30em;
}
.logo {
float: left;
width: 5em;
height: 5em;
border: solid .1em rgba(46, 204, 113, 1.0);
border-radius: 50%;
}
.social-media-top {
float: right;
padding-bottom: 1em;
}
.social-media-top h1 {
margin: 0;
padding: 0;
color: #41eb71;
font-weight: 100;
font-size: 2em;
align-content: center;
}
.social-media-top h1 span {
color: #41eb71;
text-transform: capitalize;
font-weight: 600;
}
.social-media-top li {
display: inline-block;
}
.social-media-top li i {
display: inline-block;
width: 2em;
height: 2em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(46, 204, 113, 1.0);
color: white;
text-align: center;
line-height: 2em;
}
Previously i have added color red to my css code. However, i have deleted the code. But the red still remain on the web. What should i do? This is the html on my php file.
echo " <div class='toship-info'>
<div class='toship-header'>Deliver to: </div>
<div class='toship-content'>
<div class='toship-att'>Name : </div>
<div class='toship-data'>$ship_name</div>
<div class='toship-att'>Address : </div>
<div class='toship-data'>$ship_address</div>
<div class='toship-att'>Contact No : </div>
<div class='toship-data'>$ship_contact</div>
<div class='toship-att'>Email : </div>
<div class='toship-data'>$ship_email</div>
<br><strong>*If there is any inquiries please contact our Apex Store at
+6(04)-3901025. </strong></br>
</div>
</div>
";
This is my css file. How should i change it?
.toship-info{
width: 600px;
margin: auto;
}
.toship-header{
background: rgb(63,63,63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
padding-left: 15px;
}
.toship-content{
background: rgb(238,238,238);
height: 130px;
padding-top: 10px;
}
.toship-att{
width: 100px;
text-align: left;
font-size: 12px;
font-weight: bold;
padding: 3px;
float: left;
box-sizing: border-box;
}
.toship-data{
width: 500px;
padding: 3px;
font-weight: bold;
font-size: 12px;
float: left;
box-sizing: border-box;
}
.toship-item{
width: 600px;
margin: auto;
margin-bottom: 20px;
}
.toship-item-header{
background: rgb(63,63,63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
padding: 0;
margin: 0;
[![enter image description here][1]][1]}
Try to open in other browser, or if you are using any framework or cms then clear view cache.
Your browser probably cached the page. Try to clean your history/cache. How to do this depends on the browser you are using. For example, in Chrome you will go to History > History > Clear navigation data... > Image and files stored in cache. Also, as #rrd said in comments, in most browsers (Chrome included) Ctrl+R will reload the actual page and not the cached one.
Ctrl-F5 will do the trick. It's in the browser cache. Ctrl-F5 will ask for a complete new request and hence avoid the cache.
When i use the below code i don't see any red text
<style>
.toship-info {
width: 600px;
margin: auto;
}
.toship-header {
background: rgb(63, 63, 63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
padding-left: 15px;
}
.toship-content {
background: rgb(238, 238, 238);
height: 130px;
padding-top: 10px;
}
.toship-att {
width: 100px;
text-align: left;
font-size: 12px;
font-weight: bold;
padding: 3px;
float: left;
box-sizing: border-box;
}
.toship-data {
width: 500px;
padding: 3px;
font-weight: bold;
font-size: 12px;
float: left;
box-sizing: border-box;
}
.toship-item {
width: 600px;
margin: auto;
margin-bottom: 20px;
}
.toship-item-header {
background: rgb(63, 63, 63);
color: white;
font-size: 14px;
font-weight: bold;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
padding: 0;
margin: 0;
</style>
</head>
<body>
<div class='toship-info'> "
<div class='toship-header'>Deliver to: </div>
<div class='toship-content'>
<div class='toship-att'>Name : </div>
<div class='toship-data'>$ship_name</div>
<div class='toship-att'>Address : </div>
<div class='toship-data'>$ship_address</div>
<div class='toship-att'>Contact No : </div>
<div class='toship-data'>$ship_contact</div>
<div class='toship-att'>Email : </div>
<div class='toship-data'>$ship_email</div>
<br>
<strong>*If there is any inquiries please contact our Apex Store at
+6(04)-3901025. </strong>
<br />
</div>
</div>
</body>
Please make sure you markup your HTML properly..
was incorrectly marked up
In the below code i have placed the controller.the actual result is ligin is in center position but it is in the bottom.My expected result is login should come in center of the page.pls help me to do this.
Controller:
<html>
<head>
</head>
<title>login_form</title>
<BODY onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload=""><div class="container">
<div class="row">
<div class="span4 logo">
<img src="<?php echo base_url('img/logosl.png'); ?>" style="margin-bottom:7px; margin-top:7px;"/>
</div>
<center ><div id="login_form" >
<h1>Login!</h1>
<form action="<?php echo base_url(); ?>index.php/login/validate_credentials" method="post" >
<input type="text" name="username" required placeholder="username" style="height: 25px;" value="" />
<input type="text" name="password" required placeholder="password" style="height: 25px;" value="" />
<input type="text" name="college_name" required placeholder="college_name" style="height: 25px;" value="" />
<input type="submit" name="submit" value="Login" class="btn-success btn" />
Create Account
</form>
</div></center><!-- end login_form-->
<?php $this->load->view('includes/header'); ?>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style1.css" />
<?php $this->load->view('includes/footer'); ?>
</body>
</html>
css
body {
background:#FFFFFF;
margin: 0;
padding: 0;
font-family: arial;
}
#login_form {
width: 300px;
background: #f0f0f0 url(../img/login_bg.jpg) repeat-x 0 0;
border: 1px solid white;
margin: 250px auto 0;
padding: 1em;
-moz-border-radius: 3px;
}
h1,h2,h3,h4,h5 {
margin-top: 0;
font-family: arial black, arial;
text-align: center;
}
input[type=text], input[type=password] {
display: block;
margin: 0 0 1em 0;
width: 280px;
border: 5px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
padding: 1em;
}
input[type=submit], form a {
border: none;
margin-right: 1em;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
background: #348075;
color: white;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #287368;
cursor: pointer;
}
/* Validation error messages */
.error {
color: #393939;
font-size: 15px;
}
fieldset {
width: 300px;
margin: auto;
margin-bottom: 2em;
display: block;
}
/* FOR FUN */
h1 {
text-shadow: 0 1px 0 white;
}
/* Not necessary. Just the "tutorial created by" stuff at the bottom */
#tutInfo {
background: #e3e3e3;
border-top: 1px solid white;
position: absolute;
bottom: 0;
width: 100%;
padding: .7em .7em .7em 2em;
}
You are missing < / div>
<div class="row">
<div class="span4 logo">
<img src="<?php echo base_url('img/logosl.png'); ?>" style="margin-bottom:7px; margin-top:7px;"/>
</div>
**</div>**