How do I add CSS to an eTrigue-hosted Landing Page? – eTrigue Support

Advanced web page developers may wish to create custom Landing Pages in DemandCenter that use CSS. You can add CSS to your Landing Pages via two methods:

1) Linking to an external CSS file:

Go to Assets > Explore Landing Pages.
Create or Edit your Landing Page.
If your landing page does not already include an eTrigue-enabled Form, follow the steps to insert a form into a Landing Page.
Click the HTML button, in the WYSIWYG toolbar, to view your Landing Page Template in HTML mode.
Locate the <head> tag at the beginning of the code.
Insert the CSS after the <head> tag, but before the </head> tag by using the following syntax:
```
<head>
 <style type="text/css">
 @import url("http://PATH-TO-CSSFILE.css");
 </style>
</head>
```
Note -

In this example, PATH-TO-CSSFILE.css represents the full URL of the external css file.

the <link rel="stylesheet"> method to insert CSS is not supported and will not work .
To retain your changes, click either:
- Save: Overwrite the preexisting Landing Page with which you started, with your changes.
- Save As: Create a NEW Landing Page that includes your changes.
After saving your work, you can review your changes on the LIVE web page by clicking on the View link, next to Landing Page URL, at the top of the screen. A new window in your browser will open, and you will be directed to the LIVE Landing Page.

2) Inserting the CSS directly into the Landing Page code:

Go to Assets > Explore Landing Pages.
Create or Edit your Landing Page.
If your landing page does not already include an eTrigue-enabled Form, follow the steps to insert a form into a Landing Page.
Click the HTML button, located in the WYSIWYG toolbar, to view your Landing Page Template in HTML mode.
Locate the <head> tag at the beginning of the code.
Insert your CSS code after the <head> tag, but before the </head> tag using the following syntax:
```
<head>
 <style type="text/css">
 Your CSS goes here
 </style>
</head>
```
To retain your changes, click either:
- Save: Overwrite the preexisting Landing Page with which you started, with your changes.
- Save As: Create a NEW Landing Page that includes your changes.
After saving your work, you can review your changes on the LIVE web page by clicking on the View link, next to Landing Page URL, at the top of the screen. A new window in your browser will open, and you will be directed to the LIVE Landing Page.

To learn how to add JavaScript to a DemandCenter Landing Page, click here.

To learn how to create a new DemandCenter Landing Page, click here.

To learn how to edit an existing DemandCenter Landing Page, click here.

To learn more about DemandCenter's WYSIWYG Landing Page Editor, click here.