Editing contact form CSS

GK User
Tue Jan 10, 2012 11:03 pm
I have an installation of the Boutique template, and have set up a contact form with name & address and such.

The name and address appear to left-align, whereas the contact form is a narrow column right-aligned. This leaves a large unsightly gap in the middle.

I've been digging through the .PHP and .CSS files trying to find out where this is defined, but can't seem to locate it. Found the components php, but those don't seem to have code for the layout.

It would make sense that this would be in a css file somewhere... but where? That, or other suggestions?

Thanks!
User avatar
Fresh Boarder

GK User
Tue Jan 10, 2012 11:21 pm
The .php files will be in the templates override folder template/html/com_contact folder.

The css should be in template/css/joomla.css - template/css/stylex.css - template/css/layout.css

Do you have firebug installed?

If you want to make changes you should apply them to your override.css file. That will make life easier when you apply updates.
User avatar
Expert Boarder

GK User
Wed Jan 11, 2012 12:09 am
Very good - it was in the joomla.css file, and firebug was most helpful in locating the line.

I didn't know about the override file - will that override all of the other CSS files in that directory - just duplicate the line with the values I want?

Thank much!
User avatar
Fresh Boarder

GK User
Wed Jan 11, 2012 12:40 am
Yes all you need to do is place the css fragment you wish to effect in the override.css file. For example if you only want to change the colour and nothing else just use the color portion of the statement. There is no point putting in stuff you're not overriding.

Also make sure you enable the override style sheet in the templates advanced parameters settings.

Another thing is the use of !important to add weight to the overrides e.g.

Code: Select all
#some_id_or_class {
  height: 30px!important; /* Comments will also help remind you later */
  overflow: hidden;
}


Ideally you should make all your css changes via the override.css file so that future updates don't overwrite your changes.

EDIT: Yes it should override any css style sheet in the cascade before as it's should be the last sheet to load.
User avatar
Expert Boarder

GK User
Wed Jan 11, 2012 6:50 pm
An addition to editing contact form.


How do you add a new field such as phone number in the contact form?

Marcus
User avatar
Fresh Boarder

GK User
Wed Jan 11, 2012 7:10 pm
Personally I think this is a nice solution Fox Contact it's easy 'n quick to set-up and very functional. You use it in place of the default contacts page. You can create menu links in component, use the load module function to place it in an article or as a regular module.

EDIT: Do you mean collecting details of the person contacting the site or for the contact details? I have assumed the former in the opening paragraph.

Enjoy
User avatar
Expert Boarder


cron