I have a table called admin tickets. I have this situation were one of these mails, which are on the left of the screen is clicked. Then I want to fetch subject/text, to this mail.
For example I'm clicking qweqweqwe#wp.pl, and it gives me 123123123123123.
The table looks like this:
For now the page looks like this, because I'm iterating over the whole table to the end. This looks good. The only change I want to make is as I said, I want to click the mail on the left, and get subject/text of this mail.
How can I achieve it?
Html+php:
<?php
require_once '../../services/LoggedInUserService.php';
require_once '../../services/LoggedInAdminService.php';
require_once '../../db/connect.php';
$connect = new mysqli($host, $db_user, $db_password, $db_name);
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="../../css-images/style-admintickets.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"><img src="../../css-images/dingdog-logo.png"></ul>
<ul class="main-nav">
<li style="padding-left:10px">TICKETS</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
$subject = $row['subject']; ?>
<label> <input readonly id="fi" style="margin-top: 50px;" type="text" placeholder="Example"
name="custom" value="<?php echo $emailLogin; ?>"></label><br>
<div class="container" style='position:absolute;left:0px; top:0px;'>
<h1 id="avatar">Title:</h1>
<div class="title" style='position:absolute;left:0px; top:0px;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'><?php echo $subject; ?></h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style='margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;' rows="5" cols="10"><?php echo $row['text']; ?></textarea>
</div>
<?php }
} ?>
</article>
</section>
</header>
<footer>
<img src="../../social/instagram.png"/>
<img src="../../social/twitter-white-logo.png"/>
<img src="../../social/facebook.png"/>
</footer>
</body>
</html>
Css:
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign
{
margin-top: 200px;
margin-left: 80px;
font: Bold 57px/46px Georgia;
font-weight: bold;
color: black;
}
article input
{
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 120;
border-style: none;
padding: 5px;
width: 240px;
height: 39px;
background-color: black;
}
#fi
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 161px;
}
.container {
margin-top: 300px;
height: 447px;
width: 1028px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 480px;
}
.title {
margin-top: 35px;
width: 686px;
height: 37px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 145px;
}
#avatar
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
#tytul
{
font: Bold 20px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 8px;
margin-left: 25px;
}
#subject
{
font: Bold 25px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:50px;
margin-left: 50px;
}
.subjectContainer
{
margin-top: 100px;
height: 264px;
width: 683px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 170px;
border-radius: 20px;
margin-top: 300px;
}
#subjectTitle
{
text-align: left;
font: Regular 20px/24px Arial;
letter-spacing: 0;
color: #000000;
padding-left: 5px;
}
#textare{
height: 600px;
width: 683px;
}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 70%);
background-size:100% 3000px;
width: auto;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
margin-right: 20px;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 31px/15px Arial;
padding: 5px;
}
#logo img
{
margin-left: 350px;
text-align: center;
width: 500px;
}
#profilesign
{
margin-top: 350px;
font-size: 90px;
margin-left: 360px;
width: 900px;
}
#tytul
{
font: Bold 40px/24px Arial;
letter-spacing: 0;
color: #000000;
margin-top: 20px;
margin-left: 25px;
}
#subjectText
{
font-size: 40px;
}
#fi
{
width: 500px;
margin-top: 500px;
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: white;
background-color: black;
margin-left: 401px;
}
.container {
margin-top: 1000px;
height: 847px;
width: 1228px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border-radius: 20px;
margin-left: 20px;
}
.subjectContainer
{
margin-top: 150px;
height: 564px;
width: 883px;
background: transparent linear-gradient(180deg, #B4FFC5 0%, #9BCEA2 31%, #523A3A 100%) 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
border-radius: 20px;
}
#avatar
{
font: Bold 55px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 40px;
}
#subject
{
font: Bold 45px/12px Arial;
letter-spacing: 0;
color: #A37373;
margin-top:80px;
margin-left: 5px;
}
.title {
margin-top: 55px;
width: 686px;
height: 67px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #707070;
margin-left: 185px;
}
}
Hope This will help you
<section>
<article>
<p id="profilesign">Tickets:</p>
<?php
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$emailLogin = $row['emailLogin'];
echo '<form>
<label> <input id="fi" style="margin-top: 50px;" type="submit" placeholder="Example"
name="custom" value="'.$emailLogin.'"></label><br>
</form>';
}
}?>
<?php
if(isset($_GET['custom']))
{
$text = $_GET['custom'];
$result2 = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin = '".$text."' ");
if ($result2->num_rows > 0) {
while ($row = $result2->fetch_assoc()) {
echo ' <div class="container" style="position:absolute;left:0px; top:0px;">
<h1 id="avatar">Title:</h1>
<div class="title" style="position:absolute;left:0px; top:0px;">
<h1 id="tytul" style="position:absolute;left:0px; top:0px;">'.$subject.'</h1>
</div>
<h1 id="subject">Subject:</h1>
<textarea readonly id="subjectContainer"
style="margin-top: 100px;margin-left: 150px;position:absolute;left:0; top:0;font-size:30px; color:red ;height: 264px;
width: 683px;" rows="5" cols="10">'.$row['text'].'</textarea>
</div>';
}
}
}
?>
</article>
</section>
I would probably use Ajax for this, and then get the information that way. So when you click one of the mails on the left, then you make a Ajax call to another .php, like this.
Lets say the mail is this image.
echo'<img class="MAILyouWantToAttach" data-id = "'.$MAILyouWantToAttach.'" src = "../text.png">';
The Ajax success respons has to change the textareas content by its value.
$(document).on("click", ".Unflagging", function(){
var text= $(this).data("id");
$.ajax({
method: "post",
url: "AnotherFile.php",
data: { text: text},
success: function(data) {
$("#myTextarea").val(data);
},
error: function(data) {
alert("Error occurs!")
}
});
});
Then the other php file you want something like this, the echo is to print the text in the success area of the Ajax in the other .php.
$receiver = $_POST["text"];
$result = $connect->query("SELECT emailLogin,subject,text FROM tickets WHERE emailLogin= $receiver ");
while ($row = $result->fetch_assoc()) {
echo $row['text'];
}
This is just a guide, but i hope it helps you on your way to success.
My question1.blade.php
.privew {
margin-bottom: 20px;
}
.questionsBox {
display: block;
border: solid 1px #e3e3e3;
padding: 10px 20px 0px;
box-shadow: inset 0 0 30px rgba(000,000,000,0.1), inset 0 0 4px rgba(255,255,255,1);
border-radius: 3px;
margin: 0 10px;
}.questions {
background: #007fbe;
color: #FFF;
font-size: 22px;
padding: 8px 30px;
font-weight: 300;
margin: 0 -30px 10px;
position: relative;
}
.questions:after {
background: #1d68a7 no-repeat left 0;
display: block;
position: absolute;
top: 100%;
width: 9px;
height: 7px;
content: '.';
left: 0;
text-align: left;
font-size: 0;
}
.questions:after {
left: auto;
right: 0;
background-position: -10px 0;
}
.questions:before, .questions:after {
background: black;
display: block;
position: absolute;
top: 100%;
width: 9px;
height: 7px;
content: '.';
left: 0;
text-align: left;
font-size: 0;
}
.answerList {
margin-bottom: 15px;
}
ol, ul {
list-style: none;
}
.answerList li:first-child {
border-top-width: 0;
}
.answerList li {
padding: 3px 0;
}
.answerList label {
display: block;
padding: 6px;
border-radius: 6px;
border: solid 1px #dde7e8;
font-weight: 400;
font-size: 13px;
cursor: pointer;
font-family: Arial, sans-serif;
}
input[type=checkbox], input[type=radio] {
margin: 4px 0 0;
margin-top: 1px;
line-height: normal;
}
.questionsRow {
background: #dee3e6;
margin: 0 -20px;
padding: 10px 20px;
border-radius: 0 0 3px 3px;
}
.button, .greyButton {
background-color: #f2f2f2;
color: #888888;
display: inline-block;
border: solid 3px #cccccc;
vertical-align: middle;
text-shadow: 0 1px 0 #ffffff;
line-height: 27px;
min-width: 160px;
text-align: center;
padding: 5px 20px;
text-decoration: none;
border-radius: 0px;
text-transform: capitalize;
}
.questionsRow span {
float: right;
display: inline-block;
line-height: 30px;
border: solid 1px #aeb9c0;
padding: 0 10px;
background: #FFF;
color: #007fbe;
}
<body>
<div class="container">
<div class="privew">
<div class="questionsBox">
<div class="questions"><h1>Something</h1></div>
<div class="answerList"><h3>You are only allowed to select one option from the given below question</h3></div>
<div class="questions"><h4>Question 1</h4></div>
<div class="questions"><h3>Section 1</h3></div>
<ul class="answerList">
<li>
<label>
<input type="radio" name="answerGroup" value="0" id="answerGroup_0">Yes</label>
</li>
<li>
<label>
<input type="radio" name="answerGroup" value="1" id="answerGroup_1">Rather yes</label>
</li>
<li>
</ul>
</div>
<div class="questionsBox">
<div class="questions"><h3>Section 2</h3></div>
<ul class="answerList">
<li>
<label>
<input type="radio" name="answerGroup" value="2" id="answerGroup_2">Yes</label>
</li>
<li>
<label>
<input type="radio" name="answerGroup" value="3" id="answerGroup_3">Rather yes</label>
</li>
</ul>
</div>
<div class="questionsRow">Next<span>1 from 20</span>Previous</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
Hello All,
I'm trying to make a test page where users will select one radio button option and submit all selections in one instance in order to store back into the database. Also, questions are on different pages so basically user can move back and forth in order to edit its selection. There are 20 questions in total. I am unable to understand where shall I put my array logic. My best guess would be in a TestController. Please drop your valuable answer.
P.S : I am a beginner in Web Development and recently started to work on a Personality assessment website Project. However, due to less experience, I am facing a lot of challenges to achieve building it.
This problem is from my Laravel 6.x Project.
I expect to get all the selections stored in an array and passed to the database where I can further process it.
I'm trying to add new fields in moodle login page. I'm simply editing the index_form.html in login folder.
I'm using evolve theme and using moodle version 2.8
I want a dropdown field for administrator, teacher and student. If user selects administrator or teacher they have the fields of username and password, but if student is been selected one extra field of Adhar number is added for validation dynamically.
I have created the fields just need to add it to database and conditional logic. In the backend of user profile fields I've added a custom user fields under the name of Adhar Number whose short name I've kept as Adharno, lot of things more is to be done and I'm unable to find path, following is the link below with html code and css
www.sanskritiskills.com/assessment/login/index.php
Code block:
<?php
if ($show_instructions) {
$columns = 'twocolumns';
} else {
$columns = 'onecolumn';
}
if (!empty($CFG->loginpasswordautocomplete)) {
$autocomplete = 'autocomplete="off"';
} else {
$autocomplete = '';
}
if (empty($CFG->authloginviaemail)) {
$strusername = get_string('username');
} else {
$strusername = get_string('usernameemail');
}
?>
<div class="loginbox clearfix <?php echo $columns ?>">
<div class="loginpanel">
<?php
if (($CFG->registerauth == 'email') || !empty($CFG->registerauth)) { ?>
<div class="skiplinks"><a class="skip" href="signup.php"><?php print_string("tocreatenewaccount"); ?></a></div>
<?php
} ?>
<h2><?php print_string("login") ?></h2>
<div class="subcontent loginsub">
<?php
if (!empty($errormsg)) {
echo html_writer::start_tag('div', array('class' => 'loginerrors'));
echo html_writer::link('#', $errormsg, array('id' => 'loginerrormessage', 'class' => 'accesshide'));
echo $OUTPUT->error_text($errormsg);
echo html_writer::end_tag('div');
}
?>
<form action="<?php echo $CFG->httpswwwroot; ?>/login/index.php" method="post" id="login" <?php echo $autocomplete; ?> >
<div class="loginform">
<div class="form-input">
Select Role :
<select required>
<option value="Admin">Admin</option>
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
</select>
</div>
</div>
<div class="clearer"><!-- --></div>
<div class="form-label"><label for="username"><?php echo($strusername) ?></label></div>
<div class="form-input">
<input type="text" name="username" id="username" size="15" value="<?php p($frm->username) ?>" />
</div>
<div class="clearer"><!-- --></div>
<div class="form-label"><label for="password"><?php print_string("password") ?></label></div>
<div class="form-input">
<input type="password" name="password" id="password" size="15" value="" <?php echo $autocomplete; ?> />
</div>
<div class="clearer"><!-- --></div>
<div class="form-label"><label for="password">Adhar No.</label></div>
<div class="form-input">
<input type="password" name="Adhar Number" id="password" size="15" value="" <?php echo $autocomplete; ?> />
</div>
</div>
<div class="clearer"><!-- --></div>
<?php if (isset($CFG->rememberusername) and $CFG->rememberusername == 2) { ?>
<div class="rememberpass">
<input type="checkbox" name="rememberusername" id="rememberusername" value="1" <?php if ($frm->username) {echo 'checked="checked"';} ?> />
<label for="rememberusername"><?php print_string('rememberusername', 'admin') ?></label>
</div>
<?php } ?>
<div class="clearer"><!-- --></div>
<input type="submit" id="loginbtn" value="<?php print_string("login") ?>" />
<div class="forgetpass"><?php print_string("forgotten") ?></div>
</form>
<div class="desc">
<?php
echo get_string("cookiesenabled");
echo $OUTPUT->help_icon('cookiesenabled');
?>
</div>
</div>
<?php if ($CFG->guestloginbutton and !isguestuser()) { ?>
<div class="subcontent guestsub">
<div class="desc">
<?php print_string("someallowguest") ?>
</div>
<form action="index.php" method="post" id="guestlogin">
<div class="guestform">
<input type="hidden" name="username" value="guest" />
<input type="hidden" name="password" value="guest" />
<input type="submit" value="<?php print_string("loginguest") ?>" />
</div>
</form>
</div>
<?php } ?>
</div>
<?php if ($show_instructions) { ?>
<div class="signuppanel">
<h2><?php print_string("firsttime") ?></h2>
<div class="subcontent">
<?php if (is_enabled_auth('none')) { // instructions override the rest for security reasons
print_string("loginstepsnone");
} else if ($CFG->registerauth == 'email') {
if (!empty($CFG->auth_instructions)) {
echo format_text($CFG->auth_instructions);
} else {
print_string("loginsteps", "", "signup.php");
} ?>
<div class="signupform">
<form action="signup.php" method="get" id="signup">
<div><input type="submit" value="<?php print_string("startsignup") ?>" /></div>
</form>
</div>
<?php } else if (!empty($CFG->registerauth)) {
echo format_text($CFG->auth_instructions); ?>
<div class="signupform">
<form action="signup.php" method="get" id="signup">
<div><input type="submit" value="<?php print_string("startsignup") ?>" /></div>
</form>
</div>
<?php } else {
echo format_text($CFG->auth_instructions);
} ?>
</div>
</div>
<?php } ?>
<?php if (!empty($potentialidps)) { ?>
<div class="subcontent potentialidps">
<h6><?php print_string('potentialidps', 'auth'); ?></h6>
<div class="potentialidplist">
<?php foreach ($potentialidps as $idp) {
echo '<div class="potentialidp">' . $OUTPUT->render($idp['icon'], $idp['name']) . $idp['name'] . '</div>';
} ?>
</div>
</div>
<?php } ?>
</div>
CSS File which is available:
/* evolved CSS
-------------------------*/
#dock {background: #32352c; }
.arrow {color: #3d3d3d; }
.block .header h2 {color: #3d3d3d;}
.dir-rtl a.logo {
background: url([[setting:logo]]) no-repeat 100% 0;
display: block;
float: right;
}
.pagelayout-report .no-overflow {
overflow: auto;
}
.service {
display:block;
padding:10px;
margin: 10px;
text-align:left;
background-color: [[setting:marketboxcolor]];
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#fullbkg {
background: url([[setting:fpbkg]]) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*Frontpage Login*/
.wrap {
width:250px;
height: auto;
margin: auto;
margin-top: 10%;
margin-bottom: 3%;
}
.avatarlogin {
width: 100%;
margin: auto;
width: 65px;
border-radius: 100px;
height: 65px;
background: #000 ;
position: relative;
bottom: -15px;
}
.avatarlogin img {
width: 55px;
height: 55px;
border-radius: 100px;
margin: auto;
border:3px solid #fff;
display: block;
}
.wrap input {
border: none;
background: #fff;
font-family:Lato ;
font-weight:700 ;
display: block;
height: 40px;
outline: none;
width: calc(100% - 24px) ;
margin: auto;
padding: 6px 12px 6px 12px;
}
.bar {
width: 100%;
height: 1px;
background: #fff ;
}
.bar i {
width: 95%;
margin: auto;
height: 1px ;
display: block;
background: #d1d1d1;
}
.wrap input[type="text"] {
border-radius: 7px 7px 0px 0px ;
}
.wrap input[type="password"] {
border-radius: 0px 0px 7px 7px ;
}
.forgot_link {
color: #83afdf ;
color: #83afdf;
text-decoration: none;
font-size: 11px;
position: relative;
left: 193px;
top: -36px;
}
.wrap button {
width: 100%;
border-radius: 7px;
background: #b6ee65;
text-decoration: center;
border: none;
color: #51771a;
margin-top:-5px;
padding-top: 14px;
padding-bottom: 14px;
outline: none;
font-size: 20px;
border-bottom: 3px solid #307d63;
cursor: pointer;
}
/*.loginbox {
background: rgba(100,100,100,.1);
padding:50px;
-webkit-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-moz-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}*/
.loginbox h2{
color: #DBDBDB;
text-align:center;
}
.loginbox form a{
color: #fff;
}
.loginbox form{
color: #fff;
}
.loginbox p{
color: #fff;
}
/*.loginpanel .loginsub {
background: rgba(0,0,0,.6);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
margin: 10px;
}*/
.loginpanel .loginsub {
background: rgba(0,0,0,.8);
max-width:400px;
-webkit-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-moz-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:5px solid #fff;
margin: auto;
padding:20px;
}
.signuppanel .subcontent{
background: rgba(0,0,0,.6);
max-width:400px;
-webkit-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-moz-box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
box-shadow: 1px 0px 29px 14px rgba(255,255,255,0.6);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
margin: auto;
}
/* Alerts (aardvark) */
#page-header-generalalert {
clear:both;
display: block;
color:#ff9f00;
background-color:#fef8d2;
padding:8px 35px 8px 14px;
margin-bottom:20px;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
border:1px solid #fde6af;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#page-header-generalalert:before {
background-color: #ff9f00;
color: #FFFFFF;
display: block;
float: left;
font-family: FontAwesome;
font-size: 1.2em;
height: 1.4em;
margin-right: 0.5em;
margin-top: -0.15em;
margin-left: -0.5em;
padding-top: 0.2em;
text-align: center;
width: 1.7em;
content:"\f06a";
border-radius: 3px 3px 3px 3px;
text-shadow:none;
}
#page-header-snowalert {
clear:both;
display: block;
color:#3a87ad;
background-color:#d9edf7;
padding:8px 35px 8px 14px;
margin-bottom:20px;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
border:1px solid #bce8f1;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#page-header-snowalert:before {
background-color: #3a87ad;
color: #FFFFFF;
display: block;
float: left;
font-family: FontAwesome;
font-size: 1.2em;
height: 1.4em;
margin-right: 0.5em;
margin-top: -0.15em;
margin-left: -0.5em;
padding-top: 0.2em;
text-align: center;
width: 1.7em;
content:"\f069";
border-radius: 3px 3px 3px 3px;
text-shadow:none;
}
/*Google Fonts (Theme Essential)*/
/* #group Headings */
h1, h2, h3, h4, h5, h6,
.back-to-top,
.socials p,
#socialheading,
.forumpost .subject,
.block_login label {
font-family: "[[setting:headingfont]]", sans-serif;
}
/* #group Main Text */
body,
.block_login input[type="submit"] {
font-family: "[[setting:bodyfont]]", Arial, Helvetica, sans-serif;
font-size: [[setting:bodysize]];
font-weight: [[setting:bodyweight]];
}
/* #end */
/*Special thanks to Shaun Daubney (Theme Aardvark)
for the colored icons in the blocks.
*/
.block .header .title h2:before {
color: #FFFFFF;
display: block;
float: left;
font-family: FontAwesome;
font-size: 1.2em;
height: 1.3em;
margin-left: -0.5em;
margin-right: 0.5em;
margin-top: -0.2em;
padding-top: 0.2em;
text-align: center;
width: 1.5em;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
}
.block_news_items .header .title h2:before {
background-color: #29A294;
content:"\f0a1";
}
.block_navigation .header .title h2:before {
background-color: #f42941;
content:"\f0e8";
}
.block_calendar_upcoming .header .title h2:before,
.block_calendar_month .header .title h2:before {
background-color: #008ecd;
content:"\f073";
}
.block_course_list .header .title h2:before {
background-color: #ffce00;
content:"\f108";
}
.block_completionstatus .header .title h2:before,
.block_selfcompletion .header .title h2:before {
background-color: #76b900;
content:"\f0e4";
}
.block_rss_client .header .title h2:before {
background-color: #ff9500;
content:"\f09e";
}
.block_rss_plus .header .title h2:before {
background-color: #ff9500;
content:"\f09e";
}
.block_blog_menu .header .title h2:before {
background-color: #ff9500;
content:"\f02d";
}
.block_quiz_results .header .title h2:before {
background-color: #76b900;
content:"\f080";
}
.block_quiz_navblock .header .title h2:before {
background-color: #76b900;
content:"\f126";
}
.block_glossary_random .header .title h2:before {
background-color: #3d3d3d;
content:"\f0eb";
}
.block_book_toc .header .title h2:before {
background-color: #3d3d3d;
content:"\f02d";
}
.block_participants .header .title h2:before,
.block_online_users .header .title h2:before {
background-color: #92499e;
content:"\f0c0";
}
.block_html .header .title h2:before {
background-color: #eeeeee;
}
.block_section_links .header .title h2:before {
background-color: #f42941;
content:"\f02e";
}
.block_activity_modules .header .title h2:before {
background-color: #f42941;
content:"\f12e";
}
.block_comments .header .title h2:before {
background-color: #ffce00;
content:"\f075";
}
.block_settings .header .title h2:before,
.block_admin_bookmarks .header .title h2:before{
background-color: #004675;
content:"\f085";
}
.block_blog_tags .header .title h2:before,
.block_tags .header .title h2:before {
background-color: #ff9f00;
content:"\f02c";
}
.block_private_files .header .title h2:before {
background-color: #82cadd;
content:"\f114";
}
.block_block_mentees .header .title h2:before {
background-color: #3d3d3d;
content:"\f0c0";
}
.block_messages .header .title h2:before {
background-color: #ffce00;
content:"\f0e0";
}
.block_community .header .title h2:before {
background-color: #ffce00;
content:"\f0ac";
}
.block_login .header .title h2:before {
background-color: #3d3d3d;
content:"\f007";
}
.block_recent_activity .header .title h2:before {
background-color: #cee3ed;
content:"\f017";
}
.block_search_forums .header .title h2:before {
background-color: #ffce00;
content:"\f0e6";
}
.block_myprofile .header .title h2:before {
background-color: #f42941;
content:"\f007";
}
.block_adminblock .header .title h2:before {
background-color: #E0F52A;
content:"\f055";
}
.block_feedback .header .title h2:before {
background-color: #ffce00;
content:"\f087";
}
.block_flickr .header .title h2:before {
background-color: #ff3096;
content:"\f03e";
}
.block_youtube .header .title h2:before {
background-color: #f42941;
content:"\f145";
}
.block_course_badges .header .title h2:before {
background-color: #29a294;
content:"\f091";
}
.block_twitter_search .header .title h2:before {
background-color: #008ecd;
content:"\f099";
}
.block_heritage .header .title h2:before {
background-color: #3e647e;
content:"\f02d";
}
.block_lrc .header .title h2:before {
background-color: #3e647e;
content:"\f02d";
}
/*Social Wall*/
.format-socialwall .course-content ul.topics li.section {
border-bottom: 0px solid #ccc;
margin-top: 0;
}
/*.mform {
background-color: #f2f2f2;
padding: 10px;
border-radius: 10px;
}*/
.format-socialwall #section-2 .content {
background-color: #f7f7f7;
padding: 10px;
margin: 0px;
border: 3px solid #d4d4d4;
border-radius: 4px;
margin-top:15px;
margin-bottom: 15px;
-moz-box-shadow: 0px 0px 25px #ccc;
-webkit-box-shadow: 0 0 25px #ccc;
box-shadow: 0px 0px 25px #ccc;
}
.tl-post {
margin: 30px 0px 50px 0px;
padding:15px;
}
.tl-posttext {
background-color: #fff;
padding: 10px 10px 20px 10px;
border-radius: 10px 10px 0px 0px;
//border: 1px solid #ccc;
margin-top: 10px;
}
ul.section.tl-postattachment {
background-color: #fff;
padding: 5px 5px 5px 50px;
//border-left: 1px solid #ccc;
//border-right: 1px solid #ccc;
margin:0px;
}
.tl-text {
margin-left: 40px;
padding: 0 5px;
border: 2px solid #efefef;
padding: 10px;
-moz-box-shadow: 0px 0px 25px #e7e7e7;
-webkit-box-shadow: 0 0 25px #e7e7e7;
box-shadow: 0px 0px 25px #e7e7e7;
border-radius: 4px 4px 4px 4px;
}
/*.tl-text {
margin-left: 40px;
//border: none;
border: 1px solid #efefef;
background-color: #f7f7f7;
padding:7px;
border-radius: 10px 10px 10px 10px;
}*/
.tl-comments {
background-color: #f7f7f7;
padding:15px;
margin:0px;
}
.tl-comment {
padding-left:25px;
padding-top: 0px;
padding-bottom: 0px;
}
.tl-post-actionarea {
//border: 1px solid #ccc;
padding: 4px 4px 10px 4px;
//background: #F0F3F7;
//border-radius: 0px 0px 5px 5px;
}
.tl-timeago, .tl-counts {
font-size: 12px;
color: #666;
line-height: 15px;
padding-bottom: 5px;
}
.like {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.like:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.like:active {
border-top-color: #1b435e;
background: #1b435e;
}
.likenomore {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.likenomore:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.likenomore:active {
border-top-color: #1b435e;
background: #1b435e;
}
form.tl-commentform {
padding-top: 10px;
}
#postform .fitem .felement #id_submitbutton {
margin:0px;
}
Please help me out in this
I'm not 100% sure what you're asking here - Is it the backend element or is it the frontend element that you're struggling with?
The easiest way (not the best way) to achieve what you're doing here is to hide the extra field if the user selects a non-student role. This is just basic JavaScript.
The script you're looking for looks something like this:
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
if ($(this).attr("value") == "Student") {
$(".test").show();
}
if ($(this).attr("value") != "Student") {
$(".test").hide();
}
});
}).change();
});
And here's the Fiddle to see it in action.
HTH
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>**
My "Page [0]" text isn't centered on my webpage. Anyone know why? I could really use some help please.
Here is the html:
<html>
<head>
<title>Test Forum</title>
<link href="http://prime.programming-designs.com/test_forum/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="http://prime.programming-designs.com/test_forum//images/banner1.png" alt="" id="banner" />
<h1>Test Forums</h1>
<hr />
<div id="navi"><div id="naviheader">Boards</div>Testing<br />General Discussion<br />Video Games<br />Anime and Manga<br />BlazBlue<br />Shin Megami Tensei<br />Earthbound<br />Phantasy Star<br />Mobile Suit Gundam<br /></div>
<div class="postbox"><h4>CyanPrime</h4><hr />Welcome to the King's Gate BBS!</div>Page: [0]
</body>
</html>
Here is the CSS:
#charset "windows-1252";
body{
background-color: #EEFFF8;
color: #000000;
text-align: center;
}
.postbox{
text-align: left;
margin: auto;
background-color: #dbfef8;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
.stickypostbox{
text-align: left;
margin: auto;
background-color: #F5FFFA;
border: 1px solid #82FFCD;
width: 50%;
margin-top: 10px;
}
h4{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #9932CC;
}
h1{
color: #551A8B;
}
hr{
color: #82FFCD;
background-color: #82FFCD;
height: 1px;
border: 0px dotted #82FFCD;
}
a{
color: #7F00FF;
text-decoration: none;
}
a:hover{
color: #7F00FF;
text-decoration: underline;
}
form{
margin: 0px auto;
width: 50%;
}
#formdiv {
background-color:#dbfef8;
border:1px solid #82FFCD;
}
.fielddiv1{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 45%;
float: left;
}
.fielddiv2{
background-color: #f9f9f9;
border: 1px solid #DBFEF8;
vertical-align: middle;
width: 100%;
}
.fieldtext1{
width: 50%;
background-color: #82FFCD;
float: left;
}
.fieldtext2{
width: 100%;
background-color: #82FFCD;
}
#replydiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#admindiv{
width: 100%;
background-color: #DBFEF8;
margin: 10px 0 10px 0;
}
#navi{
width: 200px;
background-color: #dbfef8;
border: 1px solid #82FFCD;
text-align: left;
float: left;
}
#naviheader{
width: 100%;
background-color: #82FFCD;
}
#submitbutton{
border: 1px solid #82FFCD;
background-color: #DBFEF8;
color: #000000;
margin-top: 5px;
width: 100px;
height: 20px;
}
#banner{
border: 1px solid #82FFCD;
}
.postbar{
margin-right: 0px;
margin-top: 0px;
}
.bannedtext{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: #FF0000;
}
And here is the webpage so you can get some context (you'll notice that my "page [0]" is centered on the other boards, but not the index. http://prime.programming-designs.com/test_forum/
The float on the left is pushing the content to the right. It's still centred across the line, but it's not centred across the page. Adding a large bottom margin to .postbox illustrates this.
Centreing problem illustrated http://img169.imageshack.us/img169/9027/williamhtmlproblem.png
My suggestion would be to wrap the footer in a <div>. Either clear: both; (or just left), add margins on either end to compensate for the floated element, or give it position: absolute; left: 0; right: 0; to force centreing across the page.
Change:
Page: [0]
To (wrap it in a div with pager class):
<div class="pager">Page: [0]</div>
Change this in your CSS:
.postbox, .pager{
text-align: left;
margin: auto;
width: 50%;
margin-top: 10px;
}
.postbox {
background-color: #dbfef8;
border: 1px solid #82FFCD;
}
.pager {
text-align: center;
}
The reason this is happening is because your float is pushing over your content. You pager is coming straight off the body tag. In general, it's best to wrap plain text inside an html element.
You may want to revisit the structure of your page. Create a left column and a center column div or something like that.