GENWiki

Premier IT Outsourcing and Support Services within the UK

User Tools

Site Tools


rsformpro:skinning_your_form_with_css

Table of Contents

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

<fieldset class="formContainer formHorizontal" id="rsform_{global:formid}_page_0">
	<div class="formRow">
		<div class="formSpan12">
			<div class="rsform-block rsform-block-intro{Intro:errorClass}">
					{Intro:body}
			</div>

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, this class is assigned to every field, and you can style this to effect every field on the form by adding, for example a border, margins, colours, even shadows and gradients.
  • rsform-input-box, this class is assigned to all the text boxes on the form. Style this to change all text boxes. There are corresponding classes for all field types so check out the HTML.
  • rsform-block-fieldname, yes, RsFormPro does it again by adding a class to each field's div with the name of the field in it, allowing you to quickly add a style for each field. If your field name is emailaddress, then you would simple need to create a class .emailaddress { }.

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

<style>
.formRow {
  width: 100%;
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  border-radius: 25px;
  background-color: 000000;
  box-shadow: 2px 2px 5px #aaaaaa;
  margin-bottom: 10px;
 
}
</style>

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

<style>
.rsform-block {
  padding: 10px 10px 20px 10px;
  border: 1px solid #BFBFBF;
  border-radius: 10px;
  color: white;
 
  background: #3b679e;
  background: -moz-linear-gradient(left,  #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
  background: -webkit-linear-gradient(left,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
  background: linear-gradient(to right,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=1 );
}
</style>

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…

<style>
.niceblue {
  padding: 10px 10px 20px 10px; 
  border: 1px solid #BFBFBF; 
  border-radius: 10px; 
  color: white;   
  background: #3b679e;
  background: -moz-linear-gradient(left,  #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);
  background: -webkit-linear-gradient(left,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
  background: linear-gradient(to right,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=1 );
 
}
</style>

And in your Free Text Field…

<div class="niceblue">Welcome to this fantastic form</div>

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="border: 5px solid black;"

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

martin-bottom:10px !important;

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!

/data/webs/external/dokuwiki/data/pages/rsformpro/skinning_your_form_with_css.txt · Last modified: 2019/08/07 15:49 by genadmin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki