Login Form

Hi, I've searched endlessly for even the slightest hint on how to customize the login form with no success. I'd like to be able to change the field background colors, change the button color, change the alignment and so forth. Is there any simple documentation or tutorials on how to do this? The default login form is horrible looking.

Hi, I've searched endlessly for even the slightest hint on how to customize the login form with no success. I'd like to be able to change the field background colors, change the button color, change the alignment and so forth. Is there any simple documentation or tutorials on how to do this?

You can use CSS for all of that. You can add your custom CSS to CBs template as well to override it. See the below on how to use template CSS overrides in CB.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

The alternative is using Joomla layout overrides, which work for all of CBs modules, to restyle it however you like. Checkout the Joomla documentation below regarding layout overrides.

docs.joomla.org/Layout_Overrides_in_Joomla

The default login form is horrible looking.

Seams a bit harsh. It matches Joomlas nearly 1:1. Maybe doesn't fit your specific Joomla template well though since we design CB for Joomlas default template.

Well, let me rephrase the "it's horrible looking." Mine specifically is horrible looking. I've attached a screenshot. I'm used to having the html and the css in front of me. I'm not sure how to style the login form because I can't tell how the div's are set and what the classes are being used with the styling. That's where I'm confused and I cannot find specific documentation on that. I know how to create the overrides and do the css but the css does me little good if I don't know where the styling is for the login form. Are there any form style templates that we can use? That would be so much easier if we simply had some form style templates/layouts to choose from. You guys need to remember that most of us are using Joomla because we aren't hard core coders. Most of us know enough about css to be dangerous. But having clear instruction step by step as to how and where to effect the changes needed are definitely a must have. You'll see in my screenshot that I can't figure out how to change the color of the background of the username and password fields. I'm not sure where to go to style the alignment of the fields and/or to create nice looking borders around the fields and the form container itself. I have searched high and low for that kind of helpful documentation and sure everyone says to create layout overrides and such but that is not helpful if we don't even know where to start from the beginning. I do appreciate your response though. Thank you.

CB doesn't style the login form beyond the icons. It's designed to match Joomlas login module layout closely so Joomla styles it. It's very likely your Joomla template is overriding Joomlas login module layout and doesn't have a layout override for CBs. Within your CB Login module under Advanced ensure the layout selected is Bootstrap as your template maybe at least loading Bootstrap to provide some styling. Additionally under the Styles tab of your CB Login module you can add your own CSS classes to CBs login module elements.

I'm not sure how to style the login form because I can't tell how the div's are set and what the classes are being used with the styling.

Your browsers developer tools can help with this. Right click and inspect element or press F12 to open the console directly. You can also find the default layout files below (this is standard for all modules with layouts).

/modules/mod_cblogin/tmpl

You guys need to remember that most of us are using Joomla because we aren't hard core coders.

Styling your site is coding. If you've no coding experience you'll have difficulty personalizing your site.

But having clear instruction step by step as to how and where to effect the changes needed are definitely a must have.

We are not going to provide step by step instructions for writing CSS to style things. We can provide where you can put the CSS as I've done above, but beyond that what CSS you use is entirely up to you. At best we can provide simple examples.

You'll see in my screenshot that I can't figure out how to change the color of the background of the username and password fields.

You need to write the CSS and add it to CB as instructed above or add it to your Joomla template CSS file. If you already have some CSS classes with the styling you're wanting you can add those CSS classes to your CB Login module under the Styles tab. I however believe you need a general CSS tutorial, which you can find on the MDN below.

developer.mozilla.org/en-US/docs/Learn/CSS

Please also see our help us help you page below on what support provides.

www.joomlapolis.com/help-us-help-you

Please understand your subscription is not getting you a personal web developer to help you style, design, or personalize your site. For that you need to hire a web designer.

Thank you for your response. I may have not clearly explained... I know how to create the css, that is not the problem, but as far as the form goes I can't find where to add the classes to the form fields like in the div's and such or documentation explaining where those scripts are located to add the classes to that I will use in my css. I can't find anything on where the login form script is located in my server directory. I can create all the css I want but that will do no good if I don't know where the login form script is located to add the classes to. Does that make sense?

I can't find where to add the classes to the form fields like in the div's

99% of styling cases you simply don't. You style the classes that are already on the elements instead of adding new ones. CB Login module is a bit of an exception since it has parameters to add your own CSS classes to various elements of the form under the Styles tab of your login module.

documentation explaining where those scripts are located to add the classes to that I will use in my css

For that you'd use a layout override and add your custom CSS classes directly in your layout. Layout overrides are documented by Joomla and are not specific to CB. See the below documentation regarding this.

docs.joomla.org/Layout_Overrides_in_Joomla

This applies to all of CBs modules.

I can't find anything on where the login form script is located in my server directory. I can create all the css I want but that will do no good if I don't know where the login form script is located to add the classes to. Does that make sense?

The login page is just your login module rendered in the page. So all of the above described usages apply to the login page.