Custom CSS Examples

/* Customize the map title*/
.mapme-theme__overview-content-title{
font-size: 22px !important;
text-align: center;
}

/* Customize the map description */
.mapme-theme__overview-content-text {
color: #0000FF;
font-size: 34px;
line-height: 1.5;
}

/* decrease image size in the map home */
.mapme-theme__overview-content-image {
max-height: 100px !important;
}

/* Insert text at the bottom of the map home */
.mapme-theme_content-wrapper:after {
content: 'Add Your Text Here';
margin-left: 1.5rem;
}

/* Customize the category title*/
.mapme-theme__category-overview-title {
color: blue;
font-size: 18px;
}

/* Customize the category description*/
.mapme-theme__category-overview-description{
color: green;
font-size: 14px
}

/* customize style of category names */
.mapme-theme__select-category-name {
color: #FF0000 !important
}

/* Change size of category markers */
.mapme-theme__select-category-marker {
height: 20px;
width: 20px;
}

/* Hide number of locations per category in map home */
.mapme-theme__select-category-sections-count {
display: none;
}

/* Line wrapping of long category names */
.mapme-theme__category-level-1 .mapme-theme__select-category-name {
white-space: wrap !important;
}

/* hoover on category list */
.mapme-theme__category-list-item:hover {
background-color: #393939 !important;
}

/* add separator between specific categories e.g. 2nd and 3rd categories */
.mapme-theme__category-list > div:nth-child(3) {
margin-top: 30px;
}

.mapme-theme__category-list > div:nth-child(3)::before {
content: ";
width: calc(100% - 40px);
height: 1px;
position: absolute;
margin-left: 20px;
margin-right: 20px;
top: -15px;
background: #aaaaaa;
}

/* checkbox - All */
.mapme-theme__select-category-checkbox {
color: #FF0000 !important;
}

/* checkbox - parent categories */
.mapme-theme__category-level-1 .mapme-theme__select-category-checkbox {
color: #00FF00 !important;
}

/* checkbox - subcategories */
.mapme-theme__category-level-2 .mapme-theme__select-category-checkbox {
color: #0000FF !important;
}

/* checkbox - parent categories - checked state only */
.mapme-theme__category-level-1 .mapme-theme__select-category-checkbox .checkbox-marked-icon {
color: #FF0000 !important;
}

/* checkbox - parent categories - unchecked state only */
.mapme-theme__category-level-1 .mapme-theme__select-category-checkbox .checkbox-blank-outline-icon {
color: #00FF00 !important;
}

/* checkbox - parent categories - partially check state only  */
.mapme-theme__category-level-1 .mapme-theme__select-category-checkbox .checkbox-intermediate-icon {
color: #00FF00 !important;
}

/* Change the color of the active tab text (filter or results) */
.mapme-theme_tab-label.active {
color: white !important;
}

/* Change the color of the clickable tab text (filter or results) */
.mapme-theme_tab-label:not(.active), .mapme-theme_tab-action {
color: #a7d3ff !important;
text-decoration:underline;
}

/* Change the color of the tab delimiter */
.mapme-theme_vertical-delimiter {
background-color: white !important;
}

/* Customize expand/collapse arrow */
.mapme-theme__category-dropdown-icon {
color:red !important;
}

/*Move expand collapse category arrow to the right */
.mapme-theme__category-dropdown-icon {
order: 1;
}

/* Hide number of locations per category - parent category*/
.mapme-theme__category-level-1 .mapme-theme__select-category-sections-count {
display: none;
}

/* Hide number of locations per category - subcategories*/
.mapme-theme__category-level-2 .mapme-theme__select-category-sections-count {
display: none;
}

/* Customize parent category names */
.mapme-theme__category-level-1 .mapme-theme__select-category-name{
font-size: 24px !important;
}

/* Customize subcategories category names */
.mapme-theme__category-level-2 .mapme-theme__select-category-name{
font-size: 18px !important;
}

/* Line wrapping of long parent category names */
.mapme-theme__category-level-1 .mapme-theme__select-category-name {
white-space: wrap !important;
}

/* Line wrapping of long subcategory names */
.mapme-theme__category-level-2 .mapme-theme__select-category-name {
white-space: wrap !important;
}

/* Customize the back arrow in the toolbar */
.mapme-theme__toolbar-back .keyboard-backspace-icon {
transform: scale(1.5);
color: red;
}

/* Add text to the back arrow button - All Views */
/* for Home View only, add this class first line after: .mapme-theme__route-home */
.mapme-theme__toolbar-back:after {
background: none;
content: 'back';
margin-left: 0.5rem;
font-weight: bold;
position: static;
}
.mapme-theme__toolbar-back {
padding: 0 6px;
margin-left: -2px;
}
.mapme-theme__toolbar-back:hover {
background: #0000000d;
}
.mapme-theme__nav-active-categories-container:after {
display: none;
}
[custom-css] .mapme-theme__toolbar .navbar-start {
flex-grow: 0.2 !important;
}
.navbar .navbar-start .mapme-theme__nav-active-categories-container {
min-width: 2rem;
}

/* Customize navigation arrows buttons in toolbar */
.mapme-theme__toolbar .chevron-left-icon,
.mapme-theme__toolbar .chevron-right-icon {
font-size: 30px;
}

/* Add text to navigation buttons on detail card toolbar */
.mapme-theme__toolbar-location-nav-next:before,
.mapme-theme__toolbar-location-nav-prev:after {
font-size: 11px;
display: inline-block;
}

.mapme-theme__toolbar-location-nav-next:before {
content: 'Next';
margin-right: 0.5em;
font-weight: bold;
}

.mapme-theme__toolbar-location-nav-prev:after {
content: 'Prev';
margin-left: 0.5em;
font-weight: bold;
}

/* Customize the fullscreen svg icon */
.mapme-theme__toolbar-fullscreen_button-container {
color: red;
stroke: red;
transform: scale(1.8) translateX(-5px) translateY(-4px);
}

/* Add text before the fullscreen svg icon */
.mapme-theme__toolbar-fullscreen_button-container:before {
content: 'Fullscreen';
position: absolute;
right: 38px;
}

/* Customize the search icon */
.mapme-theme__toolbar-search-input-icon {
color: red !important;
}

/* Hide category markers from toolbar */
.mapme-theme__layout-pane .mapme-theme__toolbar .mapme-theme__nav-active-categories-container {
display: none;
}

/* Change marker size in toolbar */
.mapme-theme__nav-active-categories .map-marker {
height: 50px !important;
width: 50px !important;
}

.mapme-theme__toolbar .navbar-item img {
max-height: none !important;
}

/* Hide location counter from toolbar */
.mapme-theme__toolbar-location-nav-count {
display: none;
}

/* Remove toolbar */
.mapme-theme__toolbar {
display: none;
}

/* Change color for search text, search placeholder */
.mapme-theme__toolbar-search input.search-input,
.mapme-theme__toolbar-search .search-input::placeholder {
color: #ffffff !important;
}

/* Change color of share button */
.mapme-theme__toolbar-share-button-container svg {
color: #56514F !important;
}

/* Changing color of location count text */
.mapme-theme__toolbar-location-nav-count span {
color: #56514F !important;
}

/* Customize the Favorites star icon - Not selected */
.mapme-theme__favorite {
color: red !important;
}

/* Customize the Favorites star icon - Selected */
.mapme-theme__favorite-selected {
color: red !important;
}

/* Line wrapping of title for long category and subcategory names */
.mapme-theme__category-overview-title {
white-space: break-spaces;
}

/* Decrease spacing around list items */
.mapme-theme__sections-list-item {
padding-top: 25px !important;
padding-bottom: 25px !important;
}

/* Disable text fading on long text */
.line-clamp:after {
display: none !important;
}

/* Set size of markers in list */
.sections-list-item .map-marker {
width: 28px !important;height: 28px !important;
}

/* Hide all markers from list */
[custom-css] .sections-list-item-markers {
display: none !important;
}

/* Show only the first marker in the list */
.sections-list-item-markers .map-marker-wrapper:not(:first-child),.sections-list-item-markers:after {display: none;}

/* Align marker and location on same line */
.sections-list-item-title-marker-wrapper {
flex-direction: row !important;
}
.sections-list-item-markers {
margin: 0 8px 3px 0 !important;align-self: center !important;
}

/* Remove the location address from list */
.mapme-theme__section-list-address {
display: none !important;
}

/* Set font size and weight of list items */
.mapme-theme__sections-list-item-content {
font-size: 18px;font-weight: 400;
}

/* Set style of title in list */
.mapme-theme__sections-list-item-content .sections-list-item-title {color: #0000ff !important;}

/* Set size of thumbnail on list items */
.mapme-theme__sections-list-item .media-end .image {
width: 30px;height: 30px;
}
.mapme-theme__sections-list-item .media-end .image img {
height: 57%;width: 100%;top: 5px;
}

/* Remove number of media on the thumbnail in list */
.sections-list-item-remaining-media {
display: none !important;
}

/* Customize the distance value in Address & Place Search*/
.mapme-theme__sections-list-item-distance {
font-style: italic;font-weight: bold;
}

/* Customize the description text - detail card */
.mapme-theme__section-details-text {
color: navy !important;
}

/* Remove the location address */
.mapme-theme__section-details-address {
display: none !important;
}

/* Center align and change color of the location address */
.mapme-theme__section-details-address {
text-align: center !important;
display: block !important;
color: #56514F !important;
}

/* Customize title (location name) - detail card */
.mapme-theme__section-details-title {
color: #ff00ff !important;
font-size: 20px !important;
}

/* Display full image for expanded card view with inline image style */
.mapme-theme__media-gallery-list-item.media-image {
padding-top: 0;
}

.mapme-theme__media-gallery-list-item.media-image img {
position: static;
}

/* Customize caption text */
.mapme-theme__media-gallery-caption {
color: #ff0000 !important;
font-size: 24px !important;
}

/* Customize credit text */
.mapme-theme__media-gallery-credit {
color: #ff0000 !important;
font-size: 24px !important;
}

/* Change color of media background, add border - List */
.mapme-theme__has-background-black {
background-color: white !important;
border: 1px solid grey;
border-radius: 3px;
}

/* Change color of media background - Detail card */
.mapme-theme__section-details .media-gallery-item-image {
background-color: white !important;
}

/* Change color of media background - Media gallery */
.media-gallery-item-image {
background-color: white !important;
}

/* Disable click to media gallery */
.section-details-media-item.is-active,
.mapme-theme__section-details-image,
.media-gallery-list-item {
pointer-events: none;
}

/* Remove all map controls (zoom buttons, orientation…) */
.mapme-theme__map-controls {
display: none;
}

/* Add text to the "Show my location" button */
.layout-portrait .maplibregl-ctrl-geolocate[aria-pressed='false'] {
width: 160px !important;
height: 29px !important;
}
.layout-portrait .maplibregl-ctrl-geolocate[aria-pressed='false'] .maplibregl-ctrl-icon {
background-position: 0%;
}
.layout-portrait .maplibregl-ctrl-geolocate[aria-pressed='false'] .maplibregl-ctrl-icon:after {
content: 'GPS';
position: absolute;
left: 10px;
width: 100%;
line-height: 28px;
font-size: 16px;
font-weight: 700;
}

/* Customize label popups */
[custom-css] .mapme-theme__map-content
.mapme-theme__marker_popup.maplibregl-popup > .maplibregl-popup-content {
background: rgba(0, 0, 0, 0.96) !important;
color: white !important;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
padding: 8px 10px;
}

/* Tip color must match the popup background exactly */
[custom-css] .mapme-theme__marker_popup.maplibregl-popup-anchor-bottom > .maplibregl-popup-tip,
[custom-css] .mapme-theme__marker_popup.maplibregl-popup-anchor-bottom-left > .maplibregl-popup-tip,
[custom-css] .mapme-theme__marker_popup.maplibregl-popup-anchor-bottom-right > .maplibregl-popup-tip {
border-top-color: rgba(0, 0, 0, 0.96) !important;
}

/* Google font import, MUST be at the very top of the CSS file */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* Set font face using hosted fonts */
@font-face {
font-family: 'MyFonts';
src: url('https://www.mywebsite.com/fonts/MyFonts.otf');
}

/* Set font using web font */
body {
font-family: MyFonts, 'Special Elite', Arial, Helvetica, sans-serif;
}

/* Change width of content panel in landscape mode */
[custom-css] .mapme-theme__layout-landscape-pane {
width: 550px;
}
[custom-css] .mapme-theme__layout-landscape-map {
padding-inline-start: 550px;
}

/* Change heights between paragraphs in descriptions */
.description p {
margin-bottom: 15px !important;
}

/* Customize toggle button */
.mapme-theme__layout-pane-toggle {
background-color: #351313 !important;
color: white;
}

/* Customize the stripe inside the swiping handle on mobile portrait */
.mapme-theme__drag-handle-stripe {
background-color: red !important;
}

/* Add text to no search result panel */
.mapme-theme__no-search-results:after {
content: 'Nothing was found';
margin-left: 0.5rem;
font-weight: bold;
color: #b5b5b5;
}

/* Customize action buttons */
.mapme-theme__section-details-cta,
.mapme-theme__overview-cta,
.mapme-theme__section-list-item-cta {
background-color: #ff00ff !important;
font-size: 18px !important;
height: 25px !important;
}

/* Change size of modal. Default is 90% and 90% */
.mapme-theme__modal-content {
height: 80%;
width: 80%;
}

/* Customize the space background for the map earth globe */
.maplibregl-canvas-container > canvas {
background: linear-gradient(135deg, #87CEEB, #4682B4 60%, #1E3A5F 100%);
}

/* Set different horizon colors */
.maplibregl-canvas-container > canvas.horizon-sunset {
background: linear-gradient(to top, rgba(159, 214, 255, 0.97), rgb(0, 20, 52));
}
.maplibregl-canvas-container > canvas.horizon-sundown {
background: linear-gradient(to bottom, rgba(159, 214, 255, 0.97), rgb(0, 20, 52));
}
.maplibregl-canvas-container > canvas.horizon-plain {
background: lightblue;
}

/* Keep location title and audio player always on top when scrolling long descriptions */
.title-container,
.section-details-audio {
position: sticky;
background: var(-mapme-background-color);
}
.title-container {
top: -1px;
padding: 0.5rem 0;
}
.section-details-audio {
top: 35px;
}

/* Change color and opacity of embed overlay */
.idle-overlay {
background: rgba(32, 195, 243, 0.3) !important;
}

/* Change overlay text's color and size */
.idle-overlay-caption {
color: yellow !important;
font-size: 23px;
}

/* Change overlay text background on mobile */
.idle-overlay-caption.with-borders {
background: rgba(0, 0, 0, 0.9) !important;
}

/* Decrease spacing around list items */
.mapme-theme__sections-list-item {
padding: 10px !important;
}

/* Change height between list items */
.mapme-theme__sections-list-item-content {
height: 25px !important;
font-size: 16px !important;
font-weight: 400;
}

/* Remove top toolbar */
.mapme-theme__toolbar,
/* Remove all map controls */
.mapme-theme__map-controls,
/* Remove content panel toggle */
.layout-landscape-pane-toggle {
display: none !important;
}

/* Map home view */
.mapme-theme__route-home,
/* List view */
.mapme-theme__route-sections-list,
/* Location details view */
.mapme-theme__route-section,
/* Media gallery view */
.mapme-theme__route-media-gallery,
/* Story map view */
.mapme-theme__story-map,
/* All views except home */
.mapme-theme__story-map:not(.mapme-theme__route-home);