Gravity Forms CSS - A Simple Guide
ฝัง
- เผยแพร่เมื่อ 12 ก.ค. 2024
- Gravity Forms is hands down the most powerful form plugin for WordPress. That being said, it can be very hard to style to taste.
So I've created this video as a Simple Guide to Gravity Forms CSS, that will teach you 4 concepts you need to know to make it a much easier endeavor.
Subscribe to the channel!
I've also written a blog post on Gravity Forms CSS that includes a link for you to download the High-Quality Gravity Forms diagram for yourself.
Here's the link - bit.ly/2Jzqnwz
Make CSS changes without ANY coding knowledge - bit.ly/2Jcfocf - แนวปฏิบัติและการใช้ชีวิต
EXCELLENT! Good speaking voice, clear and concise instructions. Can't get any better, thank you. Oh, and no back ground music, praise the Lord!
Ha, thanks Bill for the kind words.
Yes, thank you for NO background music.
Thanks Travis, nice one!
Thx for video Travis. Helpful
hello, first off thank you for the clear explanation. I have a question though (I'm new to website building/coding/design) and I noticed you were editing on the inspector tool, so how do I apply all these changes to my site and forms?
dee saam The inspector tool changes are temporary and reset when the browser is refreshed. You have to apply the changes to your stylesheet (usually style.css). Use the inspector to “preview” changes, and then apply the changes you want to the stylesheet.
Hello Travis! THANK YOU SO MUCH FOR THIS VIDEO!! Omg. I've been trying to style Gravity Forms for years by just hacking away at various things and never understanding the bigger picture. THIS IS SO HELPFUL! I've printed your chart, and I'm on my way. I could still use help. Are you ever available for subcontracting or one-on-one training?
Hi Travis, your video helped me a lot! Just one question: If I make changes to the styling in the Form Preview just like you just did, I can I save these changes? As soon as I click away the window I loose all the changes
Hi Anne, thanks! You will have to take that block of code and put it in your CSS file of your theme (probably style.css). The browser preview is wiped out when the browser is refreshed and is just used to get an idea of what to change in the CSS file. So I use the browser inspector to tweak things, and then I will copy and paste that entire CSS block into my style.css when I am ready. Let me know if you have further questions on this. You can also reference this video ( th-cam.com/video/F1dZNCjCvro/w-d-xo.html ) on how to copy this CSS to your stylesheet.
@@TravisMedia What a fast reply, thanks! Great to have the answer, I'll try it first thing tomorrow!
Hi! thanks for the video. Can i put two css class in the field? for example: "breakpage hide". Is it possible? I need to put invisible and do a breakpage in the same css class field.
You can
@@TravisMedia thanks travis. Do u know what's the css class to hide a field in the PDF? I put "exclude" but it cannot be toegether with breakpage
@@VIVOS007 Sorry I'm not sure what you mean by exclude or breakpage. The class itself doesn't do anything without a rule defining it. So for instance, if you wanted to hide the label for the first field on the pdf you could put: #gform_13 #field_13_1 .gfield_label { display: none; }.
Or if you had added another class to label like class="gfield_label exclude breakpage" then you could do the same thing (hide it) essentially with #gform_13 #field_13_1 .exclude { display: none; } or #gform_13 #field_13_1 .breakpoint { display: none; }. Let me know if im missing something here and I'll try to help better.
@@TravisMedia In this field www.google.com/search?q=ccs+class+gravity+form&rlz=1C1CHBF_esAR835AR835&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjFksuhivfiAhV1FLkGHS2TChsQ_AUIECgB&biw=1366&bih=625#imgrc=56UXuHfejfYLNM: I just want to put a css class that hide the label (in the pdf document that will be created later) and put the "pagebreak" css class. So, pagebreak and hide I need to put it together over there. When I add "pagebreak exclude" it doesn´t work.
What i need is to make a pagebreak but without keeping the label information at the end of the pdf document. What I do is to write ¨"pagebreak exclude" in the css class field where i need the pagebreak, but it doesnt seem to work.
Is this still valid for GF v2.4.5
Hello! I'm trying to change the color on label text. The CSS i'm using that works for far is
.gform_wrapper .gravity-theme.gfield_label {
color: white; }
I need to know how to target it for just this form and not all.