How to change the Service Title color?

Hi, I read other post about changing the service A & B widget title color, Link:

In the post, it mentioned about service number, How can i find that number? I tried 1 to 10 but the color of service title stay the same.



can you give us a link that we can take a look at your page and maybe find an own suggestion?


1 is first service blck, 2 is second, and so one.

If you have set link for title, then you have to set color like this:

.service:nth-of-type(2) .service-title a {
    color: #009900;

Best Regards

How to set link to the title? the CSS is still not working :frowning:

Here is the link to my website

Thank you for helping me out!

Hello LexieChan,

I really want to help you, but I don’t know what you exactly wanna colorize.

The blue icon border? The icon itself or just the h3-link under the icon?

I will write you a little css code to bring up what you want.

I want to change the title under the icon, such as ‘20 MINS FREE CONSULTATION’, ‘RESUME & COVER LETTER’, ‘LEADERSHIP BUILDING’…


Oh, that was fast :smiley:

Do you want it in different colors or in just one single color like the blue you’re using on the page?

yes, i want to change the color to #121bbc

Thank you!

This is easy then. You don’t need any kind of nth-child-code.

.roll-icon-box .content h3, .roll-icon-box .content h3 a {
  color: #121bbc !important;

At the moment you have a blue hover (mouseover) effect. If you want to make a darker or lighter blue, use thi:

.roll-icon-box .content h3:hover, .roll-icon-box .content h3 a:hover {
  color: #HereTheOtherColor !important;

Kind regards,

PS: Maybe it is better if you say directly with examples what you want next time :slight_smile: This is much easier for all of us.

How about the title next to the icon under the service B widget such as ‘INTERNSHIP PROGRAM’, ‘CAREER PROGRAM’, ‘M&M PROGRAM’?

Thanks so much! YEAH!!! haha


.roll-icon-list .content h3 {
  color: #121bbc !important; 

This should do it.

Great that it helped and made the web a little bit better.

Edit: I noticed you have a empty text in your text slider. In appearance > customizer > header area > header slider you should change something to prevend an empty slide.

Thank you! Also have two other questions.

  1. how to code to open a new tab for call to action forwarding to another website?
  2. For Testimonials widget, the background pic moves up and down. how to fix that?

Almost perfect! :slight_smile:

Thanks alot!

  1. You need to edit the links itself. It must get a target="_blank". I tried to set up something with editing the call to action button, but I didn’t found anything to create the target :confused:

  2. It is because on the first testimonial you have a linkedin link. You could delete this in your testimonial or add a padding-bottom to the second one. But to delete it in the first one is much cleaner I guess.

Edit to 1):
Alternatively you could recreate this buttons from sydney. I installed the SiteOrigin Widgets Bundle on my website. With this you can use a widget called Button Widget I think. With some css it would look the same. If you wanna do this and nobody else knows a better solution to get the target="_blank" I will give you some instructions to use this widget with some css.