Karuna Header Background Colour

• 

  gmccombe · Member · May 26, 2017 at 6:30 pm

  • Copy link
  • Add topic to favorites

  Can anyone help with the necessary CSS code to change the background colour of the banner at the top of the Karuna theme.

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

• 

  assadaboultaif · Member · May 26, 2017 at 6:39 pm

  • Copy link

  Hi there!

  To get started, open the Customizer. Just click on My Sites in the admin bar and then click Customize in the sidebar.

  There, look for the Header Image section. (If you do not see this section, this means that your current theme does not support the use of a custom image header.) Here, you may choose between your own images—if you have recently uploaded any—and a selection of suggested images for your current theme if it has any.

  Once you’ve chosen an image, you can crop it to your liking, or you may skip this step if the size of the image fits your theme’s dimensions.

  Hit the Save button at the bottom right to apply changes.

  Hope this helps!

• 

  gmccombe · Member · May 26, 2017 at 8:21 pm

  • Copy link

  Thank you for the info but it is not the header image that is a problem, I can change that. The banner at the top of the page where the Tag Line and Social Media menu are located within the Karuna theme is the area that I am trying to change.
  The area has a fixed purple colour which can not be changed by any customiser options.
  I am sure there will be some CSS code that I can put into the Additional CSS section to change this colour.
  Any help appreciated.

• 

  thesacredpath · Member · May 26, 2017 at 10:14 pm

  • Copy link

  Hi @ gmccombe, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours using Karuna, there is a dedicated Karuna support forum at WordPress.org.

  The differences between WordPress.com and WordPress.org.

  I did take a quick look at your site, and the following custom CSS will get you going. Just edit the background color as desired.

  .top-bar {
      background-color: #6636cc;
  }