Change social logo colour in Hever theme

• 

  davidsakvarelidze · Member · Apr 29, 2020 at 4:01 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I’m relatively new to CSS but I wanted to know if it’s possible to add custom CSS to change the logo colours of the social media icons in the menu?

  Thanks!
  Tessa

  The blog I need help with is: (visible only to logged in users)

• 

  vinitdhake · Member · Apr 29, 2020 at 8:08 pm

  • Copy link

  Hi there,

  You can do that with some custom CSS code.

  Please try adding the below CSS code:

  .social-links ul a:hover:before {
  background: #6da0c4;

  }

  you can easily modify the color code to any other.

  Please refer this support article for more details for Custom CSS: https://en.support.wordpress.com/custom-css/

  Note that CSS Customizer is available only in Premium or Business upgrade plan.

  Please refer the below articles plans: http://wordpress.com/pricing

  Hope this helps!

  Cheers!

• 

  davidsakvarelidze · Member · Apr 30, 2020 at 8:04 am

  • Copy link

  Thank you!

  Though that code didn’t seem to work for me, even if I switch to a different colour. Could you confirm that this is correct?

  /*
  Welcome to Custom CSS!

  To learn how this works, see https://wp.me/PEmnE-Bt
  */

  .social-links ul a:hover:before {
  background: #FF5733;

  }

• 

  vinitdhake · Member · May 1, 2020 at 7:55 pm

  • Copy link

  Hi there,

  I suppose you were just looking to change the logo colors of the social media icons in the menu and not the hover.

  I apologize! Gave you somewhat wrong code.

  You can try the below code. This should work

  .social-navigation a {
  color: #FF5733;
  }

  find below link to refer the color codes as per your choice: https://make.wordpress.org/design/handbook/design-guide/foundations/colors/

  Hope this works!

  Thanks!

• 

  davidsakvarelidze · Member · May 5, 2020 at 10:42 am

  • Copy link

  That worked! Thank you so much :)

• 

  davidsakvarelidze · Member · May 5, 2020 at 10:52 am

  • Copy link

  I wonder if you could help me with one other thing. I’m looking to make certain images black and white on the page, and then colourful upon hover? Is it possible to set up a class attribute so that only some images do this?

  Many thanks!

• 

  vinitdhake · Member · May 5, 2020 at 5:37 pm

  • Copy link

  Hi there,

  Can you please provide me with the link of the blog post on which you want that hover effect to take place.

  Maybe I can have a look at it and then provide you with further assistance.

  Thanks!

• 

  davidsakvarelidze · Member · May 6, 2020 at 9:38 am

  • Copy link

  Hi,

  This is the page – https://davidsakvarelidze.art/gallery/

  Ideally the images would appear black and white at first, and then be coloured upon hover.

  I tried this code – but I’m not sure it’s the right format?

  .black-and-white img {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%);
  /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%);
  /* FF 35+ */
  }

  img:hover {
  -webkit-filter: grayscale(0%);
  /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%);
  /* FF 35+ */
  }

  Thanks!

• 

  davidsakvarelidze · Member · May 6, 2020 at 9:39 am

  • Copy link

  Hi!

  The page is https://davidsakvarelidze.art/gallery/

  Ideally the pictures would be black and white, then become colourful upon hover.

  Many thanks!

• 

  vinitdhake · Member · May 6, 2020 at 1:37 pm

  • Copy link

  Hi there,

  I tried working on your request and it seems that the below code should work for you.

  .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {
  filter: grayscale(1);
  }

  .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image:hover {
  filter: grayscale(0);
  }

  Please try this code, it should work.

  Hope this helps!

  Thanks

• 

  davidsakvarelidze · Member · May 6, 2020 at 1:42 pm

  • Copy link

  That worked!! Thank you so much :) I really appreciate all the help!

  Very best wishes.
  T