Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Sir Osis of Liver on May 13, 2021, 05:17:29 PM

Title: CSS in login window
Post by: Sir Osis of Liver on May 13, 2021, 05:17:29 PM
Adding register link to login window header in Login.template.php, link works but css classes are not applied -



<h3 class="catbg">
<span class="ie6_header floatleft"><img src="', $settings['images_url'], '/icons/login_sm.gif" alt="" class="icon" /> ', $txt['login'], ' or <a href=" ',$scripturl, '/index.php?action=register">Register</a></span>
</h3>



    (https://www.thekrashsite.com/pics/idk.gif)
Title: Re: CSS in login window
Post by: Sir Osis of Liver on May 14, 2021, 12:50:52 PM

    (https://www.thekrashsite.com/pics/hairpull1.gif)

Title: Re: CSS in login window
Post by: shadav on November 23, 2021, 02:40:53 AM
Quote from: jimjeans on November 23, 2021, 02:18:11 AM<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}
</style>
</head>
<body>

<h2>Login Form</h2>

<form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>
       
    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

</body>
</html>
This is the whole code for the new window login page, I am using this code for my website. Use this.
what version of smf is this for?

and why would you need the html, header, body, and all of that?
wouldn't it be better to put the css into the index.css file

on second thought, is this even for smf?

lol I know it's been 6 months but did you ever figure it out sir osis?
was it you forgot to clear your cache after implementing, maybe....?
Title: Re: CSS in login window
Post by: Kindred on November 23, 2021, 11:56:27 AM
@shadav -- was spam. action-page.php is not an SMF page and an html page/form is not php, which is what SMF uses.

So, I deleted it