When I enter incorrect data in the new entry form on the front end, and click submit, it shows an error. But the error notification is very small and it appears the right and corner on the screen.
How can I make the error notification look bigger and also make it appear in the enter of the screen?
This will affect other warnings as well and is not the final solution but that's fine by me. I hope someday it may be possible to manage alerts, no customer would accept such small alerts :)
I don't think it is currently possible, The wpdt-c .alert class is dynamically loaded with jquery from the moment the editing window opens or worse, when the alert occurs. In fact there is no trace in the inspector.
Instead the custom css code loads when the page is opened, so much earlier.
Let's hope I'm wrong, it would be nice if the code that loads the css also considers changes in custom css.
If you'd like, you can modify .wpdt-c.growl-animated.alert-danger in /wp-content/plugins/wpdatatables/assets/css/bootstrap/wpdatatables-bootstrap.css on lines 12278 and 12279. If you set those to be (for example):
font-size: 30px;
line-height: 33px;
The error message will look like this:
I haven't tested all alert messages, but you will be able to find them all in that file.
Please note that an update will revert this, so you may want to add it (and other possible alerts you find in that file) in custom CSS, like:
When I enter incorrect data in the new entry form on the front end, and click submit, it shows an error. But the error notification is very small and it appears the right and corner on the screen.
How can I make the error notification look bigger and also make it appear in the enter of the screen?
Hello again Pawan
That's not something that can easily be changed. It would require code changing, or involving some listeners in combination with JavaScript.
It is considered as a custom solution, and it is not included in the provided support for the plugin, so unfortunately I can't help you with it.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi, I have the same problem.
I inserted this CSS code in the custom css settings:
wpdt-c .alert {
padding: 100px;
margin-bottom: 18px;
border: 1px solid transparent;
background: #F4F5F7;
border-radius: 3px;
}
This will affect other warnings as well and is not the final solution but that's fine by me.
I hope someday it may be possible to manage alerts, no customer would accept such small alerts :)
I hope it can help you,
a.
Thanks Apex for your solution. But somehow it did not work for me.
I entered your css code in wpDataTables-->Settings--> Custom JS and CSS --> Custom wpDataTables CSS
Is that right?
Can you help me find out what mistake did I make?
ok, maybe I was rushed to copy the code, check and let you know
actually this code placed in
wpDataTables -> Settings -> Custom JS and CSS -> Custom wpDataTables CSS
it seems not to work.
I don't remember where I put it but, of course, you find the code in the file:
wp-content/plugins/wpdatatables/assets/css/bootstrap/wpdatatables-bootstrap.css?Ver = 3.1.1
(search for .wpdt-c .alert)
You will find this class:
wpdt-c .alert {padding: 120px;
margin-bottom: 18px;
border: 1px solid transparent;
background: #F4F5F7;
border-radius: 3px;
}
You can just increase the padding value without changing anything else (I set it to 120)
The downside to this approach is that if you update the plugin, you will lose your changes.
Backup the file before editing.
We await clarification from Aleksandar on how to insert this code in the custom css code
I hope it can help youThank you for your help, Axel!
I'm sure it will be of use to others as well.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Aleksandar, this code does not work when pasted in custom css window.
Is there a way to put this code in the custom code?
I don't think it is currently possible, The wpdt-c .alert class is dynamically loaded with jquery from the moment the editing window opens or worse, when the alert occurs. In fact there is no trace in the inspector.
Instead the custom css code loads when the page is opened, so much earlier.
Let's hope I'm wrong, it would be nice if the code that loads the css also considers changes in custom css.
Thanks
a.
Hello guys
If you'd like, you can modify .wpdt-c.growl-animated.alert-danger in /wp-content/plugins/wpdatatables/assets/css/bootstrap/wpdatatables-bootstrap.css on lines 12278 and 12279. If you set those to be (for example):
The error message will look like this:
I haven't tested all alert messages, but you will be able to find them all in that file.
Please note that an update will revert this, so you may want to add it (and other possible alerts you find in that file) in custom CSS, like:
.wpdt-c.growl-animated.alert-danger { font-size: 30px; line-height: 33px; }I hope that helps
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables