Background and nav.bar color

[thommas]

Hi,

We’re creating a blog for my company and we’re using a free theme called Simone.

We want to change the banner background to the gray color you can see in the picture so there’s no white at the sides.

http://hpgarasjen.no/

We also want to change the color in the navigation bar from dark grey to #0096d6.

Anyone who can give me a few pointers?

Thanks! :)

[thommas]

Tnx. I’ve now created a child theme.

I put your code into my new style.css:

/*
 Theme Name:   Simone Child
 Description:  Simone Child Theme
 Author:       Thommas Sletten
 Author URI:   no.linkedin.com/pub/thommas-sletten/1b/b95/65/
 Template:     simone
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  simone-child
*/

@import url("../simone/style.css");

.main-navigation {
  / * background: hsl(0, 0%, 19%); */
  background-color: #0096d6;
}
.site-header {
  background: #bbb9be url(http://hpgarasjen.no/wp-content/uploads/2014/11/cropped-Garasjen-toppbanner.jpg) center 0 repeat-x;
}

But it isnt working.

The header color supposed to be: #bbb9be

While the menu/navigation bar should be: #0096d6

[Paulie_D]

This is hiding the image and it’s background

.site-branding {
padding: 6rem 0;
text-align: center;
background: #0587BF; /* here */
background: hsl(198, 95%, 38%); /* and here /*
}

Is that intentional?

[thommas]

The header should contain an image and a gray color at the sides. I want a grey background color. This is because i want the grey color to continue when the screen is large when the image isn’t large enough, if that makes any sense.

I also want to increase the size of the index box.

[Paulie_D]

See my comment above…you have div which is sitting on top of your header hiding everything.

[thommas]

Tnx Paulie_D,

I’ve tried to make it transparent in the Child theme, however it doesn’t seem to work.

It’s all blue as you can see now and my it’s hiding my image as you pointing out yesterday.

How can I remove the div? Can it be done in the style.css in my child theme?¨

Forget this. I managed to fix it myself. However, now it’s a grey box in the middle. How do I remove that?

Tnx.

[Paulie_D]

The grey box is this

.header-background-image .title-box {
background: #333;
background: hsla(0, 0%, 0%, .7);
}

Honestly, you can find all this yourself using “inspect element” in the standard Developer Tools in every modern browser.

[Author]

Posts