Using HTML, CSS, and Javascript #

ATSLink supports custom HTML by default, allowing you to easily add your custom content, scripts, assets, or other items to your page and go further with your ATSLink .

Adding custom HTML #

Custom HTML can be easily added to the bottom of your profile by adding it the custom HTML field on the appearance tab of your profile dashboard. Additionally, Singlelink also supports embedded Javascript snippets inside the custom HTML field.

Using Custom CSS #

ATSLink supports custom CSS by default, allowing users to customize their page’s appearance easily with CSS code injected at the bottom of their profile, overriding their theme CSS.

Adding custom CSS #

Custom CSS can be easily added to the bottom of your profile by adding it the the custom CSS field on the appearance tab of your profile dashboard.

CSS Selectors #

• Profile picture/Avatar (img.nc-avatar)
• Headline (h1.sl-headline)
• Subtitle (h3.sl-subtitle)
• Link (a.sl-item, a#sl-item-<link-id>)
• Link item (a.sl-item div, a#sl-item<link-id> div)
• Link label (span.sl-label)
• Link subtitle (span.sl-link-subtitle)
• Custom HTML section: (div#custom-html)

Adding inline CSS #

Singlelink also supports adding inline CSS directly onto links, to easily add unique styles to each link. To change your inline CSS, click on your desired link in the links tab on your profile dashboard, then add your styles directly to the custom CSS field without a selector or brackets.

Example custom inline CSS for a link with a gradient background

Examples #

• Adding a cover image

  Custom HTML:

  <div class="sl-banner"></div>

  Custom CSS:

  .sl-banner {
  max-width: 385px;
  position:absolute;
  top:0;
  width: 100%;
  height:77px;
  left: 50%;
  transform: translateX(-50%);
  /* Your background fill styles go here */
  background: #4e54c8; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #4e54c8, #8f94fb); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #4e54c8, #8f94fb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /* End background fill styles */
  z-index:-1;
  }
  
  .sl-bg {
  background: transparent !important;
  }
  
  body {
  /* Add your page background here */
  background:#FCFCFC;
  }
  
  @media(min-width: 385px) {
  .sl-banner {
  border-radius: 10px 10px 3px 3px;
  }

• Enlarging your avatar image, adding a border, and shadow

  Custom CSS
  

  .nc-avatar {
  transform: scale(1.5);
  border: solid 3px #FCFCFC;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  }

• Adding social media icons

  Custom HTML: #

  <div class="icons">
  <!-- Social icon, repeat this for each icon -->
  <a href="<your-social-url>">
  <!-- Your raw icon SVG Here -->
  <!-- We recommend using simpleicons.org! -->
  </a>
  <!-- End social icon -->
  </div>

  Custom CSS:
  #

  #custom-html, .nc-avatar, .sl-headline, .sl-subtitle {
  order: -1;
  }
  
  .icons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  }
  
  .icons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: #2a2a2a; /* Your icon background color */
  margin: 0 10px; /* Your icon horizontal spacing */
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  border-radius: 100px;
  transition: .2s ease-in-out;
  }
  
  .icons svg {
  width: 15px;
  height: auto;
  fill: #FFF; /* Your icon fill color */
  }
  
  .icons a:hover {
  /* Your icon hover effect */
  box-shadow: 0 2px 5px rgba(0,0,0,.25), inset 0 -100px rgba(255,255,255,.15);
  }

  
#

• Embedding a video
  Custom HTML:
  #

  <iframe src='<your-youtube-embed-link-here>' frameborder='0' allowfullscreen></iframe>

  Custom CSS:
  #

  #custom-html, .nc-avatar, .sl-headline, .sl-subtitle {
  order: -1;
  }
  
  iframe {
  width:calc(100vw - 40px);
  max-width: 336px;
  margin:0 20px 20px 20px;
  height: min(188px, 56.25vw);
  border-radius:5px;
  }

    #