Gradient as background in logo area

Laurens

Hi, I like to have a gradient in the background of my logo. In that way I can have my logo centred on top of that gradient on a site wide website, whatever browser width the viewer is looking in his browser.

Is that possible in the New Smugmug?
And if so, how do I do that?
I was thinking of a small jpg that will be repeated to fill the whole width.

Laurens

________________________
www.travelingphototeam.com

jwashburn

One way would be create a DIV that would hold the gradient image. The image could be 1x75 or whatever height you want. You would use that as your background and have it repeat. Inside that div you can have another div that holds your logo which should be a transparent PNG.

So something like this. Depending on how other things are setup, you might need to include some sizes for your divs

<div id="header_bg">
<div id="logo"><img src="http://yourdomain.com/logo.png&quot; alt=""/></div>
</div>

#header_bg {
background-image: url(http://www.yourdomain.com/bg.png);
background-repeat: repeat-x;
}

Hikin' Mike

You can use a gradient image like this:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
    background: #e5e5e5 url('gradient-here') repeat-x;
    }

or you can use linear gradients:
http://www.w3schools.com/css/css3_gradients.asp

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
	background-color: #e5e5e5;	
		background: -webkit-linear-gradient(
			top,
			#e5e5e5 12.5%,
			#d5d5d5 25%,
			#c5c5c5 37.5%,
			#b5b5b5 50%,
			#a5a5a5 62.5%,
			#959595 75%,
			#858585 87.5%,
			#757575 100%
		);
		background: -moz-linear-gradient(
			top,
			#e5e5e5 12.5%,
			#d5d5d5 25%,
			#c5c5c5 37.5%,
			#b5b5b5 50%,
			#a5a5a5 62.5%,
			#959595 75%,
			#858585 87.5%,
			#757575 100%
		);
		background: -o-linear-gradient(
			top,
			#e5e5e5 12.5%,
			#d5d5d5 25%,
			#c5c5c5 37.5%,
			#b5b5b5 50%,
			#a5a5a5 62.5%,
			#959595 75%,
			#858585 87.5%,
			#757575 100%
		);
	background: linear-gradient(
		top,
		#e5e5e5 12.5%,
		#d5d5d5 25%,
		#c5c5c5 37.5%,
		#b5b5b5 50%,
		#a5a5a5 62.5%,
		#959595 75%,
		#858585 87.5%,
		#757575 100%
	);	
	}

jwashburn

Mike solution is easier for sure.

Laurens

jwashburn wrote: »

Mike solution is easier for sure.

Probably you're right, but for me it's not that easy
I can't figure where I have to put that CSS. I tried to add a CSS block into the LOGO area, but that didn't work, then I tried to add a CSS block just above the Logo area.
Doing that I copied these lines:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
background: #e5e5e5 url('gradient-here') repeat-x;
}

But then I see the words ('gradient here'). What do I have to paste there?

In the mean time I exchanged the normal logo with a transparent one, but I miss the gradient in the background. See the attached logo.



I hope you have patience with and help me out with this.

There is another thing which I don't like, that is the gap between the menu and the photo area. Does anyone know how to get rid of that big area with nothing in it?

Thanks,
Laurens

________________________
www.travelingphototeam.com

Hikin' Mike

I put ALL of my CSS into my theme's CSS box.

The 'gradient-here' is the URL of your gradient jpg.

Laurens

Hikin' Mike wrote: »

I put ALL of my CSS into my theme's CSS box.

The 'gradient-here' is the URL of your gradient jpg.

OK, that makes sense. Now is my next question:
My gradient jpg is in the folder 'unlisted', the URL is http://www.travelingphototeam.com/Other/My-SmugMug-Site-Files-Do-Not/n-cFPs2
And when I click on that jpg the url is: http://www.travelingphototeam.com/Other/My-SmugMug-Site-Files-Do-Not/n-cFPs2/i-RDdJdrP/A

Is this a good link?

Laurens

Hikin' Mike

This:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
    background: #e5e5e5 url('http://www.travelingphototeam.com/photos/i-RDdJdrP/0/Th/i-RDdJdrP-Th.png') repeat-x;
    }

Laurens

