rsformpro:skinning_your_form_with_css
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revision | |||
rsformpro:skinning_your_form_with_css [2019/08/07 15:41] – genadmin | rsformpro:skinning_your_form_with_css [2019/08/07 15:49] (current) – genadmin | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | RsFormPro! Is a fantastic tool for quickly generating website forms within Joomla. The product keeps things simple, whilst at the same time providing the power for those who can wield it. | ||
+ | When knocking out a form, you may soon realise that whilst its all layed out correctly and things do line up, the formatting is quite plain. This is by design of course, and using the tools provided you can take that plain unexciting layout and make it your own. | ||
+ | |||
+ | ====== The HTML ====== | ||
+ | |||
+ | When RsFormPro generates the form for Joomla, it converts it into plain HTML. The form will look something like this | ||
+ | |||
+ | <code HTML> | ||
+ | < | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | {Intro: | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | We can see that RsFormPro has already setup some classes that we can style quickly and easily. | ||
+ | |||
+ | * formRow, this class applies to each row within the form. Most forms may only have one row, but adding rows gives you the ability to style them. | ||
+ | * rsform-block, | ||
+ | * rsform-input-box, | ||
+ | * rsform-block-fieldname, | ||
+ | |||
+ | In RsFormPro, under Form Properties, and in CSS and Javascript you will find a box where you can place your very own CSS, and with its late binding this CSS will override any existing (should do, there are some exceptions but they are complex and beyond the scope of this article). | ||
+ | |||
+ | ===== Simple formRow styling ===== | ||
+ | |||
+ | <code CSS>< | ||
+ | .formRow { | ||
+ | width: 100%; | ||
+ | padding: 10px 10px 20px 10px; | ||
+ | border: 1px solid #BFBFBF; | ||
+ | border-radius: | ||
+ | background-color: | ||
+ | box-shadow: 2px 2px 5px #aaaaaa; | ||
+ | margin-bottom: | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | In this example, we've taken the form rows, added a thin border, added some padding inside the border, added nice round corners, set a small shadow and added a margin at the bottom to space out rows on the page. Try it, looks awesome. | ||
+ | |||
+ | ==== Simple rsform-block Styling ==== | ||
+ | |||
+ | <code CSS>< | ||
+ | .rsform-block { | ||
+ | padding: 10px 10px 20px 10px; | ||
+ | border: 1px solid #BFBFBF; | ||
+ | border-radius: | ||
+ | color: white; | ||
+ | | ||
+ | background: #3b679e; | ||
+ | background: -moz-linear-gradient(left, | ||
+ | background: -webkit-linear-gradient(left, | ||
+ | background: linear-gradient(to right, | ||
+ | filter: progid: | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | This is great! and allows quick and easy form-wide styling to be applied, but how about just changing one element, say a heading or important field? | ||
+ | |||
+ | RsFormPro yet again has the flexibility to provide inline styles on all(most) field types. For "Free Text" fields simply add a class and then embed the CSS class within a div, for example... | ||
+ | |||
+ | <code css> | ||
+ | < | ||
+ | .niceblue { | ||
+ | padding: 10px 10px 20px 10px; | ||
+ | border: 1px solid # | ||
+ | border-radius: | ||
+ | color: white; | ||
+ | background: #3b679e; | ||
+ | background: -moz-linear-gradient(left, | ||
+ | background: -webkit-linear-gradient(left, | ||
+ | background: linear-gradient(to right, | ||
+ | filter: progid: | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | And in your Free Text Field... | ||
+ | < | ||
+ | <div class=" | ||
+ | </ | ||
+ | |||
+ | But we may want some more granular styling, say to increase the border of a text box to highlight its importance. This can be done by adding an inline style. Select your text box form field and EDIT it. Go to Attributes and then down to Additional Attributes. Whatever you stick in here is going to wind up in the HTML so we can do something like... | ||
+ | |||
+ | < | ||
+ | style=" | ||
+ | </ | ||
+ | |||
+ | And now for this text box, we will have a 5px black border, thicker than the usual text fields. | ||
+ | |||
+ | Important Note: Whilst most styles can be easily overridden in your custom classes, some cannot. An example would be margin-bottom within rsform-block. This cannot be overridden because a higher class defines it, but its not the end of the world, if you really want to change the margin-bottom to 10px instead of the default 18px then simply use | ||
+ | |||
+ | <code css> | ||
+ | |||
+ | I could go on and on with an endless stream of examples, but that's just silly. I hope, by trying some of the examples above you now have a grasp of how to style RsFormPro. Take what you've learned, lookup CSS online cut/paste and style away! |