AI Search
Classic Search
 Search Phrase:
 Search Type:
Advanced search options
 Search in Forums:
 Search in date period:

 Sort Search Results by:

Filter by custom fields

Topic prefix

AI Assistant
Notifications
Clear all

[Closed] Registration Form help

8 Posts
3 Users
0 Reactions
5,544 Views
A_Goer
Posts: 19
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@a_goer)
Eminent Member
Joined: 8 years ago
[#6685]

I am trying to resize the register button and center it and text "After registration you will receive an email confirmation with a link to set a new password" to the page directly under the other fields. I set the button to 20% in custom css but it did not scale well on mobile screens so I removed the code. I can recreate the text and FA icon using the custom fields and center it if it is easier to just make the original one display:none. 

RegistrationPage
 
RegistrationSettings

7 Replies
Sofy
Posts: 5774
 Sofy
Admin
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@sofy)
Support Team
Joined: 8 years ago

Hi A_Goer,

To center  the "After registration you will receive an email confirmation with a link to set a new password" element use the following code.

#wpforo #wpforo-wrap .wpfw-1{
text-aligncenter;
}

To resize the registration button, use the following code for desktop:

#wpforo #wpforo-wrap .wpforo-register-wrap .wpf-field.wpf-field-type-submit input[type="submit"]{
width20%;
}

For mobile use the following one :

@media screen and (max-width: 800px)
#wpforo #wpforo-wrap .wpforo-register-wrap .wpf-field.wpf-field-type-submit input[type="submit"] {
width: 100% !important;
}

A_Goer
Posts: 19
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@a_goer)
Eminent Member
Joined: 8 years ago

Thank you. The mobile scale is cutting the button down.

Screenshot 20180914 123031

Sofy
Posts: 5774
 Sofy
Admin
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@sofy)
Support Team
Joined: 8 years ago

Hi  A_Goer,

For mobile use the following one :

@media screen and (max-width: 800px)
#wpforo #wpforo-wrap .wpforo-register-wrap .wpf-field.wpf-field-type-submit input[type="submit"] {
width: 100% !important;
}

It seems you've forgotten writing the "!important" statement in the following CSS code. 


A_Goer
Posts: 19
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@a_goer)
Eminent Member
Joined: 8 years ago

I rechecked it, it was there all along. I placed it at the top and verified that there are no typos. How can I find out what is overwriting the "!important" statement? I cleared all cache afterwards and it is still not showing in Chrome Dev tools. 

 

 

WPForo CSS

Page 1 / 2
Share: