Rocked Pro - Add Pictures to Services

Hi,

I am currently building another page, though using Rocked Pro theme. Though when selecting services, I cant add a picture to the services.

How can we have this modified / changed within the theme / website?

Hope to hear from you soon.

Thank you.

Hello there,

From my understanding, you wanted to alter the default service icons with your preferred images. Is that correct? Please advice.

Regards,
Kharis

Hello Gorgi,

Do you want to use images instead of icons?

Kind Regards, Roman.

Hi Kharis,

That is correct.

Regards,

Gorgi S.

Hello there,

You can use CSS code solution to do so.

For services type A, use this code:


/* Services type A */
.widget_rocked_services_type_a .roll-iconbox .icon {
  line-height: 90px !important;
}
.widget_rocked_services_type_a .roll-iconbox .icon .fa:before {
  content: '';
  width: 35px;
  height: 35px;
  display: inline-block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.widget_rocked_services_type_a .roll-iconbox:nth-of-type(1) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image1.png");
}
.widget_rocked_services_type_a .roll-iconbox:nth-of-type(2) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image2.png");
}
.widget_rocked_services_type_a .roll-iconbox:nth-of-type(3) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image3.png");
}
.widget_rocked_services_type_a .roll-iconbox:nth-of-type(4) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image4.png");
}
.widget_rocked_services_type_a .roll-iconbox:nth-of-type(5) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image5.png");
}
.widget_rocked_services_type_a .roll-iconbox:nth-of-type(6) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image6.png");
}

The first service icon image is defined in this code block:


.widget_rocked_services_type_a .roll-iconbox:nth-of-type(1) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image1.png");
}

For second one:


.widget_rocked_services_type_a .roll-iconbox:nth-of-type(2) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image2.png");
}

Replace the image path URL with your own. You can use media manager (Dashboard > Media) to upload your image.

For service type B, use this code:


/* Service type B */
.widget_rocked_services_type_b .roll-iconbox .icon {
  margin-top: 6px !important;
}
.widget_rocked_services_type_b .roll-iconbox .icon .fa:before {
  content: '';
  width: 50px;
  height: 50px;
  display: inline-block;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
.widget_rocked_services_type_b .roll-iconbox:nth-of-type(1) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image1.png");
}
.widget_rocked_services_type_b .roll-iconbox:nth-of-type(2) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image2.png");
}
.widget_rocked_services_type_b .roll-iconbox:nth-of-type(3) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image3.png");
}
.widget_rocked_services_type_b .roll-iconbox:nth-of-type(4) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image4.png");
}
.widget_rocked_services_type_b .roll-iconbox:nth-of-type(5) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image5.png");
}
.widget_rocked_services_type_b .roll-iconbox:nth-of-type(6) .icon .fa:before {
  background-image: url("http://yoursite.com/path/to/service/image6.png");
}

To apply extra custom CSS code to your site, go to Appearance > Customize > Additional CSS.

Regards,
Kharis