1. Home
  2. Knowledge Base
  3. Advanced
  4. Custom CSS Examples

Custom CSS Examples

We created an extensive library of CSS customization examples that you can use for your interactive maps.

These examples are all based on the safe classes which start with the prefix “.mapme-theme__”.

Copy and paste the relevant CSS sample code in your custom CSS editor. You can also easily edit the CSS to fit your needs.

To make it easier to find the relevant css examples, the examples are organized based on the different visual elements in the Mapme application.

Map Overview Area


/* Hide the title in the overview map info*/
.mapme-theme__overview-content-title{
display: none;
}

/* Change title font size and center title in the overview map info*/
.mapme-theme__overview-content-title{
font-size: 22px !important;
text-align: center  !important;
}

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

/* Change background color of map overview header*/
.mapme-theme__overview-content {
background: #000000;
}

/* Remove  fade out at overview bottom*/
.mapme-theme__static-scroller-fade:after {
height: 0rem !important;
}

/* Change style of description text of overview map info */
.mapme-theme__overview-content-text {
color: #0000FF !important;
font-size: 34px !important;
line-height: 1.5 !important;
}

/* Undo truncation from overview description for long text */
.mapme-theme__overview-content-text .line-clamp {
-webkit-line-clamp: unset !important;
}

.mapme-theme__overview-content-text .line-clamp:after, .mapme-theme__overview-content-text .content-truncate-expand, .mapme-theme__overview-content-text .content-truncate-collapse 
{ display: none !important; 
}

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

/* Add text under the overview. */
.mapme-theme__overview.static-scroller:after {
content: 'Copyright ©2020 Magic Inc.';
margin-left: 1.5rem;
}

Category Area


/* customize style of category names */ 
.mapme-theme__select-category-name { 
color: #0000FF; 
}

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

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

/* Change background color of category legend area*/
.mapme-theme__overview {
background: #000000  !important;
}
/* hoover on category list */
.mapme-theme__category-level-1:hover {
background-color: #393939 !important;
}

Multi-select checkboxes

/* customize multi-select category checkboxes - selected and unslected*/ 
.mapme-theme__select-category-checkbox{
color: #9EC62C !important;
} 

/* customize multi-select category checkbox - selected state only */
.mapme-theme__select-category-checkbox .check-circle-outline-icon {
	color: #9EC62C !important;
}

/* customize multi-select category checkbox - unselected state only */
.mapme-theme__select-category-checkbox .checkbox-blank-circle-outline-icon {
  color: #9EC62C !important;
}

Multi-select button

/* customize category multi-select button in map overview*/
.mapme-theme__category-list-button {
background-color: #0176A8 !important;
}

/*  add text to category multi-select button when button is enabled */
.mapme-theme__category-list-button:not(.mapme-theme__category-list-button-disabled) 
.mapme-theme__icon::before {
content: 'Explore'; 
font-weight: 300;
margin-bottom: 2px;
}

/* Add text to category multi-select button when button is disabled */
.mapme-theme__category-list-button.mapme-theme__category-list-button-disabled 
.mapme-theme__icon::before {
content: 'Select categories';
margin-bottom: 2px;
}

/* Remove chevron from multi-select button  */
.mapme-theme__category-list-button .mapme-theme__icon .chevron-right-icon {
display:none;
}

/* Remove fade out at overview bottom in map overview */
.mapme-theme__category-list-button-container:after {
background: linear-gradient(0deg, black 0%, black 78%, rgba(0, 0, 0, 0) 100%);
}
.mapme-theme__static-scroller-fade:after in map overview {
background: linear-gradient(to top, black 0%, rgba(255, 255, 255, 0) 100%);
}

/* Remove  fade out on the multi-slect category button*/
.mapme-theme__category-list-button-container:after {
height: 0rem !important;
}

Multi-level categories

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

/* 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;
}

/* Hide "Select All" option */
.mapme-theme__select-all-wrapper {
display:none !important;
}

/* customize "Select All" checkbox - selected state only */
.mapme-theme__select-all-categories .check-circle-outline-icon  {
color: #9EC62C !important;
}

/* customize multi-select category checkbox - unselected state only */
.mapme-theme__select-all-categories .checkbox-blank-circle-outline-icon {
color: #9EC62C !important;
}

/* 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 level 1 (parent) category names */
.mapme-theme__category-level-1 .mapme-theme__select-category-name 
{
font-size: 24px !important;
}

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

/* Hide the "Others" category */
.mapme-theme__category--is-pseudo
{
display:none !important;
}

/* Change the name of the "Others" category */
.mapme-theme__select-category-name-others-default {
 display: none;
}
.mapme-theme__select-category-name-others-custom:after {
 content: "test"
}

/* Customize the "Others" category name */
.mapme-theme__category--is-pseudo .media-content mapme-theme__select-category-name
{
font-size: 22px !important;
}

/* Customize the "Others" category name */
.mapme-theme__select-category-name-others-default {
 display: none;
}
.mapme-theme__select-category-name-others-custom:after {
 content: "Unassigned"
}

Toolbar


