How to create a login form at the center of the page that also has an background image

[DebugHorror]

My project has a need of creating a login page which is mobile and web ready.

It has a background image and also the form is at center.

How can I achieve this in vFlow?

something like below

@Sunil_Dalal

[Alisha]

steps are:

1. go to pages.
   2.) create your page and choose category as public.
   
   
   
   3.) then go to the properties there is option to add background image.
   4.) then go to components.
   5.) create fieldset with 3 elements. ( 2 for text for username & password) and 1 for login button. provide allign center in ui properties of elements.as per screen shot.
   
   
   
   6 then submit your component.
   7.) map this component in form.
   8.) map this form in already created page layout.
   9.) then this page should be map in app in the field of.first landing page .
   
   

[DebugHorror]

Hi Alisha, Thanks for the answer. But what I need is step by step process of adding custom css to the elements so that the login page looks like above wireframe rather than the default template.

[ShraddhaDhoke]

To configure a login page with a background image and the form contents in the center you can add custom CSS on the Login custom page.
Alternatively, you can create a main page to manage the UI with lesser custom CSS.

1. Create a Public Main Page from the left sidebar where all the entities are listed
2. In the properties section of the page, mention the Background Image URL and submit the page.
3. Navigate to the Layout section of that page, select the property Fx Layout Align as “center center” (Fx Layout Align is present in the Row properties)
4. In the Column properties of the same Layout, mention the Laptop Width, Tab Width and Mobile Width (for instance, 40%)

These steps will align the the form in the center of the page and set a background image on the page.