Return to previous page

Alert boxes css code location - by Jimbo

This topic has 7 replies, 3 voices, and was last updated 9 years, 8 months ago ago by Eva Kemp

Jimbo

Participant

March 30, 2015 at 16:47

Hi,

I like the alert box’s as per this page

https://www.8theme.com/demo/woopress/fullwidth/?page_id=15809

Where can I find the css for these alert boxes as I would like to add this to my contact form messages on submitting the contact form

Thank you in advance.

#53264 Copied

6 Answers

Brian Johnson

Member

March 30, 2015 at 17:36

This is .info .success .error .warning classes which are added to the tag and they are already included in your style.css. They should look fine with your form.

With best regards
Brian Johnson

#53286 Copied

Jimbo

Participant

March 30, 2015 at 18:49

Brian,

Thanks for this I will implement this into contact form 7

#53339 Copied

Eva Kemp

Support staff

March 30, 2015 at 19:52

Hello,

You’re welcome.

Regards,
Eva Kemp.

#53363 Copied
Jimbo

Participant

March 30, 2015 at 22:54
Brian / Eva,

managed to add the css so the error / success message boxes look the same throughout the theme, makes a huge difference IMO compared to the standard error messages.

I have one issue though, I am trying to add the X for error and the tick for success but somehow it does not show, is there something I am missing?
```
/* -- contact form messages -- */
div.wpcf7-validation-errors {
border: 1px solid transparent;
background-color:#f2dede;
font-size: 14px;
color: #767676;
padding: 15px;
float: left;
width: 100%;
position: relative;
padding-left: 60px;
line-height: 24px;
margin-bottom: 20px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;
}
div.wpcf7-mail-sent-ok {
background-color:#dff0d8;
border-color:#d6e9c6;
font-size: 14px;
color: #767676;
padding: 15px;
float: left;
width: 100%;
position: relative;
padding-left: 60px;
line-height: 24px;
margin-bottom: 20px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;
}
div.wpcf7-validation-errors:before {
content: "\f00d";
}
```
Please web page in private.

Image below

Please, contact administrator
for this information.
#53411 Copied
Jimbo

Participant

March 30, 2015 at 23:50

No problem …. I sorted this out.

I missed the font-family out and some positioning too

I now have a much better looking contact form!

ing error and success messages on my contact form!

#53413 Copied

Eva Kemp

Support staff

March 31, 2015 at 09:17

Hello,

We’re glad you’ve resolved this issue.

Have a nice day!
Regards,
Eva Kemp.

#53471 Copied
Viewing 7 results - 1 through 7 (of 7 total)