Customizing ADAC old client

This article aims to provide a few examples for visually customizing the ADAC JavaScript client. We'll walk you through some of the classes and IDs you can use in your CSS as well as some basic examples using popular CSS frameworks.

If you use a front-end framework, you can refer to this knowledge base article for customizing ADAC.

Getting started

This article assumes you've already added the necessary elements and script tags inside the body tag of your website/webshop. If you haven't done that yet, please consult the documentation on this page.

Overview

Main elements:

Domain and suggestion elements:

Examples

Bootstrap 5 (with results in dropdown)

<div class="btn-group d-flex flex-wrap">  
    <h4>Check if your domain is available</h4>  
    <div class="adac-domain-container rounded-top align-items-center p-3 bg-dark text-white input-group">  
        <input type="text" class="form-control" id="adac-js-domain-input" autofocus  
               placeholder="Enter domain or keyword">  
        <span class="input-group-text">.com</span>  
    </div>
    <div id="adac-js-categories" class="categories bg-dark text-white d-flex w-100 m-0 p-3 px-4"></div>  
    <div class="dropdown-menu w-100 shadow-sm top-100 rounded-bottom" id="adac-results-dropdown">  
        <div class="row">  
            <div class="domain-name-results-wrapper p-3 col-md-6 col-12">  
                <h4>Results</h4>  
                <div id="adac-js-domain-results" class="domain-results"></div>  
            </div>           
             <div class="suggestions-wrapper p-3 col-md-6 col-12">  
                <h4>Suggestions</h4>  
                <div id="adac-js-suggestions" class="suggestions"></div>  
            </div>        
		</div>   
	 </div>
</div>


<script>  
    // Attach input event listener to domain input
    document.getElementById('adac-js-domain-input')
	    .addEventListener('input', ({ target }) => {
	    // Get drop down menu element
        const dropdownMenu = document.getElementById('adac-results-dropdown')  
        if (target.value) {
		    // If a value is provided inside the domain input, reset display mode
	        dropdownMenu.style.display = 'initial'
		} else {
            dropdownMenu.style.display = 'none'
        }
    })  
</script>

TailwindCSS

<div class="container">  
    <div class="bg-gray-800 px-4 pt-5 rounded">  
        <div class="flex">  
            <input type="text" id="adac-js-domain-input" class="domain-input focus:outline-none border border-gray-200 border-e-0 py-2 px-3 pe-11 block w-full border-gray-200 shadow-sm rounded-e-10 text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none" autofocus placeholder="Enter domain or keyword">  
            <span class="px-4 inline-flex items-center min-w-fit rounded-e-md border border-s-0 border-gray-200 bg-gray-50 text-sm text-gray-500">.com</span>  
        </div>
		<div id="adac-js-categories" class="categories py-3 text-gray-200"></div>  
    </div>  
    <div class="grid grid-cols-2 px-5 py-3 hidden dropdown-menu border border-s-0 border-gray-200" id="adac-results-dropdown">  
        <div>            
	        <h4>Results</h4>  
            <div id="adac-js-domain-results" class="domain-results"></div>  
        </div>        
        <div>            
	        <h4>Suggestions</h4>  
            <div id="adac-js-suggestions" class="suggestions"></div>  
        </div>    
	</div>
</div>  
  
<script>  
    // Attach input event listener to domain input  
    document.getElementById('adac-js-domain-input')  
        .addEventListener('input', ({ target }) => {  
            // Get drop down menu element  
            const dropdownMenu = document.getElementById('adac-results-dropdown')  
            if (target.value) {  
                // If a value is provided inside the domain input, reset display mode  
                dropdownMenu.style.display = 'grid'  
            } else {  
                dropdownMenu.style.display = 'none'  
            }  
        })  
</script>