0

I am using CiviCRM 4.7.24 on Drupal 7.56.

I want to embed in a different website an iframe that shows a simple contribution form of CiviContribute, and styles it according to the website.

I would like to create a simple, blank, template that only shows the donation amount and email address, and submit button. Without any Civi styles like the header, the navigation, etc. And I can't find which template is the right one to edit.

The page I would like to edit is: domain/en/civicrm/contribute/transact?reset=1&id=2

How can I locate the relevant template? Is there already a clean blank contribution template I could use?

Improve this question

2 Answers 2

Reset to default
1

The template would not have anything to do with the styling to make it look like the rest of your website. Styling is in the CSS files. If you do not want to see the header, etc. just use display:none in your CSS file.

But... Are you talking about not seeing the embedded website header, nav, etc? If so, that has nothing to do with Civi templates. If this is case, the simple fix is also CSS display:none

Improve this answer
5
  • Thank you. And which css file should I edit for that?
    – Elad
    Commented Oct 16, 2017 at 9:04
  • You can go to Administration > System Settings > Resources URL to see where your instance is pointing to for the CSS. You can then follow that path to edit the CSS or create your one path to a file of your choice.
    – Iowa Boy
    Commented Oct 16, 2017 at 23:17
  • Thank you. How do I associate a specific custom css file with a specific contribution page? I don't want to change the general css for all pages.
    – Elad
    Commented Oct 18, 2017 at 18:52
  • You still put the CSS in the same file as the rest of your CSS, but be sure to include the page id and/or Civi Form Id in the CSS selector for these items so they do not impact other parts of your site. For me, the simplest way to find the right selector and CSS is to use Google inspector. But most browsers have an inspector.
    – Iowa Boy
    Commented Oct 18, 2017 at 22:58
  • Thank you, but still it not clear. I don't want to load this custom css for all pages (like putting it in the Custom CSS in Resource URL), because this css will override styles for the whole website. And I can't specify the css selector to be specific to this page, because I need to style core elements like the header, footer, etc. I am looking for a way to include a custom css file for a specific contribution page, nothing else.
    – Elad
    Commented Oct 19, 2017 at 10:35
1

Got it. In the Contribution page > Title tab -> Introductory Message I added in the source view a 'link' tag to my custom css. This way it is only loaded from this specific contribution page.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.