login page cant read text

[WinDroidAnswers]

hi there,

we’re online now and we have a lot of problems with new users, they cant read what they write in the login page, the background is too dark as you can see in the screenshot, now we change with a temporary one, but we need to change the overlay color and the typing font color, may you suggest us how to do this in the custom css?

thanks in advance.

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

I do not see that level of transparency when I visit your site (uncached), make sure to clear your website cache to ensure you have the latest files.

You can override the strength of the transparency for the login modal with the below custom CSS. Change the 0.85 value to any number between 0.00 and 0.1 to suit your needs. The closer the number is to 0.00 the more transparent it will be.

COPY CODE

.kleo-form-modal .kleo-login-wrap .before-login-form-wrapper, .kleo-form-modal .kleo-login-wrap .login-create-account-wrapper, .kleo-form-modal .kleo-login-wrap .login-form-wrapper {
    background-color: rgba(255, 255, 255, 0.85);
}

To change the color of the inputs in the login modal please use the below CSS. Change the value from #000000 to your desired color

COPY CODE

.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field {
    color: #000000;
}

Make sure to purge your website cache, CDN and front-end cache (Ctrl+F5) to see the changes.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[WinDroidAnswers]

ok for the imput text, but for the labels and other page text?
maybe we put the overlay darker and all the text in white, but only for that page

[Kieran_SQ]

Hi,

Please specify which content you would like to change the color of and I will send the specific CSS for you.

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[WinDroidAnswers]

This reply has been set as private.

[Kieran_SQ]

Hi,

You can use that code, it is for BuddyApp. The class kleo and the theme KLEO are two different things. The class kleo is universal throughout our themes so that CSS can be reused – kleo is the default class in the BuddyApp, SweetDate and KLEO themes.

The custom CSS to override each title is

COPY CODE

p.fb-register-title {
    color: red !important;
}
h3.kleo-pop-title {
    color: red !important;
}

For the labels please use the following

COPY CODE

.kleo-login-wrap .login-form-wrapper .login-input-wrapper .login-label .login-label-content {
    color: red !important;
}
.kleo-login-wrap .login-form-wrapper .fancy-checkbox>span {
    color: red !important;
}

Change the values from red !important to your desired # value color, keep the !important in place for this to work. Make sure to clear your website cache, any CDN, and front-end cache to see the changes.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[WinDroidAnswers]

I’m trying to use it (your first and second custom case) but it doesn’t works. May I do something wrong? I clean chrome cache three times 🙁

[Kieran_SQ]

Hi,

Please update this ticket, in a private reply, with admin credentials (in English US or UK) so I can look into this for you. Also, please confirm the location where you added the custom CSS.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Kieran_SQ]

Hi,

I checked your style.css via the front end and it looks like you have commented out the CSS that I sent to you.

Currently it is

COPY CODE

/* custom css per la trasparenza dell'overlay nella pagina di login 
.kleo-form-modal .kleo-login-wrap .before-login-form-wrapper, .kleo-form-modal .kleo-login-wrap .login-create-account-wrapper, .kleo-form-modal .kleo-login-wrap .login-form-wrapper {
    background-color: rgba(0, 0, 0, 0.05);
}
*/

/* custom css per cambiare il colore dell'imput 
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field {
    color: #000000;
*/

It should be

COPY CODE

/* custom css per la trasparenza dell'overlay nella pagina di login */
.kleo-form-modal .kleo-login-wrap .before-login-form-wrapper, .kleo-form-modal .kleo-login-wrap .login-create-account-wrapper, .kleo-form-modal .kleo-login-wrap .login-form-wrapper {
    background-color: rgba(0, 0, 0, 0.05);
}

/* custom css per cambiare il colore dell'imput */
.kleo-login-wrap .login-form-wrapper .login-input-wrapper input.login-field {
    color: #000000;
}

When I correct the commenting issue via the front-end it works as expected.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[WinDroidAnswers]

This reply has been set as private.

[Kieran_SQ]

Hi,

I have checked your site and I can see that the CSS I have provided to you, that you have customized, has been added to the style.css of the BuddyApp Child theme and the changes are correctly reflected in the login modal (see screenshot).

If you are unable to see them then you have a caching issue within your browser. You can use Ctrl+Shift+Del to purge your entire browser data (except form data and passwords) and restart the browser to see the latest updates.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[WinDroidAnswers]

wait a second,
it works, but not in that page:
http://www.windroidanswers.com/login/

as you can see the overlay is not as dark as we aspect to be.

I was thinking only logged users can display the community, all the others can only see the login page. Did I understand it wrong?
or how to correct this setting?

[Kieran_SQ]

Hi,

For the login page you can use the below custom CSS, please add it in its entirety to the end of the BuddyApp Child theme’s style.css file. Once added make sure you purge any website caching, CDN and your front-end cache (Ctrl+F5) to see the changes.

COPY CODE

.page-id-261 .kleo-login-wrap .before-login-form-wrapper {
    background-color: rgba(0, 0, 0, 0.50);
}
.page-id-261 .kleo-login-wrap .login-form-wrapper {
    background-color: rgba(0, 0, 0, 0.50);
}
.page-id-261 .kleo-login-wrap .login-create-account-wrapper {
    background-color: rgba(0, 0, 0, 0.50);
}

I selected a default black with 0.50 transparency – you can adjust this to any value you wish as described previously.

You do have Restrict My Site installed but you do not currently have it active. You can enable it by going to WP Admin > Appearance > Theme Options > Heading: ‘Private Site’ > Option: ‘Make my site private’. Select yes for this option and select your desired login page and any exceptions to the rule.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts