customizing login

assets/css/style-login.css

@@ -0,0 +1,235 @@
+body {
+ background:#fff;
+ min-width:0;
+ color:#111;
+ font-family:"din-light",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+ font-size:0.9em;
+ line-height:1.4;
+}
+a {
+ color:#444;
+ font-family:"din-light",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+ transition-property:border,background,color;
+ transition-duration:.05s;
+ transition-timing-function:ease-in-out
+}
+a:active,
+a:hover {
+ color:#111;
+}
+a:focus {
+ color:#222;
+ box-shadow: none;
+}
+p {
+ line-height:1.5;
+}
+.login #login_error,
+.login .message,
+.login .success {
+ border-left:4px solid #333;
+ padding:12px;
+ margin-left:0;
+ margin-bottom:20px;
+ background-color:#fff;
+ box-shadow:none;
+}
+.login .success {
+ border-left-color:#69ed82;
+}
+.login #login_error {
+ border-left-color:#ff686e;
+}
+#loginform p.submit,
+.login-action-lostpassword p.submit {
+ border:none;
+}
+.login * {
+}
+.login .input::-ms-clear {
+}
+.login .pw-weak {
+}
+.login .button.wp-hide-pw {
+}
+.login .button.wp-hide-pw:hover {
+}
+.login .button.wp-hide-pw:focus {
+ border-color:#333;
+ box-shadow:none;
+ outline:none;
+}
+.login .button.wp-hide-pw:active {
+}
+.login .button.wp-hide-pw .dashicons {
+}
+.login .wp-pwd {
+}
+.no-js .hide-if-no-js {
+}
+.login form {
+ background:#fff;
+ border:none;
+ box-shadow: none;
+}
+.login form.shake {
+}
+@keyframes shake {
+}
+@media (prefers-reduced-motion:reduce) {
+ .login form.shake {
+  animation:none;
+  transform:none
+ }
+}
+.login-action-confirm_admin_email #login {
+}
+@media screen and (max-width:782px) {
+ .login-action-confirm_admin_email #login {
+ }
+}
+.login form .forgetmenot {
+}
+.login .button-primary {
+}
+.login .reset-pass-submit {
+}
+.login .reset-pass-submit .button {
+}
+.login .admin-email-confirm-form .submit {
+}
+.admin-email__later {
+}
+.login form p.admin-email__details {
+}
+.login h1.admin-email__heading {
+ border-bottom: none;
+ color:#333;
+}
+.admin-email__actions div {
+}
+.login .admin-email__actions .button-primary {
+}
+#login form p {
+}
+#login form p.submit {
+}
+.login label {
+}
+.login .forgetmenot label,
+.login .pw-weak label {
+}
+.login h1 {
+}
+.login h1 a {
+ background-size:84px;
+ background-position:center top;
+ background-repeat:no-repeat;
+ color:#3c434a;
+ height:84px;
+ font-size:20px;
+ font-weight:400;
+ line-height:1.3;
+ margin:0 auto 25px;
+ padding:0;
+ text-decoration:none;
+ width:84px;
+ text-indent:-9999px;
+ outline:0;
+ overflow:hidden;
+ display:block
+}
+#login {
+}
+.login #backtoblog,
+.login #nav {
+}
+.login #nav {
+}
+#backtoblog {
+}
+.login #backtoblog a,
+.login #nav a {
+ color:#333;
+}
+.login #backtoblog a:hover,
+.login #nav a:hover,
+.login h1 a:hover {
+ color:#111;
+}
+.login #backtoblog a:focus,
+.login #nav a:focus,
+.login h1 a:focus {
+ color:#222;
+}
+.login .privacy-policy-page-link {
+}
+.login form .input,
+.login input[type=password],
+.login input[type=text] {
+}
+.login input.password-input {
+ font-family:Consolas,Monaco,monospace
+}
+.js.login input.password-input,
+.js.login-action-rp form .input,
+.js.login-action-rp input[type=text] {
+}
+.login form .input,
+.login form input[type=checkbox],
+.login input[type=text] {
+ background:#fff;
+}
+.js.login-action-rp input[type=password],
+.js.login-action-rp input[type=text] {
+}
+.login #pass-strength-result {
+}
+body.interim-login {
+}
+.interim-login #login {
+}
+.interim-login.login h1 a {
+}
+.interim-login #login_error,
+.interim-login.login .message {
+}
+.interim-login.login form {
+}
+.screen-reader-text,
+.screen-reader-text span {
+}
+input::-ms-reveal {
+}
+#language-switcher {
+}
+#language-switcher select {
+}
+.language-switcher {
+}
+.language-switcher label {
+}
+.language-switcher label .dashicons {
+}
+.login .language-switcher .button-primary {
+}
+@media screen and (max-height:550px) {
+ #login {
+ }
+ #language-switcher {
+ }
+}
+@media screen and (max-width:782px) {
+ .interim-login input[type=checkbox] {
+ }
+ .interim-login input[type=checkbox]:checked:before {
+ }
+ #language-switcher label,
+ #language-switcher select {
+ }
+}
+@media screen and (max-width:400px) {
+ .login .language-switcher .button-primary {
+ }
+}
+

functions.php

@@ -177,3 +177,7 @@ if ( defined( 'JETPACK__VERSION' ) ) {
 	require get_template_directory() . '/inc/jetpack.php';
 }
 
+/**
+ * Functions to personalize login screen 
+ */
+require get_template_directory() . '/inc/login-functions.php';

inc/login-functions.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * Add a custom logo and styles in login page
+ *
+ * https://developer.wordpress.org/reference/functions/the_custom_logo/#comment-2037
+ */
+
+// https://codex.wordpress.org/Customizing_the_Login_Form#Change_the_Login_Logo
+function ofisuport_login_logo() { 
+ if ( has_custom_logo() ) :
+
+		$image = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' );
+		?>
+		<style type="text/css">
+			.login h1 a {
+				background-image: url("<?php echo esc_url( $image[0] ); ?>") !important;
+			}
+		</style>
+		<?php
+	endif;	
+}
+add_action( 'login_enqueue_scripts', 'ofisuport_login_logo' );
+
+function ofisuport_login_logo_url() {
+    return home_url();
+}
+add_filter( 'login_headerurl', 'ofisuport_login_logo_url' );
+
+function ofisuport_login_logo_url_title() {
+    return 'Your Site Name and Info';
+}
+add_filter( 'login_headertext', 'ofisuport_login_logo_url_title' );
+
+// https://codex.wordpress.org/Customizing_the_Login_Form#Styling_Your_Login
+function ofisuport_login_stylesheet() {
+    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/assets/css/style-login.css' );
+//    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/assets/css/style-login.js' );
+}
+add_action( 'login_enqueue_scripts', 'ofisuport_login_stylesheet' );

inc/template-functions.php

@@ -35,3 +35,6 @@ function ofisuport_pingback_header() {
 	}
 }
 add_action( 'wp_head', 'ofisuport_pingback_header' );
+
+
+

sass/components/_components.scss

@@ -5,6 +5,7 @@
 /* Posts and pages
 --------------------------------------------- */
 @import "content/posts-and-pages";
+@import "content/login";
 
 /* Comments
 --------------------------------------------- */