Customizing the Map Display with CSS
RP Knowledgebase · Promap Help Series
Overview
Rose Perl ProMap allows advanced visual customization of the map layout and store detail popups using CSS. This is especially useful when the default layout feels misaligned or when key information (such as hours or address) appears out of order.
This article explains how to:
Stack and clean up the left-side location list
Reorder content inside the map info popup
Hide unnecessary icons for a cleaner brand presentation
⚠️ Important: CSS customizations are theme-dependent. Final selectors may vary depending on the site’s HTML structure.
Common Issues Addressed
1. Left-Side List Layout
Default layout may appear horizontally compressed
Some list items feel visually “off” or crowded
Stacking content vertically improves readability
2. Map Popup (Info Window) Issues
Address content may appear split by operating hours
Information order may not match expected user flow
Recommended content order:
Store Name
Hours
Address
Directions
Website
Phone
Email
CSS Customization Example (RosePerl)
Below is the CSS added to base.css to correct layout, stacking, and ordering issues.
/* RosePerl update code comment (12/23/2025) */
/* Hide icons next to phone, email, and website links */
#scasl-app-container a#scasl-phone > svg,
#scasl-app-container a#scasl-email > svg,
#scasl-app-container a#scasl-web > svg
{ display: none; }
/* Stack popup content vertically */
#scasl-app-container #infowindow .scasl-info-location
{ display: flex; flex-direction: column; }
/* Popup content ordering */
#scasl-app-container #infowindow #scasl-title { order: 0;
/* Store Name */ }
#scasl-app-container #infowindow .scasl-operating-hour { order: 1;
/* Hours */ }
#scasl-app-container #infowindow #scasl-address, #scasl-app-container #infowindow .scasl-national-wrapper { order: 2;
/* Address */ }
#scasl-app-container #infowindow #scasl-direction { order: 3;
/* Directions */ }
#scasl-app-container #infowindow #scasl-description { order: 4; }
#scasl-app-container #infowindow #scasl-web { order: 6;
/* Website */ }
#scasl-app-container #infowindow #scasl-phone, #scasl-app-container #infowindow #scasl-email, #scasl-app-container #infowindow #scasl-tags, #scasl-app-container #infowindow #scasl-distance { order: 7; }
/* Left-side list: stack details vertically */
#scasl-app-container .list-details.scasl-list-details div:nth-child(3) { flex-direction: column; }
/* Minor spacing refinements */
#scasl-app-container .scasl-national-wrapper {
display: flex; gap: 3px; }
#scasl-app-container .direction-share-link { padding: 0px; }
/* End RosePerl */
Why This Works
Flexbox ordering allows visual reordering without changing markup
Column stacking improves readability on both desktop and mobile
Icon removal reduces visual noise and aligns with minimalist branding
Consistent hierarchy improves user comprehension and conversion
Theme Compatibility Notes
Class and ID selectors may differ between themes
Always inspect the rendered HTML before applying CSS
Some themes wrap elements differently, requiring selector adjustments
💡 Tip: Use browser DevTools to confirm element order and wrapper structure before deploying changes.
Best Practices
Add a dated comment block to all custom CSS
Keep overrides scoped to
#scasl-app-containerTest popups on desktop and mobile breakpoints
Re-test after theme or plugin updates
Need Help?
If your layout still feels off or you’d like this styled to match a specific Rose Perl brand variant, contact Rose Perl Technology Support.
© Rose Perl Technology