Changing or styling the layout of the notification message

Gravity Support Forums » Plugin Support » Gravity Forms

Carsten
Member

Hi

I have tried searching the forums, but no luck on this particular question.

I have made a notification message that is being build in functions.php (http://www.gravityhelp.com/forums/topic/making-a-result-page-based-on-conditional-logic)

What I am guessing is code to control the layout looks like this:
$confirmation = "<div id='gforms_confirmation_message' style='text-align:left; padding: 10px;'>
Looking at this code, I am thinking that the text in the notification message should be aligned to the left, but when I use the form, the text I get is centered.

1. I would very much like the text to be aligned to the left, like the text in this forum is aligned to the left. Can you help me to do this?

I do not know if it makes any difference to the notification message, but the form is on multiple pages, and it is using ajax.

2. One last question, can I get the browsers back button to work? Right now it does not work when using the form, it would be nice if I could get it to work.

Thanks
Carsten

Posted 12 years ago on Monday September 5, 2011 | Permalink
Kevin Flahaut
Administrator
I really have no idea what you're talking about with the first part? Are you wanting to actually change the confirmation message markup for some reason? It sounds like you just need to target the container div and change the styling with CSS. You can do that by adding this to the end of your theme stylesheet.
```
[css]
body #gforms_confirmation_message  {text-align: left}
```
As far as the last question, No, if you're using the Ajax submission method, you're not going to have a browser history or any "back" state for the button.. that's the whole point, Ajax submits the form without actually refreshing the page.. there's nothing to go back to. Is there any specific reason you need to use Ajax? If not, just disable that and you're browser back button should work for you.
Posted 12 years ago on Monday September 5, 2011 | Permalink
Carsten
Member

Hi Kevin

Thank you for your answer, I had to disable Ajax to get it to work, but now my notification message aligns to the left, very nice, Thanks!

The first part is me, trying to let you know, what it is that I am doing to "make" the confirmation message. Chris made some example code (http://pastebin.com/EJEFYPW1) that I have used, and in the beginning of that code it has that div tag, that I am guessing, is also "trying" to control the layout.
And I wanted to let you know that, because that might have an impact on the answer.

A conclusion to this question is that:
1. Now my notification message is aligning to the left, and I am very happy about that!
2. I might have to much code trying to control the layout, both in the style sheet and in functions.php

I did not need Ajax, I just seemed like the form loaded a little faster with Ajax turned on, but after turning it off, I am thinking that is not the case, and I have no problem turning it off. (I have no test of the speed of the form, it was just a feeling)

Thanks
Carsten

Posted 12 years ago on Tuesday September 6, 2011 | Permalink
Kevin Flahaut
Administrator

Great, I'm glad that worked for you.

Posted 12 years ago on Tuesday September 6, 2011 | Permalink
Chris Hajer
Key Master
Carsten, this line:
```
<div id='gforms_confirmation_message' style='text-align:left; padding: 10px;'>
```
Can be whatever you want. I just used that to ensure that the confirmation we built in functions.php was placed in the same div as a confirmation would be if you just used "text" for your confirmation settings. Doing it this way ensures that the confirmation message we built is styled just as a normal text confirmation would have been. If you want to affect the look here, you can do as Kevin suggests, by applying styles to the body #gforms_confirmation_message element. That will affect all forms' confirmation message.

You could also do this:
```
<div style='text-align:left; padding: 10px; border:5px solid #000000; background: yellow;'>
```
You could add any inline styles at all to this opening div. I added some deliberately bold styles there so you can see what it looks like.

A 3rd way to do it would be to give the confirmation a new id or class, then add styles to your stylesheet. There are many ways to accomplish the same result.
```
<div id='gforms_confirmation_message' class='hand_made'>
```
Then add a block to your style.css to style the .hand_made class:
```
[css]
body #gforms_confirmation_message .hand_made {
    border: 1px solid red;
    padding: 10px;
    text-align: left;
    font-size: 24px;
}
```
Posted 12 years ago on Tuesday September 6, 2011 | Permalink
Carsten
Member

Hi Chris, Kevin and the rest of the GF team.

I have moved my form to a different website, than the one where I developed it, and now I am having problems with the styling, I admit that I do not know much about css, but I am learning along the way.

My problem now seems to be that the stylesheet from GF "overwrites" the styles that I am trying to implement in my own stylesheet. Or that the style that I am trying to implement, is not overwriting the style from the GF stylesheet.

When I look at my page in Firebug, it looks like the styling for the (#gforms_confirmation_message) comes from the GF style sheet, even though I have added the above sugested lines of code in my stylesheet:
(#gforms_confirmation_message .hand_made) I have also tried with body in front, but that does not change anything, I have also tried to only have .hand_made, but not working either.

What information do you need to be able to help me? Or do you have enough to go by here?

The website where I am having this problem is (http://www.miranova.dk/) the form is located here: (http://www.miranova.dk/investerings-og-pensionstest) the page with the form has not been made public anywhere else than here, because I am having problems with the styling.

Thanks
Carsten

Posted 12 years ago on Monday September 12, 2011 | Permalink
Carl Hancock
Administrator

The way CSS inheritance works if you don't properly define your selector when applying your CSS then it may not apply it and may be overridden by default styles. So you have to target and apply your CSS correctly otherwise it may not work due to other factors such as styles in your theme.

I would suggest looking at this documentation which discusses how to properly target and style form elements:

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

Posted 12 years ago on Monday September 12, 2011 | Permalink
Carsten
Member

Hi Carl

Thank you for your link, it made me do some more testing, and it turns out that this code actually did the trick:
body #gforms_confirmation_message.hand_made
The big difference is that now there is no space between #gforms_confirmation_message and .hand_made

I do not know why this worked, and if you could explain it to me, I would appreciate that. :-)

And I am sure that the link will come in handy now when I have to style the rest of the form, not only the confirmation message.

Thanks
Carsten

Posted 12 years ago on Monday September 12, 2011 | Permalink
Kevin Flahaut
Administrator
If the "hand_made" class is applied to your "gforms_confirmation_mesage" div, then this would be correct
```
[css]
body #gforms_confirmation_message.hand_made {color:red }
```
That means that the element has the ID of "gforms_confirmation_message" AND the class of "hand_made"

if you leave the space between the two in the rule..
```
[css]
body #gforms_confirmation_message .hand_made {color:red }
```
that means you're targeting an element with a class of "hand_made" that is a CHILD of the "gforms_confirmation_message" element which is not the same thing.
Posted 12 years ago on Wednesday September 14, 2011 | Permalink
Carsten
Member

Hi Kevin

Thank you for your explanation, I think that I understand it, and that actually it is working as expected.

Thanks,
Carsten

Posted 12 years ago on Thursday September 15, 2011 | Permalink
Kevin Flahaut
Administrator

Wonderful. Thanks for the update.

Posted 12 years ago on Thursday September 15, 2011 | Permalink

This topic has been resolved and has been closed to new replies.