CSS Adjustments

[michaelwilding]

I am struggling to find how to make some CSS adjustments in the Adobe Standard New Designer.

We have a two column section with a button in each section. I need to adjust the table width.

On a section with a button I want to set a border to the container, not the button.

I cannot find how to enter the CSS into the new email designer to get it to have the desired result. Any advice would be greatly appreciated.

Thank you.

[aggabhi]

Hi @michaelwilding ,

I hope this link helps to understand where and how to edit the CSS properties.

https://experienceleague.adobe.com/docs/campaign-standard/using/designing-content/styles.html?lang=e...

Basically after clicking on any container, it will give you option on right to edit the CSS properties.

If you are using your HTML code then you have to make some changes on your HTML code CSS section.

[michaelwilding]

Thank you for the reply. Unfortunately that doesn't solve my issue. Here is the screenshot:

In the top box you can see I need to put the border around the container of the button. There is no option to do this in the sidebar, the only border option is for the button border, and I cannot find anyway to put the css into the Inline CSS to get it to work. There may be a way, I just can't find it.

The bottom box you can see the two columns are too wide, this is because there is padding on the top section that brings it in, meaning the table width of the two columns needs to be smaller, again I cannot find any way to do this. Adjusting the column/structure margins doesn't work.

If you have any solutions as to how I can make these adjustments I'd be very grateful.

Thank you

Michael

[aggabhi]

Hi @michaelwilding ,

Thanks for details on same.

I think you have uploaded the build HTML on email designer and not developing your email using adobe campaign standard components?

If same is right, then CSS needs to be adjusted in HTML only and here you will not be able to make changes with options available.

I know this is not solving your issue, but just putting my thoughts, I am open for more discussions.

Regards

Abhi

[michaelwilding]

Hi @aggabhi,

Thanks for the reply. This is using standard button component. In the options there is only one border option (shown in screenshot) this relates to the button border and not the container border. Do you know any way to do this?

Thanks

Michael

[aggabhi]

Hi @michaelwilding ,

Can you go into the left side of template as below and choose different compoenents and based on what component you choose, options on right will be shown.

I think you just need to choose your correct container or column in which you have button.

Hope it helps

[michaelwilding]

Hi, thanks for the reply. I've chosen the button component which gives the options above. The only option for the container of the button is the margin, there is no option for anything else (e.g. border on button component). We can change the background colour of the component.

The next available structure is the column, but because there is padding on the column the border can't be used there as it goes to the external edge of the padding not the edge against the component.

I've tried to use the inline CSS but can't find anyway to change it inline. 

[michaelwilding · Accepted solution]

As an update to anybody who may need it, I couldn't find a way to do this using the Adobe designer components, so I used an html block and did it manually in HTML instead.