Template Customization | Doctor - Documentation | JoomShaper


Updated Last: 20 January 2024

Template Customization

How to change the font size used in menu

By custom CSS, you can start with below code which will reduce font-size, space between menu items and remove uppercase.

.sp-megamenu-parent > li > a {
    text-transform: capitalize;
    padding: 0 13px;
    font-size: 15px; }

Custom CSS, JS

Helix3 and SP Page Builder visual interface provides controls for many CSS properties, but sometimes you may want to add additional, custom CSS that can't be created with option(s). You can easily customize the website with your own custom code, for example, with CSS, JavaScript, Meta tags, tracking and verification code by using the custom fields in that section of template settings. More information and tips on How to customize design are inside Helix3 Manual and blog post "Which line I have to edit...".

Homepage: How to change lady doctor photo

You have two methods to choose from:

  1. Fast way, use FTP and replace that image:
  2. Page Builder > Page "Home" > edit mode and then replace image in Row options set as background image. Yes, we talk about first Row.

Homepage: How to change 3 feature boxes colors

You have to use custom CSS to change background color of 3 features boxes:

/* ----------- BOX #1 ----------- */
.mednet-features-list .mednet-features-one::after 
{ background: green !important; }
/* ----------- BOX #2 ----------- */
.mednet-features-list .mednet-features-two::after 
{ background: blue !important; }
/* ----------- BOX #3 ----------- */
.mednet-features-list .mednet-features-three::after 
{ background: red !important; }

Above code use inside custom css area or custom.css file, more information inside helix3 manual. Result of CSS changes.

Subpages: Header background overlay

You have to use custom CSS to change bg color or reduce dark layer  intensity. Here is example code to make it lighter:

#sp-page-title .sp-page-title:before {
    background: rgba(29, 29, 29, 0.35) !important;