How to get header transparent

kgphotos · February 25, 2014

Hi. I am updating my website and want to set up my logo like this. How do I do this? Is this a header or a logo? I am going to have a full screen slideshow on my homepage and I need to have my logo and menu transparent. What do I need to do? Is this a logo or a header or what?

My website which is still a work in progress if you want to look is http://www.karengrantphotography.com

Thanks for your help!

-Karen

Allen · February 25, 2014

kgphotos wrote: »

Hi. I am updating my website and want to set up my logo like this. How do I do this? Is this a header or a logo? I am going to have a full screen slideshow on my homepage and I need to have my logo and menu transparent. What do I need to do? Is this a logo or a header or what?

My website which is still a work in progress if you want to look is http://www.karengrantphotography.com

Thanks for your help!

-Karen

Try this in "enter site" CSS. The color are the 22's and transparency is the .20.

.sm-page-layout-region-header {background:rgba(22, 22, 22, .20) !important}

If you want a fine border at the bottom add this.

border-bottom: 1px solid #999;

kgphotos · February 25, 2014

Gallery question
Thanks Alan. One other question I had and I tried to start a new thread but for some reason it won't post so I'll ask it here. I would like to set up my gallery page to look like this. How do I go about doing this? Is there HTML or CSS involved? If so then I would need the code to do it. I am a newbie to HTML and CSS. On my website, I currently have the folders, photos and pages content box.

My website… http://www.karengrantphotography.com

Thanks for your help!

-Karen

LPC · February 25, 2014

You can also change the Header alpha slider in Customize Site - Entire Site - Theme - Active Theme - spanner icon - Edit Theme - Advanced

mylifeinfocus · February 25, 2014

Allen wrote: »

Try this in "enter site" CSS. The color are the 22's and transparency is the .20.

.sm-page-layout-region-header {background:rgba(22, 22, 22, .20) !important}

If you want a fine border at the bottom add this.

border-bottom: 1px solid #999;

Allen, I've noticed that my header displays correctly (transparent) in Chrome, but in IE, it shows a black background. Would your code provided above fix that problem as well, or is that just a quirky IE problem I'll have to live with? (The logo graphic of my signature is already a transparent file).

Thanks!

denisegoldberg · February 25, 2014

kgphotos wrote: »

I would like to set up my gallery page to look like this. How do I go about doing this?

That looks like a menu content element that is set up as a vertical bar where the menu entries are the names of the folders.

--- Denise

kgphotos · February 26, 2014

Gallery page question
Thanks Denise! I have it set up. How do I get the vertical menu bar to be a different color? She has a black vertical menu bar. I would like mine to be a dark gray- the color of my header
Here's my website to see the color of my header. http://www.karengrantphotography.com

Thanks so much for your help!

-Karen

capitoljayhawk · August 12, 2014

Allen wrote: »

Try this in "enter site" CSS. The color are the 22's and transparency is the .20.

.sm-page-layout-region-header {background:rgba(22, 22, 22, .20) !important}

If you want a fine border at the bottom add this.

border-bottom: 1px solid #999;

This isn't working for me. I'm at www.gaslightphoto.com. I tried entering this into the CSS for the entire site --- though I admit that I'm not a code guy, and I may be doing it wrong. (I am also taking my first steps in the new SmugMug, after holding onto my legacy site for months and months.)

Any additional pointers?

Thanks in advance.

Allen · August 12, 2014

capitoljayhawk wrote: »

This isn't working for me. I'm at www.gaslightphoto.com. I tried entering this into the CSS for the entire site --- though I admit that I'm not a code guy, and I may be doing it wrong. (I am also taking my first steps in the new SmugMug, after holding onto my legacy site for months and months.)

Any additional pointers?

Thanks in advance.

Transparent header background shows same as in post No.1 to me in Firefox and IE11.

Most of your pages have a black background so would not be noticed there.

Phyxius · August 12, 2014

capitoljayhawk wrote: »

This isn't working for me. I'm at www.gaslightphoto.com. I tried entering this into the CSS for the entire site --- though I admit that I'm not a code guy, and I may be doing it wrong. (I am also taking my first steps in the new SmugMug, after holding onto my legacy site for months and months.)

Any additional pointers?

Thanks in advance.

Hi,

You can also quickly set the header color through your theme. If you've already set this with code the code should override the theme but I wanted to point out another option, too!

Click Customize > Customize Site then, be sure to choose Homepage or Entire Site as needed for your customization. Then, click THEME. Hover over the selected theme and click the wrench.

Click ADVANCED.

Then, scroll down and set the header section color and use the alpha slider to change opacity as seen here:

I hope this helps. If you have any questions please don't hesitate to ask, we are always happy to help.

capitoljayhawk · August 12, 2014

Phyxius wrote: »

Hi,

You can also quickly set the header color through your theme. If you've already set this with code the code should override the theme but I wanted to point out another option, too!

Click Customize > Customize Site then, be sure to choose Homepage or Entire Site as needed for your customization. Then, click THEME. Hover over the selected theme and click the wrench.

Click ADVANCED.

Then, scroll down and set the header section color and use the alpha slider to change opacity as seen here:

I hope this helps. If you have any questions please don't hesitate to ask, we are always happy to help.

Hmmm. Tried that. My opacity is already all the way to the left (which I think means it is as clear as it can be). I would like it to be entirely see-through (no trace of the top block). Is that possible?

Thanks for your help.

Phyxius · August 12, 2014

capitoljayhawk wrote: »

Hmmm. Tried that. My opacity is already all the way to the left (which I think means it is as clear as it can be). I would like it to be entirely see-through (no trace of the top block). Is that possible?

Thanks for your help.

Absolutely go into your customization again and remove the CSS you added:

.sm-page-layout-region-header {background:rgba(22, 22, 22, .20) !important}

And the header should be totally clear.

capitoljayhawk · August 12, 2014

Phyxius wrote: »

Absolutely go into your customization again and remove the CSS you added:

.sm-page-layout-region-header {background:rgba(22, 22, 22, .20) !important}

And the header should be totally clear.

Excellent!! That worked. Thanks!

How to get header transparent

Comments