/* customize navigation arrows buttons in toolbar */
.mapme-theme__toolbar .chevron-left-icon,
.mapme-theme__toolbar .chevron-right-icon {
color: #D92508;
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 */
.fullscreen-icon {
color: red;
stroke: red;
transform: scale(1.8) translateX(-5px) translateY(-4px);
}

/* add text before the fullscreen svg icon */
.fullscreen-icon:before {
    content: 'Fullscreen';
    position: absolute;
    right: 38px;
}

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

/* remove category markers from toolbar */
.mapme-theme__nav-active-categories
{
display: none !important;
}

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

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

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

Lists


/* decrease spacing around list items */
.mapme-theme__sections-list-item {
padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;
}

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

/* remove border in list */
.mapme-theme__sections-list-item {
border: 0 !important;
}

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

/* align marker and location on same line */
.sections-list-item--title-marker-wrapper {
flex-direction: row !important;
} /*  Remove markers in list  */ .sections-list-item .map-marker { display:none !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 height between list items */ .mapme-theme__sections-list-item-content { height: 26px; } /* set color of entire list background area */ .mapme-theme__scroller-container { background-color: black !important; } /* set color of list items */ .mapme-theme__sections-list-item { background-color: black; } /* set border of list items */ .mapme-theme__sections-list-item { padding: 0 4px 0 1em; border-radius: 0; } /* set hover color on list items */ .mapme-theme__sections-list-item:hover { background-color: #292929 !important; } /*Set style of title in list */ .mapme-theme__sections-list-item-content .sections-list-item-title { color: #0000ff !important; } /* set size of thumnail on of 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 }

Detail card

/* customize the description text - detail card */
.mapme-theme__section-details-text {
color: navy;
}
/* change image background color - detail card */ .card-image > a > .media-gallery-item > img{ background-color: white !important; } /* remove the location address */ .mapme-theme__section-details-address { display:none !important; } /* Customize title (location name) - detail card*/ .mapme-theme__section-details-title { color: #ff00ff !important; font-size:20px !important; }

/* change image background color - detail card */
.media-gallery-body {
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;
}

Map Controls


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

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

Marker Label

/* Customize text, shape and color of marker label popup */
.mapboxgl-popup > .mapboxgl-popup-content {
border-radius: 10px!important;
padding: 10px 10px!important;
font-size: 18px !important;
font-weight: 700!important;
padding: 10px 10px 10px !important;
line-height: 1.3!important;
background-color: #00FF00;
color:#FFFFFF } /* Customize tip of marker label popup */ .mapboxgl-popup.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: #00FF00; } .mapboxgl-popup.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip { border-bottom-color: #00FF00; }

Fonts Family


/*set font family using Google fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap');
body {
font-family: 'Open Sans Condensed', sans-serif;
}

/* set font using web font */
body {
font-family: Arial, Helvetica, sans-serif;
}

/* set font face using hosted fonts*/
@font-face {font-family: 'MyFonts';src: url('https://www.mywebsite.com/fonts/MyFonts.otf');}
body {
font-family: MyFonts, Helvetica Neue, Helvetica, Arial, sans-serif;
}

Content Panel


/* Change width of content panel in landscape mode */
[custom-css] .mapme-theme__layout-pane {
  width: 550px;
}
[custom-css] [dir=ltr] .mapme-theme__layout-main {
  padding-left: 550px;
}

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

/* customize swipping handle on mobile portrait*/
.mapme-theme__drag-handle {
    background: pink !important;
    stroke: black !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;
}

Learn more about customizing your map content panel width.

Action Button


/* Customize action button in cards*/
.mapme-theme__section-details-action-button {
background-color: #ff00ff !important;
font-size: 18px !important;
height: 25px !important;
}

/* Customize action button in overview */
.mapme-theme__overview-action-button {
background-color: #ff00ff !important;
font-size: 18px !important;
height: 25px !important;
}

/* Customize action button in list */
.mapme-theme__section-list-item-action-button{
background-color: #ff00ff !important;
font-size: 18px !important;
height: 25px !important;
}

Embed Overlay


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

/* Remove button from embed overlay */ .mapme-theme__idle-overlay-icon { display: none !important; }
/* Remove color of button from embed overlay */ .mapme-theme__idle-overlay-icon { background: rgb(32,195,243) !important; color: white !important; }

Learn more about the embed overlay


/* decrease spacing around list items */
.mapme-theme__sections-list-item {
padding-top: 10px !important;
padding-right: 10px !important;
padding-bottom: 10px !important;
padding-left: 10px !important;
}

/* change height between list items */
.mapme-theme__sections-list-item-content {
height: 25px !important;
}

/* customize border in list */
.mapme-theme__sections-list-item {
border: 1 !important;
}

/* change font size and weight of list items */
.mapme-theme__sections-list-item-content {
font-size: 16px !important;
font-weight: 400;
}

/* Hide the title in the overview map info*/
.mapme-theme__overview{
min-height: calc(100vh + 58px); /* adjust based on title lenght */ 
bottom: 58px;
position: relative;
}

/* remove top toolbar */
.mapme-theme__toolbar {
display: none !important;
}

/* remove all map controls */
.mapme-theme__map-controls {
display: none !important;
}

/* remove content panel toggle */
.layout-landscape-pane-toggle{
 display: none !important;
}

Related Articles