# Advanced

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeEaMxDzbJCH-PAAZY75eoF7nfN73aMCRfpRhFm72vOscuEwolyUcpNG_2PpjEdGECFxuFyOkS_2Wn47p2PvL1bwFAow4KQxLO2Nghjv6itSAwauT4VrF5XocxbV-07G4ZDEQN_XuSbpMWB_8xbNxcFCTg?key=McWN_Lv9ZK-QuQzVrY3nVw)

## **Open View Styling**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdjZOGAG5Gj1kOEDCX3R88nSgmFrQ-8PHI0RKYS8apWWoYFb-_ZklIF6CF9VMGKE843zB_paEi4Nm7frBEXZxhleNL2khOaiOFznYP_DOfaiymRP1rSQhNRg3HfGa26eOSgVV2Dbj88H412scEuhFrLc_Bs?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

### **Global View Styling**

You can choose whether to apply the changes to all views of your campaign (Yes/No, Optin, and Success) or just the current view by turning on/off the ***Global View Styling*** status&#x20;

### **Background Settings**&#x20;

#### **Box Shadow**

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

#### **Border**

It allows you to specify the style, width, and color of an element's border

#### **Rounded Corners**

It allows you to define the radius of an element's corners

#### **Spacing**

Padding is inside of the border (or edge) of your element. If you increase the padding, it will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box

### Close Button Styling

These settings allow you to style the hover state colors, position, size,  X thicknes&#x73;**,** box shadow and spacing of your close button

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcQhrwgRY1JQyQ7TZ4UcMf_j3wFquzGxRH3NMqHCb3RfbeOvMc6otxfkUY64c70kklxNPs64JZZgMmEm_sfbPGXTyM0_CDH3qeluKTBZGvIsK_-_TCIwcDZnTTiyGmdPnYAdwNYEwC0z7N-w2AXz6Ar77na?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

## **Campaign Type Settings**

The specific settings in this section will vary depending on [the campaign type](#template-details) you are designing

### Popup

You can change the campaign overlay transparency or color

<figure><img src="/files/uPPPmYSzCaM4gm49CDo1" alt=""><figcaption></figcaption></figure>

### Fullscreen

You can choose the image by clicking ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcUPFtdWj_eFHFMCa7WLrOFIHdk3nlVWw05y709x-eMHE38QSrn1MA4cx-ATSe4AcnGPXSex8G9Fjml_rvc_iMZ8lLnm9JQldEeu3wCfcx-ByBiJKvsv57mVmddesuEyAOSf5E_68PAPS9VXzvFMd1F8BUq?key=McWN_Lv9ZK-QuQzVrY3nVw)

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfzCpPYEafsqkP4iqGt3SuSXyzIXdtLb9Q-j04paudUzSrl_Yge3YkZi21XbodeGPcEeVeZEhYhKiJX0cNJOxQgYUojxSaFKJToU33GD_ySdwED6Ilv-HyRgCQxsviG0j0Yawo85PZ4C4f2iMisvm04AZ-o?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### **Style (Background color)**

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

#### **Background image**

* ***Image URL***: A web address that specifies the location of an image
* ***Image Position***: The position of the background image such as left top, left center, right top, right center, etc.
* ***Image Repeat***: Sets how background images are repeated (Repeat, Repeat horizontal, repeat vertical, etc.)
* ***Image Size***: How an image should be resized to fit its container
  * ***Contain***: The image keeps its aspect ratio but is resized to fit within the given dimension
  * ***Cover***: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
  * ***Auto***: The image keeps its aspect ratio and fills the given dimension automatically

#### **Set image layer first**

When you choose the background is color and image, then you turn on the status of ***'Set image layer first'***, the background image will bring the front of the background color

### Slide-in

You’ll find many options to customize the appearance of the ***Slide-In toggle*** such as background, box shadow, border, rounded corners, etc.

<figure><img src="/files/xeAfRhprjAJRRJkymb7x" alt=""><figcaption></figcaption></figure>

## **Custom Colors**

**Custom Colors** allows you to customize the design of your campaigns to match the branding of your site. This includes the ability to create and manage color profiles when editing campaigns

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf7k2zqqIlkPlz2_-0evsJAUljtuxp8TjySyZMMxn8ziMWhvtXr1dW1qk9I4ily-2i2GQmtI-Wk4d_92qMVkygTf2cog7fPSsNV6AseJMY0j-oC531u9sWfwdraDZilSn4cosTJ0g3QzxneWJ9vRCuh3aJ0?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

## **Custom CSS**

It allows you to further customize your campaigns using CSS

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdp0uK4Qw-oibIcRiJac_kDYic6MlZ1zfXnGG_Jf5c4NzIMXcz7i-ZVduUSs2F4RzAQj2FTKXrSOXgW5qF_kT9VoZ7m8Jjy0-rs5cNzyrRXqhps4r1bQJ0bzQZmCao6eVWrVHj-6g_PrSt5GA1XvZ8RHcw?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

## **Custom Javascript**

You can add custom Javascript to your campaign using Custom Javascript

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdr339K1XuVVi-r0DnOrxHp_x-ha6lV5X4Lep_noCgXpvUwtWmPY6Wx16JToySOEInj_gMQl_FxIBW-l9iiaDy89Vza7HNOedkBLE02TMDjm916srPJu9eJcmuOW_5DCiFi8AS68x5DV76JYiyRjMS68Vs?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/template-settings/advanced.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
