Jump to content
  • 0

How to change the background?

Cherry

Asked by Cherry,

 Share

Question

Cherry Contributor

Cherry

Posted
Posted

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 &times;</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;
}

image.thumb.png.c9c06852e8fdbbb26161717803d32c7c.png

Admin Login Page.txt

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Queso Collaborator

Queso

Posted
Posted

Hi @Cherry,

I am also amazed on W3.CSS as it is a quality alternative to Bootstrap. 

One thing I noticed on your HTML code is that there is no actual class names on the divs under "<!-- Page Content -->". In order to have a desired output just like what you modified on the inspection tab, what I did on your code was I added a <head> element, an internal CSS, and a class name to specify those divs.

Below is my version of your code. Codes added are highlighted using bold:
==================================================================================================================

<!DOCTYPE html>
<html>
<head>
<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">

<style>

.ContainerInner, .ContainerOuter, .ButtonContainer, .ButtonContainer:hover{
    color: #fff!important;
    background-color: #061551!important;
}
</style>
</head>

<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 &times;</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="ContainerOuter w3-teal">
  <button class="ButtonContainer w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
 
  <div class="ContainerInner 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>

==================================================================================================================
Below is the output: 
image.thumb.png.970068c7ca82b9d69a7ac0b3ee431234.png


I checked this using Visual Studio source-code editor. I hope this helps!

Link to comment
Share on other sites
  • 0
autonumber Community Regular

autonumber

Posted
Posted

Hi! In addition to the previous answers, since you have the styles of your web page in HTML files, you have to add it to the Header of the page so that they will be applied throughout. Additionally, I found some links on how to customize your DataPage or webpage styles.

https://howto.caspio.com/tech-tips-and-articles/common-customizations/tech-tip-5-ways-to-customize-the-look-of-your-datapages/

https://www.digitalocean.com/community/tutorials/how-to-style-the-body-of-a-website-with-css

https://www.digitalocean.com/community/tutorials/how-to-add-and-style-a-title-to-your-webpage-with-html

https://www.w3schools.com/tags/tag_title.asp

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to question listing
×
×
  • Create New...