Working with Advanced Styles

When working with Advanced Styles, please note that we use a BEM-like naming convention. The following classes can be targeted using CSS or Javascript using Advanced Styles, in order to modify styles like colors, fonts, and  positioning.

Class Name	Applies to:	Picture
loginRegister__container	List Interface
registration__link	List Interface
login__link	List Interface
listMapLocator__languageContainer	List Interface
filterPanel__submitBtnDivContainer	List Interface
listMapLocator__branding--container	List Interface
listMapLocator__numberResult--container	List Interface City Page
locationInformation__imgContainer	List Interface City Page
locationInformation--image	List Interface City Page
locationInformation__addressContainer	List Interface Local Page City Page
locationInformation__distanceContainer	List Interface
locationInformation__radiusDistanceContainer	List Interface
locationInformation__drivingDistanceContainer	List Interface
locationInformation__internetLocContainer	List Interface
locationInformation__nameContainer	List Interface Local Page City Page
locationInformation__buttonsContainer	List Interface Local Page City Page
locationInformation__directionsButton	List Interface Local Page
locationInformation__phoneButton	List Interface Local Page City Page
locationInformation__urlButton	List Interface City Page
locationInformation__emailButton	List Interface City Page
locationInformation__contactContainer	List Interface Local Page
locationInformation__contactLabel	List Interface Local Page
locationInformation__contactName	List Interface Local Page
locationInformation__contactPosition	List Interface Local Page
locationItem__categoryContainer	List Interface
categoryDisplay__labelContainer	List Interface
categoryDisplay__chipsContainer	List Interface
locationItem__infoContainer	List Interface City Page
locationItem__moreInfoContainer	List Interface City Page
locationItem__leadButton	List Interface City Page
locationItem__businessHoursContainer	List Interface
businessHoursTable__table	List Interface Local Page
businessHours__toggleContainer	List Interface
businessHoursExpanded__container	Local Page
businessHoursExpanded__title	Local Page
businessHours__alertContainer	Local Page
breadcrumbMenu__container	Local Page
reviews__container	Local Page
reviews__readMoreReviews	Local Page
overallRating_container	List Interface City Page Local Page
overallRating_starsContainer	List Interface Local Page City Page
overallRating_ratingNumber	List Interface City Page Local Page
cardListRating__container	Local Page
cardRating__container	Local Page
cardRating__servicesContainer	Local Page
ratingService__Container	Local Page
cardRating__recomendation	Local Page
locationItem__compactEventContainer	List Interface
locationItem__couponContainer	List Interface
locationItem__extraInformation2Container	List Interface
locationItem__extraInformationContainer	List Interface	Only a placeholder for future use not in use right now
cardWithImage__container	Local Page	Is being used for the about in the landing page
dynamicForm__thanksMessage	List Interface Local Page City Page
dynamicForm__container	List Interface Local Page City Page
dynamicForm__formTitle	List Interface Local Page City Page
dynamicForm__formSubTitle	List Interface Local Page City Page	Not in use right now
dynamicForm__formExtraTitle	List Interface Local Page City Page	Not in use right now
dynamicForm__mainForm	List Interface Local Page City Page
categoryTreeInput__container	List Interface City Page
listMapLocator__viewAllContainer	List Interface
listMapLocator__viewAllCityContainer	List Interface
eventLanding__mapContainer	Event Landing Page
events__container	Local Page
infoMarker__container	List Interface
multiCarousel__container	Local Page
galleryImages__container	Local Page

Register/Login

container class:  register-login-container (loginRegister__container)

register element class: register-element (registration__link)

login element class: login-element (login__link)

example

Language

container class: language-container (listMapLocator__languageContainer)

example

Search/Filter

container class: submit-button-container (filterPanel__submitBtnDivContainer)

example

Results

container class: results-container (listMapLocator__branding--container) we can use the existing container

element class: results-element (listMapLocator__numberResult--container)

example

Location Information

Image

container class: location-image-container (locationInformation__imgContainer)

element class: location-image (locationInformation--image)

example

Address

container class: location-address-container (locationInformation__addressContainer)

element class: location-distance (locationInformation__distanceContainer) I put inside 2 more classes locationInformation__radiusDistanceContainer and locationInformation__drivingDistanceContainer and locationInformation__internetLocContainer

element class: location-name (locationInformation__nameContainer)

example

container class: location-buttons-container (locationInformation__buttonsContainer)

container class: direction-button-container locationInformation__directionsButton

container class: telephone-button-container locationInformation__phoneButton

container class: website-button-container locationInformation__urlButton

locationInformation__emailButton***same for email and any other that may appear herel****

example     `

container class: location-contact-container (locationInformation__contactContainer)

element class: contact-label  (locationInformation__contactLabel)

element class: contact-name locationInformation__contactName and locationInformation__contactPosition

example

Business Hours

container class: business-hours-container

element class: business-hours-status

element class: business-hours-table

example

Location Categories

container class: location-categories-container (locationItem__categoryContainer)

element class: location-categories-label (categoryDisplay__labelContainer)

element class: location-categories (categoryDisplay__chipsContainer)

example

Location Info

container class: location-info-container (locationItem__infoContainer)

element class: more-info-element (locationItem__moreInfoContainer)

element class: contact-location-element (locationItem__leadButton)

example

Custom Attributes

// Get the element with the name attribute "locationAttribute"
const hiddenAttributes = document.querySelector('[name="locationAttribute"]');

// Parse the value of the element as JSON
const attributesValue = JSON.parse(hiddenAttributes.value);

// Find the attribute with the name "AttributeName"
const AttributeName = attributesValue.find(
  (attribute) => attribute.AttributeName === "AttributeName"
);

// Log the value of the AttributeName to the console
console.log(AttributeName);