Changing colour of service icons

Hi, I’d love to have my service icons looking like this website:

http://www.flatcomm.com.au/

but unsure how to do it, and currently stuck with the standard layout as per.

Any help would be greatly appreciated, I did try searching the forums but couldn’t find anything. sorry folks. Absolutely awesome theme!

Rhys

Hello Rhys,

It can be done by adding the following custom CSS code into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.


.roll-icon-box .icon {
  background-color: #d65050;
  line-height: 80px;
}

.roll-icon-box .icon i {
  color: #fff;
  font-size: 32px;
}

Regards,
Kharis

1 Like

Hi Kharis

I don’t want to change all my services icons but only some on certain pages. Is there a way to change specific icons only?

Also, I want to change the body text colour (also on certain pages only)

Regards
Karl

Hello Carl,

To do that, you will need to use page ID. For example:


.page-id-286 .roll-icon-box .icon {
  background-color: #d65050;
  line-height: 80px;
}

.page-id-286 .roll-icon-box .icon i {
  color: #fff;
  font-size: 32px;
}

In the code above, 286 is the page ID number, which can be found while in the page editing screen, in the web browser address bar, you’ll see something like:


yoursite.com/wp-admin/post.php?post=286&action=edit

Regards,
Kharis

Hi Kharis,

I would like to have my service icons to animate like http://www.flatcomm.com.au/
but even after putting the code
.roll-icon-box .icon {
background-color: #d65050;
line-height: 80px;
}

.roll-icon-box .icon i {
color: #fff;
font-size: 32px;
}

it doesnt work… can u please guide.
www.chaosadvertising.com

Hello @nkcomp,

Please try adding the below extra CSS code to Appearance > Customize > Additional CSS from dashboard.


.sydney_services_widget .roll-icon-box .icon {
  background-color: transparent;
  border: none !important;
  width: 90px;
  height: 90px;
  line-height: 100px;
  position: relative;
}
.sydney_services_widget .roll-icon-box .icon:after {
  content: '';
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #21b0c0;
  position: absolute;
  top: 9px;
  left: 9px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.sydney_services_widget .roll-icon-box .icon .fa {
  position: relative;
  z-index: 2;
}
.sydney_services_widget .roll-icon-box:hover .icon:after {
  width: 90px;
  height: 90px;
  top: 0;
  left: 0;
  background-color: #444444;
}

Regards,
Kharis

it works.:slight_smile:

Thanx so much Kharis…

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Dear Kharis,
Can the icon also increase in size with mouse hover. as of now only the background circle becomes big.
Also can i animate the icons when the mouse hovers?

thank you.

Hello there,

To enlarge the icon font size, add this extra CSS code:


.sydney_services_widget .roll-icon-box .icon .fa {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.sydney_services_widget .roll-icon-box:hover .icon .fa {
  font-size: 40px;
}

I am sorry, animating it is considered as an complex task that goes beyond support service policy we can offer here in the forums. You should hire a WordPress coder on codeable.io or upwork.com.

Regards,
Kharis

Thanx Kharis… :slight_smile:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

hi!
i have a problem whit the background color of icons of the service type b!
for defaul is red and links of titles to… firts i try whit apparece > color… but not
i try whit css but don’t work
.widget_sydney_services_type_b .roll-icon-box .icon {
background-color: transparent;
}
I also have this
.widget_sydney_services_type_b .widget-title {
font-size: 40px;
}
.widget_sydney_services_type_b .content h3 {
font-size: 25px;
}
.widget_sydney_services_type_b .content p{
font-size: 18px;
and this one works perfectly…
can someone orient me a little! I’m newbie!!

Hello there,

Please try this code:


.widget_sydney_services_type_b .roll-icon-list .icon {
  background-color: #ff0000 !important;
}

.widget_sydney_services_type_b .roll-icon-list .icon i,
.widget_sydney_services_type_b .roll-icon-list .icon a i {
  color: #fff !important;
}

Ensure the group of your extra custom CSS code is error free. You can check it with this tool: https://jigsaw.w3.org/css-validator/#validate_by_input.

Regards,
Kharis

hi there!!
yes! change the colors of the icon and the background … but when it is on top of the icon or the title still comes out that red background … I think it is not take the order I gave from appearance> colors> color of the elements when it is over .
happens the same in all the pages of the web
thanks kharis!!!

Hello there,

> but when it is on top of the icon or the title still comes out that red background

Sorry, I couldn’t get what you meant. Could you please elaborate it and some extra details? Also please share a link to a page where I can see your services, so I can have a look.

Regards,
Kharis

hi!!
the page is https://flightstobenidorm.com/?page_id=1919
when the mouse is over the icon or the title you see a red background color

Hello there,

Thank you for the additional info.

I found the service title link inherits the general style of hovered link. To disable it on services, you can add this extra custom CSS code:


.service h3 a:hover {
  background-color: transparent;
}

Regards,
Kharis

Hi Kharis

Can you help me with css code for colour change icon animation for Service Type B .

Service type A is working fine with your above code.

regards
Vinoth

What code did you use? Please share in your comment to help me get the exact code for type B.

Regards,
Kharis