Customizing Theme's Colour Scheme

• 

  chasingpisces · Member · Jan 14, 2021 at 11:56 pm

  • Copy link
  • Add topic to favorites

  Hi everyone,

  Wondering if anyone could help me out with customizing the colour scheme on Mystique Theme. There are only a few theme colour options and I want to use a colour not available. I have custom CSS but don’t know if this is possible. Any help/suggestions would be much appreciated.

  Thanks,
  Joe

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

• 

  kokkieh · Staff · Jan 15, 2021 at 5:24 am

  • Copy link

  Hi Joe,

  Can you tell us what exactly you want to change?

  Also note that your plan gives you access to both live chat and direct email support for help with stuff like this. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

• 

  chasingpisces · Member · Jan 15, 2021 at 2:53 pm

  • Copy link

  Hi kokkieh,

  Thanks very much for your reply. I’ll use the tools you mentioned in the future.

  On the Mystique theme, you can change the colour of the sidebar bubbles and the menu/blogpost headers when you hover over them, as part of Theme Options. But they limit you to five or so default colours. My logo colour is #053F53, and I wanted to change the sidebar/header colour to the complimentary colour, which is #542D05. Just wondering if this is possible through custom CSS.

  Thanks again,
  Joe

• 

  aleone89 · Staff · Jan 15, 2021 at 4:12 pm

  • Copy link

  Hello there,

  It looks like this would be possible – however, before the CSS can be written, the a new bubble image would need to be created and uploaded to the media.

  The current image being used is: https://s0.wp.com/wp-content/themes/pub/mystique/colors/images/red/widget-title-red-large.png

  Once uploaded, we can look to write that CSS for you.

  I hope that helps!

• 

  chasingpisces · Member · Jan 15, 2021 at 5:04 pm

  • Copy link

  Hi aleone89,

  Thanks for the help!

  I’ve created a new bubble image and uploaded it to my media library.

  

  What would be my next steps?

  Thanks,
  Joe

• 

  staff-blorbo · Staff · Jan 15, 2021 at 7:17 pm

  • Copy link

  Ok, this should work:

  /* Post title hover */
  #content .post-title a:hover {
      color: #542D05;
  }
  /* Widget title bubbles */
  .widget-title,
  .widget-title span {
    background-image: url('https://chasingpisces.files.wordpress.com/2021/01/sidebar_bubble.png');
    background-size:cover;
  }

• 

  chasingpisces · Member · Jan 15, 2021 at 9:43 pm

  • Copy link

  Hi macmanx,

  Thanks very much, works like a charm!

  Appreciate all the help from everyone. Have a great weekend!

  Joe