Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

How to override the form rendering of a webApp

EggBoy
Level 3
Level 3

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
florentlb
Correct answer by
Level 10
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
florentlb
Correct answer by
Level 10
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

EggBoy
Level 3
Level 3

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