GK Contact Plugin Error and Success Messages

Hello again friends,
I am posting another issue, in this separate post, as to keep the forum organized.

I am having a problem that I see has been discussed in this forum previously, however the suggested solution is not working for me. I am using the GK Contact Plugin, and when an inquiry is submitted, or a inquiry is rejected (missing email field, etc.), no error or success message is displayed. What happens is that the page is simply reloaded with a red or black bar at the top. I have been customizing the Contact plugin by modifying css styles in 'gk.stuff.css' file, however I can not seem to solve this issue. Is there a way to have error and success messages show up?

My second question regarding the GK Contact Plugin is how can I style the active field border and highlight? Currently, when a user clicks a field in order to enter data, the field box has a blue border on top, right, and bottom, and a subtle yellow background. I would like to change these properties. Please advise me which .css to edit.

Thank you SO much in advance for your assistance!
The contact plugin is implemented here: http://shanabertetto.com/index.php/contact

Hi

To make changes to active form element use code like:

Code: Select all

.gkContactForm input[type="text"]:focus,
.gkContactForm input[type="email"]:focus,
.gkContactForm textarea:focus {
    width: 100%;
}


add it to override.css

For error messages try add this code to override.css:

Code: Select all

#system-message-container {
    display: block !important;
    position: relative;
    top: 35px;
}


Hello,
Thank you for your speedy reply. However, I am still with many issues:
1.) I added the following code to my "override.css" file yet the active form fields still display a blue border on 3 of their 4 sides:

.gkContactForm input[type="text"]:focus,
.gkContactForm input[type="email"]:focus,
.gkContactForm textarea:focus {
width: 100%;
border-style: none;
}

What am I missing?

Also, how can I change the color of the red/black error messages, and also their text? I looked in a few en-GB files but could not find where that text is located. Thanks!

I have been able to successfully style the active form field boxes with this code:

.gkContactForm input[type="text"]:focus,
.gkContactForm input[type="email"]:focus,
.gkContactForm textarea:focus {
width: 100%;
background: #FFF;
border: 1px solid #b89ca8;
box-shadow: none;
outline:none;
}

However, I still need help with the error and success messages. Thanks!

Hi

What is Your problem with error messages ? It look ok when I check Your site.

Hi,
I would like to know how to customize them (i.e. change the red/black box color and the text).

Thanks!

Hi

You can change background color and text color in this one class:

Code: Select all

#system-message dd.error, #system-message .alert-error, #system-message dd.warning, #system-message .alert-warning {
    background: #e74b3c none repeat scroll 0 0;
    color: #fff;
}


Sorry for the delay in responding to this thread. Some items came up and I had to put my site construction on hold. Thank you for the above code. What I would like to also know, is how to change the actual text of the error and success messages. (i.e. "You didn't filled all necessary fields...") This is not correct english! ha ha. Thanks SO much.

Ok, update– I have located the correct language files and made the change of wording (administrator/language/en-GB/en-GB.plg_system_gkcontact.ini)
(administrator/language/en-GB/en-GB.plg_system_gkcontact.sys.ini)

One last question (I hope): How can I prevent the error messages from fading out and then popping back in when the error shows? Currently, when the error messages appear, they fade out after a few seconds and then appear again. Where is this animation controlled?

THANK YOU!

Hi

Look in file /js/gk.scripts.js:

Code: Select all

   if(jQuery('#system-message-container').length != 0){
        jQuery('#system-message-container').each(function(i, element){
              (function() {
                   jQuery(element).fadeOut('slow');
              }).delay(3500);
         });
   }