Coffe Template - Single Contact Form

How can I change the layout of the Coffe Template Single Contact page to look like the "Game Magazine" or "therealdesign" templates single contact pages? Its like there are 2 columns. I like the Address on the Left and the Contact on the Right. How can that be done with the Coffe Template?

Also is there a way to edit this text "Send an email. All fields with an * are required." that is under the Contact Form.

How can I add text above the message block or in the message block?

Thanks

Hi,

You can download GameMagazine template and use its contact layout to use for your Coffe, the file is \templates\gk_game_magazine\html\com_contact\contact\default.php

I can only advise that, any further customization you must do yourself.

Cheers,

Thanks for your response,

I found the \templates\gk_game_magazine\html\com_contact\contact\default.php
But I do not have a \templates\coffe\html\com_contact\contact\default.php

Under the root I do have a components\com_conctact\views\contact\tmpl\default.php

First I renamed the original php, tested the contact site, and got the 500 error. So it seems like its the right php file. I then copied the gk_game_magazine default.php and it looked the same as it originally did. Same layout, same colors, 1 column, not 2...

This is very new to me, so please explain it in a way that I can follow.

Also, can you point me in the right direction as to where to edit the "Send an email. All fields with an * are required."

Thanks

Revert back your files if you done any changes.
Do not change anything in /components/ folder as this is original joomla folder and any updates in joomla will loose your changes.
Do work in templates/gk_templatename/html/ folder for any custom changes. Please also note your changes in case you need to update template files.

1. Copying style from game_magazine.
Copy com_contact folder from : "\templates\gk_game_magazine\html\"
Into : "\templates\gk_coffe\html\"
So you have following folder and its contents : "\templates\gk_coffe\html\com_contact\"

2. Copying image files.
Copy following images from "\templates\gk_game_magazine\images\icons" into "\templates\gk_coffe\images\icons"

Code: Select all

contact_mail.png
contact_phone.png
contact_fax.png
contact_mobile.png
contact_web.png


3. Adding css in override.css
Enable Css override option from template settings > advanced settings > css override "on" and add below codes into "\templates\gk_coffe\css\override.css"

Code: Select all

/* Contacts custom code starts here */
p.contact-position { margin: -14px 0 32px; font-size: 10px; text-transform: uppercase; color: #333 }
div.contact-misc { margin: 20px 0 50px }
div.contact-misc p { margin: 0 0 30px; }
.gkFirst { clear: both; float: left; }
.gkSecond { float: right; }
.contact { padding:0; }
.contact h3 { font-size: 180%; margin-top:5px; }
.contact-category { padding:0; }
.contact-category #adminForm fieldset.filters { border:0; padding:0 }
.contact-image { margin:10px 0; overflow:hidden; }
.contact-image img { }
.contact-contactinfo span { display: block; }
address { border-left: 1px solid #e5e5e5; padding-left: 20px; margin:0; }
span.contact-image { margin-bottom: 10px; overflow:hidden; display:block }
.contact-address { clear: both; min-height: 50px; margin: 20px 0 0; padding: 0 0 0 60px; background: url('../images/icons/contact_adress.png') no-repeat 0 4px; }
div.contact-contactinfo p { margin: 20px 0 0; padding: 0 0 0 60px; }
div.contact-contactinfo p span { min-height: 40px; padding-left: 20px; border-left: 1px solid #e5e5e5 }
.contact-emailto { background: url('../images/icons/contact_mail.png') no-repeat 0 4px; }
.contact-telephone { background: url('../images/icons/contact_phone.png') no-repeat 0 4px; }
.contact-fax { background: url('../images/icons/contact_fax.png') no-repeat 0 4px; }
.contact-mobile { background: url('../images/icons/contact_mobile.png') no-repeat 0 4px; }
.contact-webpage { background: url('../images/icons/contact_web.png') no-repeat 0 4px; }
.contact-contactinfo { font-style: italic }
span.contact-street { margin-bottom: 0px }
.contact-email div { padding:2px 0; margin:0 0 10px 0; }
.contact-email label { width:17em; float:left; }
#contact_textmsg { padding: 2px 0 10px 0 }
#contact-email-copy { float:left; margin-right:10px; }
#contact-form dt { margin: 6px 0 0 3px; }
.contact .button { float:none !important; clear:left; display:block; margin:20px 0 0 0 }
.jicons-icons { display: none; }
.jform_contact_first { float: left; width: 58% }
.jform_contact_secend { float: right; }
.contact-email input, .contact-email textarea { clear: both; display:block; }
.contact label#jform_contact_email_copy-lbl { font-size: 11px; line-height: 2.4; margin-left: 25px; position: absolute; }
.contact #jform_contact_message { width: 300px; }
.contact #jform_contact_emailmsg, #jform_contact_email, #jform_contact_name { width: 300px; }
/* Contacts custom code ends here */


4. Removing picture from contact. Add it in wysiwyg editor if you like.
Go to joomla admin > Components > Contacts > Contacts > Select "Eli Manning" ( demo user )
On the right Under Contact details > image , click on clear button to clear image or under Display Options hide Image.
On the left in WYSIWYG editor add some content or add picture.

Save & Close.

See you around...

Thank you again, that was very helpful. Got it working. Now...
Is there a way to shrink the gap between the contact and contact form. there is a large space between them. http://myipcameras.com/contact.html

Also, where is the joomla code to alter "Send an email. All fields with an * are required." You don't have to tell me how, if you could just point me in that direction. I can't find it anywhere.

Thank you so much,

You can make following changes in css which they are towards to end:
From:

Code: Select all

.jform_contact_first { float: left; width: 58% }
.jform_contact_secend { float: right; }


Change it to below

Code: Select all

.jform_contact_first { float: left; margin-left: 50px; width: 50% }
.jform_contact_secend { float: right; margin-right: 50px; }


If you mean to change those words or line please follow below;

Find File: \language\en-GB\en-GB.com_contact.ini
Find Line: 37

Code: Select all

COM_CONTACT_FORM_LABEL="Send an email. All fields with an * are required."


See you around...