Transparency

[Steffen Rasmussen]

Hi Bill,

A few new questions on my side 🙂

I´m using grasroots for two websites in progress.
http://www.fundamentet.org/wordpress and http://www.detsættersinespor.dk

1. Can i make drop-down menu a bit transparent?
2. Change the yellow box-colour on the right at detsættersinespor.dk (changing the colour)
3. Make menu-line (the thing that appears when we scroll down) transparent? Important.

Thank you!

[Bill Robbins]

Hello Steffen,

Great questions 🙂 Let’s find answers for you:

Drop-Down Transparency

You can make the drop-down menu have a semi-transparent background. To do that we’ll need to use a rgba color for the background. It’s the hue with rgb and then the “a” sets how transparent it is. Here’s what to do:

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

   
   nav#top-menu ul li:hover ul {
   	background-color: rgba(0, 0, 0, 0.63);
   }
   

   That will make a slightly transparent black background. To change the color or the opacity, replace the rgba(0, 0, 0, 0.63) with the rgba color you’d like to use.

3. Update your settings.

That should let you change your drop-down opacity.

---

Attention Widget Border

You can change the color of that. Add this to your Custom CSS:

#sidebar .attention-block.widget {
	border-color: #00719e;
}

and just change the #00719e to the color you’d like to use. That should do it.

---

Menu Bottom Border

You can get rid of that by adding this to your Custom CSS as well:

#header,
body.hero #header.scroll {
	border-bottom: none;
}

---

If you have questions or trouble, just let me know.

Take care,
Bill

[Steffen Rasmussen]

Thanks so much Bill.

Question no. 3 i think we talked past each other 🙂
So just to clarify: When i scroll down, the top menu becomes black. You know, the navigation menu.
Is it possible to make transparency on that blackness that the navigation menu gets when you scroll down on pages?

[Steffen Rasmussen]

Oh, and one last thing, sorry.

Now that we´re on the navigation menu subject – can you help me figure out how to make a constant transparent background behind the menu instead. So that regardless of me landing on the website or scrolling down, there´s a constant transparent background on the navigation menu?

[Bill Robbins]

Steffen,

Gotcha. There is a border at the bottom of the header as it’s scrolled (just one pixel) so the earlier snippet was just for that. You can keep it in if you’d like to have that out. Add this to your Custom CSS:

body.hero #header,
#header,
body.hero #header.scroll {
	background-color: #fff;
}

and replace the #fff with the color you’d like to use there.

Let me know if you run into trouble there,
Bill

[Steffen Rasmussen]

Thank you!

Now, i´m sorry to keep you disturbing, but this last issue has been kicking me for a week now. I´ve spent two full days trying to get it working, and just as i thought i had, it all went to h***.
So, now before i decide to give up, i´m sure you´re the right person to ask 🙂

At http://www.detsættersinespor.dk i have these top-banners.
Each page has one in a different color.

The problem is: I´ve used the sized that you answered another user with in this forum.
I made them and uploaded them. Ive tried several times and with diferent sized. but no matter what i do, it changes from machine to machine.

So at some computers it looks fine, at some you can only see part of the banners, so the letters are missing. at the ipad you can´t see them at all, they´re gone – if you use your hands to scroll down you see the edge of it. also at the ipad the middle text and the widgets in the side are on top of each other.
I´m trying and trying, but this banner and these things are moving around like they´re alive 😉

Can you give me any tips that can make this work for me?

http://www.detsættersinespor.dk
if you need a login let me know!

[Bill Robbins]

Steffan,

Good question again. The tricky part of these banners is they are background images that are intended to fill an area. They give a bit of atmosphere so to speak.

They will always have some cropping. The amount can vary depending on how different the aspect ratio of the browser is from the dimensions allotted for the hero image. That’s one reason I would stay away from having graphics in the image like a logo. You don’t want that cropped out.

I did notice that there is quite a bit of empty space at the bottom of that image. I would take out the empty space. It will make any adjustments that need to be made via CSS much easier.

You can cause the entire image to always be visible. To do that, add this to your Custom CSS:

#hero-section.small-height {
	background-size: contain;
	background-position: center top;
}

See if that helps you out at all,
Bill

[Steffen Rasmussen]

You saved my day! i cut off the bottom and used your code – you´re always a hero here 🙂

[Bill Robbins]

Sweet…glad to hear that made the difference for you 🙂

[Author]

Posts