Consistent Form Button Styles

[thabaum]

Description of bug

DNN needs a style for buttons and form fields that is going to work with themes and stay consistent.

Steps to reproduce

List the precise steps to reproduce the bug:

1. Go to pages with forms such as login, registration, password recovery, password reset and there are styling differences that are very noticeable between them all.

Current behavior

Different button styles

Expected behavior

Bootstrap buttons! Simple, easy to follow and style entire site buttons according to different button purposes.

Screenshots

Additional context

The style on the Forge and Community pages is the one that should be the style and color scheme on all the buttons throughout the app. It needs to feel like an app, not a 1998 website. The fact this is not done on our own community website shows it is easier said than done...

[valadas]

The theme for that site is open source at https://github.com/DNNCommunity/DNNCommunityTheme if you can open an issue there since it is theme related. Thanks.

[thabaum]

gotcha

[thabaum]

I just still feel this issue is DNN related but probably going to get fixed as I believe there was discussion on this before. Having to remake these forms or pages somehow. It should be standard button colors that go accross the platform, set PRIMARY button color and themes and modules should follow it to make things match a website. Everything so... proprietary feeling rather than a basic CSS stylesheet I can edit. Kinda... lame. but thats just my opinion. I hope it gets fixed in DNN 10 to introduce any breaking changes, but the default styles of modules inside the DNN platform override the basic ones like a submit button or cancel button... they should not.

[thabaum]

One last note, I was showing an example of buttons created for the skins site, yet none of them applied to all the different pages... cuz its a pain in the ass man. so many styles applied to things inside DNN Platform default installs that should not be.

[david-poindexter]

@thabaum you seem to be basing your conclusions on a site that is using a custom theme. Because I built that theme I can tell you that it has custom styling for the LOGIN form, but not the REGISTER form. It was simply an oversight. 😉 Feel free to submit an issue on the appropriate GitHub repo (referenced above by @valadas) and/or submit a PR to that repo to resolve the issue. This is not a DNN Platform issue.

[valadas]

In DNN 10 we will have css variables to help this kind of situation, but that being said, for 3rd party themes/modules, nobody can force them to implement those things.

[thabaum]

you guys are missing it, sorry.

i like the submit a PR, but it will probably break things without extensive more work. I was working on this with Oqtane, trying to keep everything uniform within the framework. I was greatly concerned with that project following this one in respect to this issue.

[thabaum]

I will post pictures from this fresh "dev" install as I test the different forms out. It is something a theme style can fix, just a lot more work than should need to be done is all.

[thabaum]

maybe a generic CSS class can get added to all form buttons that are similar in function throughout the platform. If a module or theme developer wants to add it to a project, it is the way to go to keep things simple for a DNN user who wished to change the color of all buttons. And then those theme developers have time to add the new class. I just feel there should be a button color picker in DNN that overrides all themes.

[david-poindexter]

In DNN 10 we will have css variables to help this kind of situation, but that being said, for 3rd party themes/modules, nobody can force them to implement those things.

☝🏼

[thabaum]

nobody but the people who buy and use their modules...

[thabaum]

this is DNN Default right?

[thabaum]

why dont it look like this

[thabaum]

well nevermind, I was thinking of another form, the mobile one I believe that pops up... I must be confusing that with your login.

[thabaum]

still styling the DNN Login button should style the other buttons too.

[david-poindexter]

this is DNN Default right?

This is custom.

[thabaum]

so that does make my point. Why does your style on the login button not style the register, profile and other primary color buttons

[thabaum]

same with the register... you should do that once... all of them are done, that is my point.

[thabaum]

would that not make life much easier? just for the basic buttons.

[thabaum]

its 2 colors!

[thabaum]

10+++ pages with 2 buttons each, submit and cancel colors...

Plus all the modules... the html buttons in the html modules...

[thabaum]

PS @david-poindexter I like the login buttons, it looks like a modern app would. This should be DNN Default.

[thabaum]

One last comment is sometimes module developers hijack the CSS priority causing all kinds of things that should not be happening just to take priority over any other CSS. So then you have to use !important to override it in your CSS if you dont manually edit the module's css files. I know we had discussed this as I have been fighting with everyone trying to understand why some things style and some dont. DNN is not a perfect world, as the top developers are doing this, not following DNN coding standards as they get issues from other peoples modules on the same page causing support tickets. I have been through the ringer a few times here. Hopefully the DNN 10 solution addresses this issue as well as I know we had a long discussion about this at one point in time.

You styled the DNN Community site, I was just feeling out for you as I felt a basic DNN site with a theme installed should override all those standard buttons with minimal CSS to limit the size and impact of having to code so many CSS elements AND hunt them all down!