https://legacy.forums.gravityhelp.com/topic/stylesheet-example Gravity Support Forums Topic: Stylesheet example, en-US Mon, 20 Apr 2026 00:42:30 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9761 Sun, 12 Sep 2010 18:56:38 +0000 Kevin Flahaut 9761@https://legacy.forums.gravityhelp.com/ <p>Cool Thanks. I'm happy I could help. </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9756 Sun, 12 Sep 2010 17:36:40 +0000 bram 9756@https://legacy.forums.gravityhelp.com/ <p>took quite some tweaking here and there, i think i got it in the right place now.</p> <p>one field is set per percentage, the other with pixels.</p> <p>couldn't get it any other way fixed the proper way.</p> <p>I'll make sure I mention gravity forms to others when they are looking for a good form with a+ support. </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9749 Sun, 12 Sep 2010 14:15:42 +0000 Kevin Flahaut 9749@https://legacy.forums.gravityhelp.com/ <p>There is a visual CSS guide that we make available for reference.</p> <p><a href="http://www.gravityhelp.com/documentation/visual-css-guide/" rel="nofollow">http://www.gravityhelp.com/documentation/visual-css-guide/</a></p> <p>The differences that I guess you refer to probably are just because of different containing elements and the way they are targeted in the CSS. For example, a lot of theme authors add styling like this..</p> <p><code>input[type=text] {color:red}</code></p> <p>and call it a day. In actuality, there are several other field types that won't inherit from this rule - tel, url, email, etc.</p> <p>We try to cover as much as we can with the default styles, but it's always going to vary somewhat based on what styles are inherited directly from the theme.</p> <p>To answer you other question, no, there's not really one "simple way" to create 2 columns everywhere. It depends on the types of fields that you want to break into columns, etc.</p> <p>Usually, you adjust the width &amp; float the first containing &lt;li &gt; element and then every other one to create the 2 columns. You just have to get those li id's and then apply everything properly. It takes some tweaking and is generally form-specific.</p> <p>example from your form</p> <pre><code>/* --- reset the width of the containing list items --*/ li#field_1_6, li#field_1_4 {width:50%} /* --- float just the left one &amp; the right will float up automatically --*/ li#field_1_6 {float:left}</code></pre> <p><a href="http://grab.by/grabs/778656adf67ff4af00360c42d5e9790b.png" rel="nofollow">screenshot</a></p> <p>Now, another note, you'll see that because we reduced the width on the containing list item, the input is smaller (the widths are defined in percentages) so you may have to tweak those values a bit to get them where you want them. </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9746 Sun, 12 Sep 2010 13:52:58 +0000 bram 9746@https://legacy.forums.gravityhelp.com/ <p>Kevin why is it possible that the input text is different for the address fields compared to the other fields?</p> <p>And is there a simple way to have to columns next to each other?</p> <p>I did </p> <p>#input_1_6 {float:left; width:25%;}<br /> #input_1_4 {float:right; width:25%;}</p> <p>but it won't have the right column next to 1_6</p> <p>ps: Im bookmarking all of this and make copies so that i can use it all on other forms too without having to have ask for everything in the future :P. </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9741 Sun, 12 Sep 2010 13:11:22 +0000 bram 9741@https://legacy.forums.gravityhelp.com/ <p>Thanks for all the help.</p> <p>I got everything the way i want it now and for the future i'll have a better idea how to use the code to modify the form.</p> <p>Maybe an idea to have these kind of codes in a document for beginners to make them more at home with CSS ?</p> <p>The only remainder is the language that i'd like changed with the pot file, but i mentioned this somewhere else. </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9737 Sun, 12 Sep 2010 12:23:15 +0000 Kevin Flahaut 9737@https://legacy.forums.gravityhelp.com/ <p>You can do this with some absolute positioning and margin tweaks. I used this to move the sub-label for the street field.</p> <pre><code>/*--- move sublabel for street field --- */ #input_1_9_1_container {position:relative} #input_1_9_1_container input {margin-top:21px; margin-bottom:8px} #input_1_9_1_container label {position:absolute; top:0px; margin-top:0;}</code></pre> <p><a href="http://grab.by/grabs/267e4228df8fbe628b65142941091c73.png" rel="nofollow">screenshot</a> </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9735 Sun, 12 Sep 2010 12:12:03 +0000 bram 9735@https://legacy.forums.gravityhelp.com/ <p>I did that on purpose because it's confusing.</p> <p>All the other tags are on top of the field, and for the address section the address, zip etc are underneath it.</p> <p>any way of switching those round?</p> <p>im gonna give the code a try. I didn't include the 1 9 5 container. </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9734 Sun, 12 Sep 2010 11:58:24 +0000 Kevin Flahaut 9734@https://legacy.forums.gravityhelp.com/ <p>looks like you left the main address field label off. You should be able to add that in the admin and it will look consistent.</p> <p>I used this to bump the postcode field over to the right. It worked okay for me</p> <p><code>#input_1_9_5_container {margin-left:3px}</code></p> <p><a href="http://grab.by/grabs/19265b166f92531e6130856b6ca1f6ba.png" rel="nofollow">screenshot</a> </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9730 Sun, 12 Sep 2010 10:05:11 +0000 bram 9730@https://legacy.forums.gravityhelp.com/ <p>had to do a little tweaking but i think i got that now.</p> <p>Is there a way to get the sub titles from the address above the fields, instead of underneath it? It looks a bit weird. The city and zip code fields looks nice with the sub titles underneath the fields, but then for the address field it looks weird because the rest doesn't look like that.</p> <p>I also tried to move the right ginput a bit to the right by adding a margin-left: 2px; but it didn't move.</p> <p>thanks again for your help. </p> https://legacy.forums.gravityhelp.com/topic/stylesheet-example#post-9716 Sat, 11 Sep 2010 14:39:19 +0000 Kevin Flahaut 9716@https://legacy.forums.gravityhelp.com/ <p>Give this a shot.</p> <pre><code>.ginput_complex input, .ginput_complex select {font:inherit!important} .ginput_complex label {letter-spacing:normal!important}</code></pre> <p><a href="http://grab.by/grabs/74c28c6594a0b60bfb696db169e44212.png" rel="nofollow">test screenshot</a> </p>