Hi everyone, I customized my Datapage using the code of w3schools. When I tried to modify it, to change the background of the 'Title' it will not be change. This is my modified code. This is working, the only problem is the background of the 'Title'.
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>
********Note**********
I modified this in the inspection tab. This should be the output that I wanted. How can I add this code? Need help from the expert. Looking forward on your response. Thank you so much
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Question
Cherry
Hi everyone, I customized my Datapage using the code of w3schools. When I tried to modify it, to change the background of the 'Title' it will not be change. This is my modified code. This is working, the only problem is the background of the 'Title'.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Search Database</a>
<a href="#" class="w3-bar-item w3-button">Create New Record</a>
<a href="#" class="w3-bar-item w3-button">Edit Record</a>
<a href="#" class="w3-bar-item w3-button">Delete Record</a>
<a href="#" class="w3-bar-item w3-button">Export Records</a>
<a href="#" class="w3-bar-item w3-button">Help Menu</a>
<a href="#" class="w3-bar-item w3-button">Support Menu</a>
<a href="#" class="w3-bar-item w3-button">Create User Account</a>
<a href="#" class="w3-bar-item w3-button">Log Off</a>
</div>
<!-- Page Content -->
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1 style="text-align: center; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 27px; font-weight: bold; margin: 0px; padding: 1px 0px 0px 0px;">SECURITY ADMINISTRATOR MENU</h1>
<h2 style="text-align: center; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: normal; margin: 0px; padding: 1px 0px 0px 0px;">Welcome, [@authfield:All_user_Roles_table_Name] </h2>
<br>
</div>
</div>
<img src="https://static.wixstatic.com/media/0bdded_ece8bd91962a4216a7919bce1293f21c~mv2.png" alt="Heart" style="width:100%">
<div class="w3-container">
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>
********Note**********
I modified this in the inspection tab. This should be the output that I wanted. How can I add this code? Need help from the expert. Looking forward on your response. Thank you so much
.w3-teal, .w3-hover-teal:hover {
color: #fff!important;
background-color: #061551!important;
}
Admin Login Page.txt
Link to comment
Share on other sites
4 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.