Highlighted

Login Form

Community Beginner ,
Jan 12, 2016

Copy link to clipboard

Copied

Hello everyone,

I was wondering if someone can walk me through the process of manually customizing the login form? I found a nice login form that I would want to use: Clean login form

I went into business catalyst, secure zone, and got the html code and imported it into muse to create the login. I then uploaded it to business catalyst.

Now this is where I get stuck. I have no clue on what to do after that. Do I go into "file manager/css" and customize it through there? And if so, how will all of this link together? If someone has the time to help me code it accordingly, I would deeply appreciate it. I've had this problem for the past 4 days.

Also, if someone is possibly willing to share their login form with me, I would be grateful.

Thank you!

Correct answer by isaiah6559 | Community Beginner

Actually, I got it to work. I'll list my steps on how I figured it out so if anyone else comes across the same issue.

1. On Adobe Muse, Create a new blank page. We'll call it "Login"

2. On Business Catalyst, go to Site Manager and choose Secure Zones.

3. Create a secure zone.

4. Click "Actions" and choose "Get login box with HTML". Copy the code.

5. Go to "http://codepen.io/pen/"

6. Paste the HTML you just copied onto the HTML section (Make it look nice by separating each parameter. It will be easier to modify that way)

7. Now, go online and find a good looking Login Form that has both HTML & CSS coded for you already (Example: Clean login form)

8. Now this is the tricky part. The CSS will stay the same, but you will need to combine both the Secure Zone HTML with the desired Login Form's HTML (If you get stuck and need help, feel free to ask)

9. Once you are done recoding the HTML to work with the Secure Zone parameters, paste the following code to the very top of the HTML  <link rel="stylesheet" type="text/css" href="assets/login.css">

10. Now, copy all the code from the HTML section and go back to Adobe Muse.

11. Paste the newly coded HTML (Alternatively, click object and insert HTML) in your newly created page called "Login". It should now show a login form.

12. Save Muse file.

13. Upload your site to Business Catalyst.

14. Export site as HTML.

15. Once exported, go onto the exported location and open up the Exported folder.

