Customizing your ATLink profile

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.

5 custom html Customizing your ATLink profile

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.

6 Custom CSS Customizing your ATLink profile

CSS Selectors #

  • Profile picture/Avatar (
  • Headline (
  • Subtitle (
  • Link (, a#sl-item-<link-id>)
  • Link item ( div, a#sl-item<link-id> div)
  • Link label (
  • 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.

7 inline css Customizing your ATLink profile

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;
    width: 100%;
    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 */
    .sl-bg {
    background: transparent !important;
    body {
    /* Add your page background here */
    @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! -->
    <!-- End social icon -->
    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);

Powered by BetterDocs