Changing page layout for Contribution pages in Joomla

Question

I have a need to remove certain Joomla styling from a specific Contributions page generated by CiviCRM, such as the main banner at the top.

I have investigated such things as editing the templates in Joomla, but that would change pages other than this particular Contributions page.

Answer 1

In Joomla, it's actually not too difficult to override the CSS of any particular page. You can give your page a custom CSS class, then append the CSS to the end of your template CSS file, or a custom CSS file that is pulled into the page.

1. If you don't already have one, create a menu item for the particular Contributions pages you want to override. You can create a hidden or links menu in Joomla that doesn't have an associated module. Select the CiviCRM - Contribution page type, then the page. You'll need to do this separately for each page.
2. Under Page Display Options for the menu item, add the new class into the Page Class box.

A few notes: When I create CSS overrides for individual pages, I usually define the page class, then use Firebug (or something similar) to test the overrides prior to uploading them. Depending on how and when the CSS of your template loads, you may need to make use of the !important declaration.

Also, the use of display:none usually works for me in the case of having to hide certain elements, but there is some debate about when you should and shouldn't use that.

Another option that's a little more work than creating a template override is to create an entirely new template. One of the features that Joomla has over certain other CMSes is the ease with which you can assign different templates to individual pages via the template manager. This would completely avoid having to hide certain elements, because you would simply leave them out of your new template. You could start with your current template, and just remove the pieces that you don't need. Install it via the Extension manager, and assign it to your Contribution pages. Note that you will still need to create a menu item for each Contribution page in question.

Answer 2

LMK Web's answer is pretty good, and Joomla-specific. CiviCRM provides similar ways of doing the same thing, such as using a .extra.tpl file.

If you go the .extra.tpl route, you can make sure the CSS is only appended to a single contribution page by putting the file in the appropriate folder structure, as detailed here. For instance, to modify the event registration page for event ID 14, put the file here:

/<path to CiviCRM custom templates folder>/CRM/Event/Form/Registration/14/Register.extra.tpl