16. Open up the assets folder and paste the style.css file you have (In this case, we'll be using the style.css file from the Clean login form‌ example.

17. Now, go back to the root, and look for the page we created called "Login.html". You should now see the CSS within the login form.

Additional: If you want to add the style.css to your business catalyst as well, follow these steps.

18. Go to Business Catalyst, and Click File Manager (Located in Site Manager)

19. Go to your assets folder and click "Upload file(s)"

20. Add the style.css file which is located in your exported muse "assets" folder and upload it.

21. Go to pages, choose the page we created called login.

22. Scroll to the bottom and click on "Preview"

Note: It will not show the CSS unless you press "Preview"..

Best of luck!

TOPICS
Customer Database, General Discussion, How to - HTMLCSSJavaScript

Views

2.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Login Form

Community Beginner ,
Jan 12, 2016

Copy link to clipboard

Copied

Hello everyone,

I was wondering if someone can walk me through the process of manually customizing the login form? I found a nice login form that I would want to use: Clean login form

I went into business catalyst, secure zone, and got the html code and imported it into muse to create the login. I then uploaded it to business catalyst.

Now this is where I get stuck. I have no clue on what to do after that. Do I go into "file manager/css" and customize it through there? And if so, how will all of this link together? If someone has the time to help me code it accordingly, I would deeply appreciate it. I've had this problem for the past 4 days.

Also, if someone is possibly willing to share their login form with me, I would be grateful.

Thank you!

Correct answer by isaiah6559 | Community Beginner

Actually, I got it to work. I'll list my steps on how I figured it out so if anyone else comes across the same issue.

1. On Adobe Muse, Create a new blank page. We'll call it "Login"

2. On Business Catalyst, go to Site Manager and choose Secure Zones.

3. Create a secure zone.

4. Click "Actions" and choose "Get login box with HTML". Copy the code.

5. Go to "http://codepen.io/pen/"

6. Paste the HTML you just copied onto the HTML section (Make it look nice by separating each parameter. It will be easier to modify that way)

7. Now, go online and find a good looking Login Form that has both HTML & CSS coded for you already (Example: Clean login form)

8. Now this is the tricky part. The CSS will stay the same, but you will need to combine both the Secure Zone HTML with the desired Login Form's HTML (If you get stuck and need help, feel free to ask)

9. Once you are done recoding the HTML to work with the Secure Zone parameters, paste the following code to the very top of the HTML  <link rel="stylesheet" type="text/css" href="assets/login.css">

10. Now, copy all the code from the HTML section and go back to Adobe Muse.

11. Paste the newly coded HTML (Alternatively, click object and insert HTML) in your newly created page called "Login". It should now show a login form.

12. Save Muse file.

13. Upload your site to Business Catalyst.

14. Export site as HTML.

15. Once exported, go onto the exported location and open up the Exported folder.

16. Open up the assets folder and paste the style.css file you have (In this case, we'll be using the style.css file from the Clean login form‌ example.

17. Now, go back to the root, and look for the page we created called "Login.html". You should now see the CSS within the login form.

Additional: If you want to add the style.css to your business catalyst as well, follow these steps.

18. Go to Business Catalyst, and Click File Manager (Located in Site Manager)

19. Go to your assets folder and click "Upload file(s)"

20. Add the style.css file which is located in your exported muse "assets" folder and upload it.

21. Go to pages, choose the page we created called login.

22. Scroll to the bottom and click on "Preview"

Note: It will not show the CSS unless you press "Preview"..

Best of luck!

TOPICS
Customer Database, General Discussion, How to - HTMLCSSJavaScript

Views

2.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 12, 2016 1
Jan 13, 2016

Copy link to clipboard

Copied

Hello Isaiah,

This form you're trying to implement Clean login form is a styling only that can be applied to an existing functional login form.

How I would go about this is:

  1. Create the Secure Zone in BC (I get it you already did this),
  2. Add the login form to a temporary page I would not even save just to copy the code (alternatively you can use "Get Login Box HTML Code" as well, and I get it you already did this)
  3. Use the “Object --> Insert HTML…” option and paste the code into Muse
  4. Customize the HTML code for the form with what “Clean login form” provides on the HTML tab

5 Add the CSS from “Clean login form” directly into the page or reffer this through an external CSS file

6 Then I would publish the page. The form should look similar to the one on “Clean login form” and it should work, having the BC functionality behind it.

For further publish actions you would also retain the code inside your Muse project, so it should seamlesly work as long as you don’t remove the form on BC’s side.

I hope this is clear and helps.

Cheers,

Cristian

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2016 1
Community Beginner ,
Jan 13, 2016

Copy link to clipboard

Copied

Hello Christan,

Thank you for replying! I have a question. How would I refer it though an external CSS file?

Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2016 0
Community Beginner ,
Jan 13, 2016

Copy link to clipboard

Copied

Actually, I got it to work. I'll list my steps on how I figured it out so if anyone else comes across the same issue.

1. On Adobe Muse, Create a new blank page. We'll call it "Login"

2. On Business Catalyst, go to Site Manager and choose Secure Zones.

3. Create a secure zone.

4. Click "Actions" and choose "Get login box with HTML". Copy the code.

5. Go to "http://codepen.io/pen/"

6. Paste the HTML you just copied onto the HTML section (Make it look nice by separating each parameter. It will be easier to modify that way)

7. Now, go online and find a good looking Login Form that has both HTML & CSS coded for you already (Example: Clean login form)

8. Now this is the tricky part. The CSS will stay the same, but you will need to combine both the Secure Zone HTML with the desired Login Form's HTML (If you get stuck and need help, feel free to ask)

9. Once you are done recoding the HTML to work with the Secure Zone parameters, paste the following code to the very top of the HTML  <link rel="stylesheet" type="text/css" href="assets/login.css">

10. Now, copy all the code from the HTML section and go back to Adobe Muse.

11. Paste the newly coded HTML (Alternatively, click object and insert HTML) in your newly created page called "Login". It should now show a login form.

12. Save Muse file.

13. Upload your site to Business Catalyst.

14. Export site as HTML.

15. Once exported, go onto the exported location and open up the Exported folder.

16. Open up the assets folder and paste the style.css file you have (In this case, we'll be using the style.css file from the Clean login form‌ example.

17. Now, go back to the root, and look for the page we created called "Login.html". You should now see the CSS within the login form.

Additional: If you want to add the style.css to your business catalyst as well, follow these steps.

18. Go to Business Catalyst, and Click File Manager (Located in Site Manager)

19. Go to your assets folder and click "Upload file(s)"

20. Add the style.css file which is located in your exported muse "assets" folder and upload it.

21. Go to pages, choose the page we created called login.

22. Scroll to the bottom and click on "Preview"

Note: It will not show the CSS unless you press "Preview"..

Best of luck!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 13, 2016 1
Explorer ,
Jan 19, 2016

Copy link to clipboard

Copied

Hello!

I was wondering if you could please elaborate on point 8: Combine both the Secure Zone HTML with the desired Login Form's HTML.


I understand the rest, just not where specifically to add the html of the new design to the Secure Zone html. Would you be willing to share your code as an example? I should be able to fill in the rest.


Thanks for this important and informative post.

Jay

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2016 0
Explorer ,
Jan 27, 2017

Copy link to clipboard

Copied

Thank you so much for posting this.

Extremely helpful!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 27, 2017 0
New Here ,
Jan 26, 2016

Copy link to clipboard

Copied

Thanks for the post Christan and isaiah6559 its was very helpful - However I have an additional question;

How do you add addition fields to a secure zone login form? I'd like to add a required check box for "terms of use" that a user must check off before they are able to log in and access the secured content. Where and how would you do this?

Could I create a new BC web form with a check box and after inserting the HTML on to the login page just copy the form tag properties including the validation script from the current generic login form and past it replacing that new forms tag properties and validation script - would that work?

If anyone knows a way to do this please let me know - Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 26, 2016 0
CMorrow LATEST
New Here ,
Aug 29, 2017

Copy link to clipboard

Copied

8. Now this is the tricky part. The CSS will stay the same, but you will need to combine both the Secure Zone HTML with the desired Login Form's HTML (If you get stuck and need help, feel free to ask)

Help!! I have No Idea how to do this!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 29, 2017 0