Return to previous page

Change Icon Background Color - by Pivotal5

This topic has 16 replies, 5 voices, and was last updated 9 years, 9 months ago ago by Robert Hall

Pivotal5

Participant

February 23, 2016 at 22:57

Hi again!

I’m trying to change the background color of the ICONS within this page: http://www.highxtraining.com/devsite. I want them to be this color: #164d9e (see the image here: http://www.highxtraining.com/devsite/wp-content/uploads/2016/02/Screen-Shot-2016-02-23-at-3.54.16-PM.jpeg). They’re currently orange. I tried to change the color in the CSS, but it didn’t show up correctly.

Can you help me at all?

Thank you!

Please, contact administrator
for this information.

#114485 Copied Theme version: Royal v2.6

15 Answers

Stan Russell

Participant

February 24, 2016 at 08:54

Hello,

we have added following code to page’s css:
.icon_list_icon{background-color:#164d9e}
Please clear your browser cache and check the page.

Regards,
Stan Russell.

#114521 Copied

Pivotal5

Participant

February 24, 2016 at 16:15

Perfect thank you SO much!!

#114627 Copied

Eva Kemp

Participant

February 24, 2016 at 16:25

Hello,

You’re welcome.

Regards,
Eva Kemp.

#114629 Copied

Pivotal5

Participant

February 24, 2016 at 20:42

Now it appears that the connector line behind the icons is not appearing correctly. There is white space next to the icon and the line like it is shifted over to the right. Can you help me fix this?

#114696 Copied

Robert Hall

Participant

February 24, 2016 at 21:16

Hello,

Please provide us with screenshot for our better understanding and highlight what exactly you mean.

Regards,
Robert Hall.

#114701 Copied

Pivotal5

Participant

February 24, 2016 at 21:17

Of course. See attached screenshot: http://www.highxtraining.com/devsite/wp-content/uploads/2016/02/Screen-Shot-2016-02-24-at-2.16.04-PM.jpeg

#114702 Copied
Robert Hall

Participant

February 24, 2016 at 21:37
Hello,

Try to add this code in Global Custom CSS.

.smile_icon_list.top li .icon_list_connector { top: 0.35em; margin-left: 0; }

Regards,
Robert Hall.
#114705 Copied
Pivotal5

Participant

February 24, 2016 at 21:41

It didn’t work 🙁 I had tried doing the same thing within the page’s CSS and nothing showed up. I’m going to include my theme’s login information in the private content area, so if you want you can try and fix it from there maybe?

Please, contact administrator
for this information.

#114708 Copied

Robert Hall

Participant

February 24, 2016 at 23:11

I’ve changed the code in Global Custom CSS. Please check it.

Regards,
Robert Hall.

#114712 Copied

Pivotal5

Participant

February 25, 2016 at 15:04

Yes that’s perfect, THANK YOU!!!

Okay, ONE more quick question. Each time I try to change the size of the circles for the icons on the same page, it doesn’t work. I have them set to 36px within the visual composer settings, and I tried to figure out how to change it in the global CSS, but whenever I use the following code in global CSS, it doesn’t change anything.

Here’s the code I tried to use:

.smile_icon_list li
.icon_list_icon {
background-color:#164d9e!important;
font-size: 36px;
}

Am I missing something?

#114871 Copied
Robert Hall

Participant

February 25, 2016 at 15:32
Hello,

Try use this code in Global Custom CSS.

.smile_icon_list li .icon_list_icon { width: 4em; height: 4em; }

Regards,
Robert Hall
#114877 Copied
Pivotal5

Participant

February 25, 2016 at 15:40

It didn’t work 🙁

#114882 Copied
Jack Richardson

Support staff

February 25, 2016 at 16:51
Hello,

I’ve added this code in Global Custom CSS:

.smile_icon_list.top li .icon_list_icon { font-size: 36px !important; }

Please check icons now.

Best regards,
Jack Richardson.
#114900 Copied
Pivotal5

Participant

February 25, 2016 at 16:57

YES! Perfect! THANK YOU SO MUCH!!!

#114904 Copied

Robert Hall

Participant

February 25, 2016 at 17:08

Hello,

You’re welcome!

Regards,
Robert Hall

#114906 Copied
Viewing 16 results - 1 through 16 (of 16 total)