Joomla Templates Club 406,261 posts

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1086728

Hi,

You can try with this custom CSS:

.t3-content .contact .panel-group .panel:first-child {
    height: 231px !important;
}

.t3-content .contact .panel-group .panel:first-child .panel-collapse.collapse {
    display: block !important;
}

put into the CSS file: root/templates/ja_medicare (your default template)/css/custom.css (Create this file if it doesn’t exist).

Regards

[drlapming Friend drlapmingJoin date: August 2016Posts: 68Downloads:25Uploads:34]

#1086737

hi, i tried and it affects the homepage instead of the contact form… can you help to check again?

LM SKINCENTRE

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1086739

You can try adding a page class for the menu item of that contact page, then update that class to above CSS code, it will be applied to that page only.

https://docs.joomla.org/Using_Class_Suffixes

[drlapming Friend drlapmingJoin date: August 2016Posts: 68Downloads:25Uploads:34]

#1086828

Hi, I tried to the locations of the base and new classes of the contact form but failed.
and I don’t know how to add the new page class for the menu item…

LM SKINCENTRE

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1086862

Hi,

I added a sample Page Class for this menu item on your site: http://prntscr.com/i104kq

And updated the custom CSS:

.customContact .t3-content .contact .panel-group .panel:first-child {
    height: 231px !important;
}

.customContact .t3-content .contact .panel-group .panel:first-child .panel-collapse.collapse {
    display: block !important;
}

And it’s working now: http://lmskincentre.com/%E8%81%AF%E7%B5%A1%E6%88%91%E5%80%91

[drlapming Friend drlapmingJoin date: August 2016Posts: 68Downloads:25Uploads:34]

#1086874

Hi, Thanks for helping me to set up the Page Class for the contact.
I think the problem for my visitors is the "contact form" tab instead of the "contact" tab.
As I mentioned earlier, is it possible to:

1. putting contact form in the first tab and is NON-collapsible
2. put "contact" in the 2nd tab and "opening hours" in the 3rd tab and are collapsible?
   If it’s not possible, can we maintain the same order of the tab but making the second "contact form" tab non-collapsible? The layout should be like this https://prnt.sc/i10o7r
   I tried to change the first-child to second-child for the css code but it doesn’t work. can you help?

LM SKINCENTRE

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1086931

Hi,

You will need to customize in PHP code of com_contact, we follow the same structure in Joomla core, the associated PHP file is: root/templates/ja_medicare/html/com_contact/contact/default.php

Then you can apply above style to make the first slide opening.

Regards

[drlapming Friend drlapmingJoin date: August 2016Posts: 68Downloads:25Uploads:34]

#1086942

thanks for your prompt reply. I am not quite familiar with html coding. is there a simple way just to make the "contact form" tab non-collapsible?

LM SKINCENTRE

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1086948

I think that you can search for a Joomla extension which supports contact form and easy to customize the form. You can seek for one in JED: https://extensions.joomla.org/

[drlapming Friend drlapmingJoin date: August 2016Posts: 68Downloads:25Uploads:34]

#1086954

as I only need the contact form tab to be non-collapsible, you mean that i cannot do that by modifying the custom css file?

LM SKINCENTRE

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1087207

Try with my tweak here:
1) Backup this file: root/templates/ja_medicare/html/com_contact/contact/default.php

2) Download attached file and copy to replace above file

3) open the custom.css and edit above CSS to:

.t3-content .contact .panel-group .panel:first-child {
    height: 790px !important;
}

.t3-content .contact .panel-group .panel:first-child .panel-collapse.collapse {
    display: block !important;
}

---

Attachments:

1. default.php_-2.zip

[drlapming Friend drlapmingJoin date: August 2016Posts: 68Downloads:25Uploads:34]

#1087213

it works perfectly! Thanks a bunch!
https://prnt.sc/i1l2xy

LM SKINCENTRE

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1087215

You’re welcome!

[Author]

Posts