field-widths-are-not-the-sameIn our last aiContactSafe tutorial we created a new field, Website URL. After testing the form, we noticed that the width of the textbox for the user's web address is not as long as the other fields (such as Name, Email, and Phone). To make the form look more professional, we would like the text fields to all have the same width.

 

How are aiContactSafe field width's set by default?

The default width for fields in aiContactSafe are set in a CSS file:

/media/aicontactsafe/cssprofiles/profile_css_1.css

The width is set to 240px, as you can see in the following section of code:

div#aiContactSafe_mainbody_1 input#aics_name {
    width:240px;
}
div#aiContactSafe_mainbody_1 input#aics_email {
    width:240px;
}
div#aiContactSafe_mainbody_1 input#aics_phone {
    width:240px;
}
div#aiContactSafe_mainbody_1 input#aics_subject {
    width:240px;
}

 

Modifying field widths withing the proviles CSS

Each profile in aiContactSafe can have its own CSS file to help you style each form uniquely. We can use this CSS to make the fields look more uniform.

  1. Find the ID of the Input

    View the page source of your form and find the code for the field you would like to change. The important thing to note is the ID of the text input (which we've highlighted in red below):

    <div class="aiContactSafe_row" id="aiContactSafe_row_aics_websiteurl"><div class="aiContactSafe_contact_form_field_label_left"><span class="aiContactSafe_label" id="aiContactSafe_label_aics_websiteurl" ><label for="aics_websiteurl" >Website URL</label></span> </div><div class="aiContactSafe_contact_form_field_right"><input type="text" name="aics_websiteurl" id="aics_websiteurl" value="http://" /></div>

  2. Edit the CSS of the Profile

    Within your Joomla 2.5 dashboard, hover over Components in the top menu, then hover over aiContactSafe and click Profiles. Click the Profile you would like to edit, and then click the Edit CSS button.
    click-the-edit-css-button

    Based upon the ID of your field, add the following CSS code and then click Save in the top right menu.

    div#aiContactSafe_mainbody_1 input#aics_websiteurl {
        width:240px;
    }
    

    After saving the change, test your form. As you can see in our screenshot below, we were able to get the Website URL field to have the same width as the other fields!
    after-editing-profiles-css

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2237
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5671

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
Stack Exchange Q&A site proposal: Joomla

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!