colour

[Jiří Bernát]

Hi Bill,
does exist any special code for trasparent colour? Like trasparent black?

Is it possible to use any picture instead of the colour in Navigation Bar?

Many thanks for reply.

Best regards.

Jiri

[Bill Robbins]

Good Afternoon Jiri,

Fantastic question. You can use a transparent black color or an image for the navigation bar. Here’s how to do the semi-transparent black:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header.scroll-background,
   body.standard #header,
   body.blog #header,
   body.archive #header,
   body.error404 #header,
   body.search #header {
   	background-color: rgba(0, 0, 0, 0.9);
   }
   

   The 0.9 in the snippet above sets how transparent the black is from 0 (completely transparent) to 1.0 (completely opaque). Adjust that to fit your needs.

3. Update your settings.

That should add in a semi-transparent black background to the header when you scroll.

---

Adding an image to the navigation bar is similar. Here’s how to do that:

1. Go to the Media Section in your WordPress dashboard and select Add New. Upload the image you’d like to use. Once the upload is complete, click on the edit link. Look on the right hand side of the screen that opens up for the File URL. We’ll need that in just a minute.
2. Go to your theme options page and choose the Advanced tab.
3. Scroll down to the Custom CSS box and add this:

   
   #header.scroll-background,
   body.standard #header,
   body.blog #header,
   body.archive #header,
   body.error404 #header,
   body.search #header {
   	background-image: url(https://yoursite.com/image.jpg);
   }
   

4. Replace the http://yoursite.com/image.jpg with the URL to the image you just copied.
5. Update your settings.

That will set an image background for the navigation bar when it’s scrolled down.

If you have any questions, just let me know.

Thanks,
Bill

[Jiří Bernát]

Hi Bill, thanks for reply.
I set all settings…se atteched file. Than I click on “Save options”. But it doesn´t do anything. What do you mean Update your settings? Am I missing any step?

Thank you.

Jiri

Attachments:

1. copy.docx

[Bill Robbins]

You’re close. It looks like the URL for your image is set to be http://www.olivace.cz/?attachment_id=88 which is the “attachment page” for the image. It’s a WordPress generated page that has the image and a commenting form for it.

Try using http://www.olivace.cz/wp-content/uploads/2015/01/olives-253264-21.jpg which is the URL to the actual image.

See how that goes,
Bill

[Author]

Posts