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);