login page cant read text

This topic has 12 replies, 2 voices, and was last updated 6 years by Kieran_SQ.

Author
June 17, 2018 at 20:18 #201071

WinDroidAnswers
Participant

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.
June 17, 2018 at 20:44 #201085

Kieran_SQ
Moderator
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.
June 17, 2018 at 20:48 #201086

WinDroidAnswers
Participant

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

June 17, 2018 at 20:51 #201088

Kieran_SQ
Moderator

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.

June 23, 2018 at 18:14 #201665

WinDroidAnswers
Participant

This reply has been set as private.
June 23, 2018 at 18:29 #201669

Kieran_SQ
Moderator
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.
June 23, 2018 at 20:55 #201699

WinDroidAnswers
Participant

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 🙁

June 23, 2018 at 21:11 #201703

Kieran_SQ
Moderator

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.
June 23, 2018 at 21:14 #201704

Kieran_SQ
Moderator
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.
June 24, 2018 at 13:34 #201764

WinDroidAnswers
Participant

This reply has been set as private.

June 24, 2018 at 16:10 #201766

Kieran_SQ
Moderator

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.

June 24, 2018 at 16:20 #201771

WinDroidAnswers
Participant

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?
June 24, 2018 at 16:33 #201773

Kieran_SQ
Moderator
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

Viewing 13 posts - 1 through 13 (of 13 total)

The forum ‘Bugs & Issues’ is closed to new topics and replies.

Attachments:

Attachments:

Search KB

Log in with your credentials

Forgot your details?