Mike your help is awesome
Thank you. The gradient is in place. But...
As you can see there are two things which are not really great.

1. There is a light grey band between the menu and the photo area. How can I get rid of that?

2. There is too much space above the logo. I changed the jpg to a less higher jpg ( I even figured how to find the new name for it - in Safari I used page source), but even with a less high jpg the result remains the same.

________________________
www.travelingphototeam.com

Hikin' Mike

Add this in red.

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
    background: #e5e5e5 url('http://www.travelingphototeam.com/photos/i-RDdJdrP/0/Th/i-RDdJdrP-Th.png') repeat-x;
    [COLOR=Red]height: 150px;[/COLOR]
    }

Laurens

Mike, Thank you very much. That was what I needed. The only thing I changed was the height (130px)

Hikin' Mike

Laurens wrote: »

Mike, Thank you very much. That was what I needed. The only thing I changed was the height (130px)

I should have mentioned that in the beginning.

Laurens

Oeps... What did I do wrong?
The script
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
background: #e5e5e5 url('http://www.travelingphototeam.com/photos/i-nZWh4kN/0/Ti/i-nZWh4kN-Th.png') repeat-x; height:100px;
is not working anymore.
So the background of my logo is gone and there is a big gap between the menu and the photos

Yesterday I moved the CSS block to the Footer. Tonight I uploaded 100 photos to the gallery 'Attie's best photos', they all look good (1900px wide now).
Before that upload the logo background was still good.

Hikin' Mike

Remove the old code, where ever you added it. Try this:

.sm-page-widget-logo {
    background: #e5e5e5 url('http://www.travelingphototeam.com/photos/i-nZWh4kN/0/Ti/i-nZWh4kN-Ti.png') repeat-x; 
    height: auto;
    }

Laurens

That brought back the gradient. Thanks!
But there is sill a big gap between the menu and the photo block
I tried to replace 'auto' by '100px' as it was, but that didn't change the appearance, so I changed it back to 'auto'.

Is there another way to remove that big gap?

Hikin' Mike

Laurens wrote: »

That brought back the gradient. Thanks!
But there is sill a big gap between the menu and the photo block
I tried to replace 'auto' by '100px' as it was, but that didn't change the appearance, so I changed it back to 'auto'.

Is there another way to remove that big gap?

For starters, looks like you added a 40px top-margin on one of your boxes:

.sm-page-widget-3436354 .sm-page-widget-content {
    margin-top:40px;
    }

Laurens

Hikin' Mike wrote: »

For starters, looks like you added a 40px top-margin on one of your boxes:

.sm-page-widget-3436354 .sm-page-widget-content {
    margin-top:40px;
    }

I copied the source code, but I couldn't find a script with "margin-top:40px" in it.
I don't know where to look.
Ayway I looked at all the places where I changed things, but I couldn't find it.
In fact the only script I used for the whole site is

.sm-page-widget-logo {
   background: #e5e5e5 url('http://www.travelingphototeam.com/photos/i-nZWh4kN/0/Ti/i-nZWh4kN-Ti.png') repeat-x; 
   height: auto;
   }

And I used on one page this

.sm-tile-caption {
display: none;
}
.sm-tile-info .sm-tile-title { 
  font-size: 12px; }
.sm-tile-info a {
    color: #9b9b9b !important
    }

Hikin' Mike

Look at the Layout section on the far left, then under 'Margins' > 'Top Margin'. Other than that, I have no clue.

Laurens

Mike you're a wiz-kid
How did you know that it was on the far left side? I like to know things like that too.
When I'm working in Dreamweaver like for the Bibleopen site I tweak things in the source code, but here at Smugmug it is more difficult.
Anyway Thanks again!

Hikin' Mike

Laurens wrote: »

Mike you're a wiz-kid
How did you know that it was on the far left side? I like to know things like that too.
When I'm working in Dreamweaver like for the Bibleopen site I tweak things in the source code, but here at Smugmug it is more difficult.
Anyway Thanks again!

My settings/Layout were actually on the RIGHT, but it was a typo. Forgot though that you can have it on the left too.

I use 'Firebug' for Firefox to find the code. Glad you fixed it!