Follow the instructions below to increase the text size, bold the Category Name text, and make other style improvements to the Places feature.
1) Log into your App Manager and select your app.
2) Click Colors from the left-hand-side of the screen (or the middle of the screen).
3) Scroll down to the Advanced SCSS box. If there is already code in the advanced SCSS box, do not remove it. Start a new line “after” the last character in the box, then paste the above code.
/*** BEGIN: PLACES STYLE IMPROVEMENTS - 230731 ***/
/** PLACES LIST **/
/* Card */
.module-places .place-100 .card,
.module-places .place-50 .card,
.module-places .place-33 .card { border-radius: 10px; }
/* Card Images */
.module-places .place .card .image { border-radius: 10px 0 0 10px; }
.module-places .place-33 .card .image, .module-places .place-50 .card .image { border-radius: 10px 10px 0 0 !important; }
/** PLACES VIEW **/
ion-view[state="places-view"] .sb-cms-block-address .item { border: transparent !important; }
.module-places.places-view .card {
box-shadow: 0 0 2px #ddd !important;
border-radius: 10px !important;
}
/** SEARCH **/
.module-places .places-filters .card { border-radius: 10px; }
.module-places.places-filter .list .item.item-custom input {
background: #ddd !important;
border-radius: 20px;
color: #000 !important;
padding: 10px !important;
}
.module-places i.clear-text { color: #000 !important; }
.module-places.places-filter .list .item.item-custom input::placeholder {
color: #000 !important;
}
.module-places.places-filter .list .item.item-custom input::-webkit-input-placeholder {
color: #000 !important;
}
/** MAP INFO **/
/* Window height */
@media screen and (orientation: portrait) {
.module-places .info-window {
height: 200px !important;
background: #fff !important;
}
}
/* Place Text */
.module-places .info-window .info-window-icon span.info-window-title {
color: #000 !important;
font-size: 16px !important;
}
/* See details */
.module-places .info-window .info-window-icon span.info-window-more {
color: #333 !important;
font-size: 12px !important;
}
/* Address */
.module-places .sb-cms-block-address .item,
.module-places .sb-cms-block-address .item p.sb-cms-address-address {
color: #000 !important;
font-size: 14px !important;
}
/* Borders */
.module-places .sb-cms-block-address .item { border: solid 1px #ddd !important; }
.module-places .info-window .info-window-icon {
border: solid 1px #ddd !important;
border-radius: 10px 10px 0 0;
}
/*Category Changes*/
/*change column view*/
.module-places .card .text .title {
font-weight: bold;
font-size: 15px;
}
/**change list view*/
.module-places .place-100 .card .text .title {
font-weight: bold;
font-size: 16px;
}
.module-places .place-100 .card .text .title {
margin-bottom: 5px;
}
.module-places .place-100 .card .text .subtitle {
display: block !important;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
/**End alter category name in places feature*/
/**Begin center category name in places feature*/
.module-places .card .text .title {
text-align: center !important;
}
/**End center category name in places feature*/
/**Begin change places feature search icon color*/
.module-places .svg_filter_bg {
fill:
#ff6433 !important;
}
/**End change places feature search icon color*/
/*** END: PLACES STYLE IMPROVEMENTS - 230731 ***/
4) Click Save.
NOTE: Change the font size (“16” and “15”) to fit your needs