How to Apply External CSS to a Boingnet Landing Page

Home/Help Article/How to Apply External CSS to a Boingnet Landing Page

How to Apply External CSS to a Boingnet Landing Page


Boingnet allows you to use external CSS or style sheets in your landing pages.  An external style sheet is a separate file where you can declare all the styles – font, size, color, line spacing etc – that you want to use on your microsite.  You then link or call the external style sheet from all your microsite’s pages. These are very useful when you have more than one microsite that uses the same styles and they can be re-used easily from campaign to campaign.  If you’re creating a microsite in Boingnet and you’d like to use external style sheets, follow the instructions below.

Step One – Upload the CSS files to Your Asset Manager

In this example, we’re going to upload the following CSS files to our account’s Asset Manager:

https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900

https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900

http://v2.boingnet.com/userfiles/client/file/campaign01/css/Landing-Page-temp01-styles.css

From the Home Page, click Build and then select Assets to access your Asset Manager:

 

You’ll navigate to your account’s Asset Manager:

  • Select the appropriate folder.  For example, to upload a CSS file, select File
  • Click the green +Upload button
  • Click Add Files
  • Select the CSS File(s)  you want to upload, and click Open
  • Click Upload to upload your file(s) to the Asset Manager

 

Once you have uploaded the CSS files to your Asset Manger, you’ll be able to use them in any of your campaign microsites.

Step Two:  Call the CSS from Your Microsite:

Add the code to each page in your campaign’s microsite using the instructions below.

From the Home Page, click Build and then select Microsites:

 

You’ll navigate to your Microsites Page.  Find the microsite you’d like to edit, click the Action button and then select Edit:

 

Click the Edit button to the right of the page you’d like to edit:

 

You’ll be able to edit the metadata for that page.  Add the code below to the Custom Meta Tag area to link to the CSS Files in your Asset Manager.  In the example below, we are calling the CSS files we uploaded to our Asset Manager in Step One – see screen shot below:

<!– Template Font Family –>

<link href=”https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900” rel=”stylesheet”>

<link href=”https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900” rel=”stylesheet”>

<!– Template Stylesheet –>

<link href=”http://v2.boingnet.com/userfiles/client/file/campaign01/css/Landing-Page-temp01-styles.css” rel=”stylesheet” type=”text/css”>

 

When you are done editing the Custom Meta Tag area click Save.  To use these CSS files in each page on your microsite, remember to repeat this process for each page. When done editing, page down and click the Close button to save your microsite.

Contact Our Support Forums for Help

We are perpetually seeking to evolve our product as well as our support process. If you didn't find your answer here take a moment to visit our support forums as well as submit your ideas on how we can bring Boingnet to the next level!

Support Forums

Leave a Comment