Expand my Community achievements bar.

We are excited to introduce our latest innovation to enhance the Adobe Campaign user experience — the Adobe Campaign v8 Web User Interface!
SOLVED

How to override the form rendering of a webApp

Avatar

Level 4

Hello all,

We have based our various email list subscription forms on the standard serviceSubLandingPage webApp template.

Functionally it now works fine (thanks to this forum!).

We styled the form fields in the webapp itself, but we cannot figure out how to override the CSS to get the page width down to 600px, so that it renders in a better way on mobile devices.

We made a new form rendering document, based on the out of box Landing pages form rendering document.

We can see that it references /nl/crmLandingPage.css, and we want to override the .page selector with a width of 600px.

Pretty simple, yes? But when we do this, nothing happens.

From what I've seen in the documentation I can override the styles this way.

I've even copied the entire contents of /nl/crmLandingPage.css into my new Landing Pages form document and deleted the reference to /nl/crmLandingPage.css, and modified the styles there and still no change......am I missing something?

Adobe Campaign Premium 6.1.1 8705

Any help or tips are greatly appreciated!

Regards,

Eugene

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hello Eugene,

Sorry for not answering before. Have you tried the following:

  1. Go to the Rendering tab of the web app properties.
  2. In the Template field, click the magnifying glass icon.
  3. From there you should be able to enter the CSS that you want to override. If that does not work, try using the !important instruction, in case there are several css.

Hope this helps,

Florent.

View solution in original post

2 Replies

Avatar

Correct answer by
Level 10

Hello Eugene,

Sorry for not answering before. Have you tried the following:

  1. Go to the Rendering tab of the web app properties.
  2. In the Template field, click the magnifying glass icon.
  3. From there you should be able to enter the CSS that you want to override. If that does not work, try using the !important instruction, in case there are several css.

Hope this helps,

Florent.

Avatar

Level 4

Hi Florent,

That is basically what I wound up doing. I actually copied the entire contents of /nl/crmLandingPage.css into the template document and KEPT the reference to /nl/crmLandingPage.css, and modified the styles, and voila! It worked. Thank you again.

Eugene