Skip to content

Commit

Permalink
[ ColorlibHQ#136 ] Background color that will not apply on half page …
Browse files Browse the repository at this point in the history
…form templates
  • Loading branch information
TeoAlex committed Mar 20, 2024
1 parent 035add0 commit a14f720
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 4 deletions.
11 changes: 8 additions & 3 deletions assets/js/clc-preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,21 @@
self = this;
$.each( self.selectors, function( index, selector ) {
var cssLine = index + '{';
$.each( selector, function( index, option ) {
$.each( selector, function( indexi, option ) {
cssLine = cssLine + self.generateCSSLine( option );
if( 'custom-background-color' == option ){
console.log( 'custom-background-color');
console.log( cssLine );
}
});
style = style + cssLine + '}';
});

self.style.html( style );

},
generateCSSLine: function( option ) {

var line = this.settings[ option ].attribute + ':';

if ( '' === this.settings[ option ].value && 'custom-logo' !== option ) {
Expand Down Expand Up @@ -75,7 +80,7 @@
line += this.settings[ option ].value;
}
line += ';';

return line;
}
};
Expand Down
147 changes: 146 additions & 1 deletion includes/lib/class-colorlib-login-customizer-css-customization.php
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,14 @@ public function set_options() {
'custom-background-color',
),
),
'.ml-half-screen div.ml-form-container' => array(
'attributes' => array(
'background-color',
),
'options' => array(
'custom-background-color',
),
),
'.ml-container .ml-form-container' => array(
'attributes' => array(
'background-image',
Expand Down Expand Up @@ -485,6 +493,18 @@ public function _set_background_options() {
)
);

/**
* Set background-color for half screens
*/
$string .= $this->create_css_lines(
'.ml-half-screen div.ml-form-container',
array(
'background-color',
),
array(
'custom-background-color',
)
);
return $string;

}
Expand Down Expand Up @@ -757,7 +777,7 @@ public function generate_css() {

$logo_css = '.login.clc-both-logo h1 a{width:100%;height:100%;text-indent: unset;background-position:top center !important;padding-top:' . (30 + absint( $this->options['logo-height'] )) . 'px; background-size: ' . $backgriund_size . '; margin-top: -' . (15 + absint( $this->options['logo-height'] )) . 'px; position:relative;background-image:url(' . $background_image . ')}';

echo '<style type="text/css">.language-switcher{z-index:9;margin:0;}#registerform #wp-submit{float:none;margin-top:15px;}.login.clc-text-logo:not(.clc-both-logo) h1 a{ background-image: none !important;text-indent: unset;width:auto !important;height: auto !important; }#login form p label br{display:none}body:not( .ml-half-screen ) .ml-form-container{background:transparent !important;}.login:not(.clc-both-logo) h1 a{background-position: center;background-size:contain !important;}.ml-container #login{ position:relative;padding: 0;width:100%;max-width:320px;margin:0;}#loginform,#registerform,#lostpasswordform{box-sizing: border-box;max-height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;}.ml-container{position:relative;min-height:100vh;display:flex;height:100%;min-width:100%;}.ml-container .ml-extra-div{background-position:center;background-size:cover;background-repeat:no-repeat}body .ml-form-container{display:flex;align-items:center;justify-content:center;}body:not( .ml-half-screen ) .ml-container .ml-extra-div{position:absolute;top:0;left:0;width:100%;height:100%}body:not( .ml-half-screen ) .ml-container .ml-form-container{width:100%;min-height:100vh;}body.ml-half-screen .ml-container{flex-wrap:wrap}body.ml-half-screen .ml-container>.ml-extra-div,body.ml-half-screen .ml-container>.ml-form-container{width:50%}body.ml-half-screen.ml-login-align-2 .ml-container>div,body.ml-half-screen.ml-login-align-4 .ml-container>div{width:100%;flex-basis:50%;}body.ml-half-screen.ml-login-align-2 .ml-container{flex-direction:column-reverse}body.ml-half-screen.ml-login-align-4 .ml-container{flex-direction:column}body.ml-half-screen.ml-login-align-1 .ml-container{flex-direction:row-reverse}body.ml-login-vertical-align-1 .ml-form-container{align-items:flex-start}body.ml-login-vertical-align-3 .ml-form-container{align-items:flex-end}body.ml-login-horizontal-align-1 .ml-form-container{justify-content:flex-start}body.ml-login-horizontal-align-3 .ml-form-container{justify-content:flex-end}@media only screen and (max-width: 768px) {body.ml-half-screen .ml-container > .ml-extra-div, body.ml-half-screen .ml-container > .ml-form-container{width:50% !important;}}.login input[type=text]:focus, .login input[type=search]:focus, .login input[type=radio]:focus, .login input[type=tel]:focus, .login input[type=time]:focus, .login input[type=url]:focus, .login input[type=week]:focus, .login input[type=password]:focus, .login input[type=checkbox]:focus, .login input[type=color]:focus, .login input[type=date]:focus, .login input[type=datetime]:focus, .login input[type=datetime-local]:focus, .login input[type=email]:focus, .login input[type=month]:focus, .login input[type=number]:focus, .login select:focus, .login textarea:focus{ box-shadow: none; }@media only screen and (max-width: 577px){body.ml-half-screen .ml-container > .ml-extra-div, body.ml-half-screen .ml-container > .ml-form-container{width:100% !important;}body.ml-half-screen.ml-login-align-1 .ml-container .ml-extra-div, body.ml-half-screen.ml-login-align-1 .ml-container .ml-form-container,body.ml-half-screen.ml-login-align-3 .ml-container .ml-extra-div,body.ml-half-screen.ml-login-align-3 .ml-container .ml-form-container{ width: 100%; }body.ml-half-screen.ml-login-align-1 .ml-container .ml-extra-div,body.ml-half-screen.ml-login-align-3 .ml-container .ml-extra-div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}}</style>';
echo '<style type="text/css">' . $this->get_base_css() . '</style>';
echo '<style type="text/css" id="clc-style">' . $css . '</style>';
echo '<style type="text/css" id="clc-columns-style">' . $columns_css . '</style>';
echo '<style type="text/css" id="clc-logo-style">' . $logo_css . '</style>';
Expand Down Expand Up @@ -1169,4 +1189,129 @@ public function change_lostpasswords_button_label( $translated_text, $text, $dom

return $translated_text;
}

private function get_base_css() {
return '
.language-switcher{
z-index:9;
margin:0;
}
#registerform #wp-submit{
float:none;
margin-top:15px;
}
.login.clc-text-logo:not(.clc-both-logo) h1 a{
background-image: none !important;
text-indent: unset;
width:auto !important;
height: auto !important;
}
#login form p label br{
display:none
}
body:not( .ml-half-screen ) .ml-form-container{
background:transparent !important;
}
.login:not(.clc-both-logo) h1 a{
background-position: center;
background-size:contain !important;
}
.ml-container #login{
position:relative;
padding: 0;
width:100%;
max-width:320px;
margin:0;
}
#loginform,#registerform,#lostpasswordform{
box-sizing: border-box;
max-height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.ml-container{
position:relative;
min-height:100vh;
display:flex;
height:100%;
min-width:100%;
}
.ml-container .ml-extra-div{
background-position:center;
background-size:cover;
background-repeat:no-repeat
}
body .ml-form-container{
display:flex;
align-items:center;
justify-content:center;
}
body:not( .ml-half-screen ) .ml-container .ml-extra-div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%
}
body:not( .ml-half-screen ) .ml-container .ml-form-container{
width:100%;
min-height:100vh;
}
body.ml-half-screen .ml-container{
flex-wrap:wrap
}
body.ml-half-screen .ml-container>.ml-extra-div,body.ml-half-screen .ml-container>.ml-form-container{
width:50%
}
body.ml-half-screen.ml-login-align-2 .ml-container>div,body.ml-half-screen.ml-login-align-4 .ml-container>div{
width:100%;
flex-basis:50%;
}
body.ml-half-screen.ml-login-align-2 .ml-container{
flex-direction:column-reverse
}
body.ml-half-screen.ml-login-align-4 .ml-container{
flex-direction:column
}
body.ml-half-screen.ml-login-align-1 .ml-container{
flex-direction:row-reverse
}
body.ml-login-vertical-align-1 .ml-form-container{
align-items:flex-start
}
body.ml-login-vertical-align-3 .ml-form-container{
align-items:flex-end
}
body.ml-login-horizontal-align-1 .ml-form-container{
justify-content:flex-start
}
body.ml-login-horizontal-align-3 .ml-form-container{
justify-content:flex-end
}
@media only screen and (max-width: 768px) {
body.ml-half-screen .ml-container > .ml-extra-div, body.ml-half-screen .ml-container > .ml-form-container{
width:50% !important;
}
}
.login input[type=text]:focus, .login input[type=search]:focus, .login input[type=radio]:focus, .login input[type=tel]:focus, .login input[type=time]:focus, .login input[type=url]:focus, .login input[type=week]:focus, .login input[type=password]:focus, .login input[type=checkbox]:focus, .login input[type=color]:focus, .login input[type=date]:focus, .login input[type=datetime]:focus, .login input[type=datetime-local]:focus, .login input[type=email]:focus, .login input[type=month]:focus, .login input[type=number]:focus, .login select:focus, .login textarea:focus{
box-shadow: none;
}
@media only screen and (max-width: 577px){
body.ml-half-screen .ml-container > .ml-extra-div, body.ml-half-screen .ml-container > .ml-form-container{
width:100% !important;
}
body.ml-half-screen.ml-login-align-1 .ml-container .ml-extra-div, body.ml-half-screen.ml-login-align-1 .ml-container .ml-form-container,body.ml-half-screen.ml-login-align-3 .ml-container .ml-extra-div,body.ml-half-screen.ml-login-align-3 .ml-container .ml-form-container{
width: 100%;
}
body.ml-half-screen.ml-login-align-1 .ml-container .ml-extra-div,body.ml-half-screen.ml-login-align-3 .ml-container .ml-extra-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
';
}
}
2 changes: 2 additions & 0 deletions readme.txt
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,8 @@ Fixed: The live preview doesn’t show "Register" link ( [#163](https://github.c
Fixed: Updated deprecated jquery & updated minicolors js library ( [#159](https://github.com/ColorlibHQ/colorlib-login-customizer/issues/159) )
Fixed: Added plugin name in "Rate us" notice. ( [#149](https://github.com/ColorlibHQ/colorlib-login-customizer/issues/149) )
Fixed: Show image only on tempalte no.4 does not display the logo image. ( [#135](https://github.com/ColorlibHQ/colorlib-login-customizer/issues/135) )
Fixed: Background color that will not apply on half page form templates ( [#136](https://github.com/ColorlibHQ/colorlib-login-customizer/issues/136) )



= 1.3.1 - 08.02.2022 =
Expand Down

0 comments on commit a14f720

Please sign in to comment.