Social Media Icons & Top Bar Color & Column hover questions

[beta_c10inc]

Hi Apex!

Using inspect, I am able to change the size of my sites social media icons and have been able to change the topbar background color the same way, however when I call out the classes in css, nothing changes.

I think something is over riding the classes somewhere else in the theme’s CSS.

I am also trying to have the background-color change to a background-image on hover for a few columns on my site.

Any guidance and help is greatly appreciated!!

Thank you!

[paul.r]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

[beta_c10inc]

Hi!

beta.c10inc.com

Three issues:

1. Top bar color
2. Social Icon size in top bar and in footer. Trying to increase to 50px.
3. Home Page > Events Section: Trying to replace the background color with an image on hover.

Thanks for the help!

[Prasant]

Hello @beta_c10inc,

Thanks for updating thread.

Please add following CSS under X > Theme Options > CSS:

1. Topbar color:

   .x-topbar p, .x-topbar a {
   color: #fff !important;
   }

2. Social icon size:

   .x-social-global a {
   font-size: 50px !important;
   }

3. I am a bit confused with your third question. Do you want to change the background color the column or the container?

Thanks.

[beta_c10inc]

Thanks for your help.

The first two CSS styles did not work though.

For my third question: I would like to change the background of each of the four event columns from the gradient to an image on hover. I saw it on another site and thought it would be an easy call to a class in css but I can’t figure it out.

[Alaa]

Hi beta_c10inc,

You are right regarding the background image hover, you just need to add a custom class to these sections, for example, bgimage then this CSS code snippet should work:

.bgimage:hover {
	background-image: url('your background image URL here')!important;
}

The reason why your CSS codes aren’t working could be because of some rules overriding others or there is a glitch in one of the codes breaking the rules afterward, to let us take a closer look at your custom CSS codes please send your WordPress Dashboard login details in a “Secure Reply”.

Thanks.

[beta_c10inc]

Ok thanks!

[jumar]

Hello there,

This is now fixed. The reason why it wasn’t working is because there is an extra / opening comment tag, and a lacking } closing tag in your CSS codes. See the errors below::

The background-image code suggested by my colleague can now be added on the four columns you’ve mentioned.

Let us know if there’s anything else we can help you with.

Thank you.

[beta_c10inc]

Great news! Thank you so much!

[basanta]

You are most welcome!

Thanks