[Theme: Frisco for BuddyPress] Logo and colour

Hi cdgregory,

Yes, enable custom.css so you don’t lose this in an update (and be careful you don’t just copy over an entire “frisco for buddypress” updated directory when it comes out!

1) First off the CSS for a logo. I wanted to use most of the 960px width so used this code in my custom.css and also wanted to leave the text logo the same so copied over that too:

#header {
  background: url(images/logo.png) left top no-repeat !important;
	}

#logo {
	float: left;
	margin-bottom: 0;
	margin-top: 0;
	float: left;
        max-width: 950px;
}

#header h1 {
	float: left;
	margin-bottom: 0;
	margin-top: 20px;
	text-align: left;
    max-width: 820px;
}

#header h1 a {
	color: #FFF;
	text-decoration: none;
    font-size: 1em;
    font-weight: 500;
    text-shadow: 0 -1px 0 #052343;
    line-height: 1.2em;
    letter-spacing: .5;
    text-align: left;
    max-width: 820px;
}

2) Play around with these values. As you can see from mine, we’re essentially white to gray to be subtle. But for the gradient, you have three color values (top, middle and bottom or 0%/15%/100% respectively). The code is here for you to ensure that you’ll have a gradient for all “modern” browsers (e.g., Firefox, Chrome/Safari, IE versions, etc.):

#header #search-bar {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 15%, #e1e1e1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(15%,#ffffff), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 15%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#ffffff 15%,#e1e1e1 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 15%,#e1e1e1 100%); /* IE10+ */
    filter: none; /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#ffffff 15%,#e1e1e1 100%); /* W3C */
}

Hope this helps — Steve

Steve,

This looks great, not sure why you didn’t get a response from cdgregory but I sure can use this info.

Maybe you can help me work out something…it’s not pulling my image in.

I’m a rookie to the frisco theme but not css. I activated the custom css and simply cut and pasted the code you’ve got in the first box into a custom.css. Then changed

#header {
  background: url(images/logo.png) left top no-repeat !important;
	}

to

#header {
  background: url(images/mystery-man.jpg) left top no-repeat !important;
	}

This should have given me some sort of change to my header but it didn’t.

so, I changed a color on header h1, to see if I put the file in the right place, the root of the theme.

That worked ok, colors changed so I know the files in the right place.

Any idea why it wouldn’t pull the image?

Any idea why it wouldn’t pull the image?

Why don’t you use this selector in your CSS?

#logo

For your example.

#logo {
      background: url(images/mystery-man.jpg) left top no-repeat;
}

If you’re trying to change the background of the entire header, use this selector.

#header #search-bar

I am having the same issue NES is having. It simply is not displaying my logo. This is what I have in custom.css:

#logo {
  background: url(wp-content/uploads/2012/01/jabber.png) left top no-repeat !important;
	}

I am having the same issue NES is having. It simply is not displaying my logo.

Your issue looks different. You’re trying to use an image from your uploads folder. Either put the full URL in it like this:

#logo {
  background: url(https://www.example.com/wp-content/uploads/2012/01/jabber.png) left top no-repeat !important;
	}

Or, preferably, upload your logo to the images folder in the theme and then call it using something like this.

#logo {
  background: url(images/jabber.png) left top no-repeat !important;
	}

Notice that the image location is relative to the stylesheet in that second example.

I also don’t think you need to use the !important in either example.

I tried both of those methods and it still doesn’t seem to be working.

Send along a link so I can see it. This is very specific to your installation.

Home page

Your image is really big (700×300)… so I’m pasting below CSS that will at least show your logo. But I’d recommend reducing it’s size and then adjusting the height/width properties in CSS.

#logo {
    background: url(images/jabber.png) no-repeat scroll left top transparent;
    height: 300px;
    width: 700px;
    text-indent: -9999px;
}

Here is a link to image replacement techniques. It includes ups/downs of each method so use the method that works best for your purposes.

https://css-tricks.com/css-image-replacement/

When I updated to WP 1.5.3.1, the logo disappeared. However, this line of code in custom.css worked prior to the update.

#logo {
    background: url(images/jabber.png) no-repeat scroll left top transparent;
    height: 79px;
    width: 200px;
    text-indent: -9999px;
}

Just kidding

Hey David.

Thanks for posting these helpful tips. I have my logo displaying correctly now, thanks to your advice. Now I’m stuck on something else. Can you explain what I would need to do to make the logo clickable? Thanks!

The site:
https://www.reptasia.com

Correction to my last:

It looks the original H1 text area is still clickable. But not the entire (larger) logo space I’ve created. I’m assuming that the size of the clickable area is defined somewhere, and that I just need to adjust it to the larger size of the logo. I just can’t find where to do that. Thanks.

David, the code you mention above works fine for changing header text to logo:

#logo {
    background: url(images/jabber.png) no-repeat scroll left top transparent;
    height: 300px;
    width: 700px;
    text-indent: -9999px;
}

but the logo is still not linked to home url. any tip how to make it clickable?

Try adding float:left; to #logo a.

Or please include a link to your site here so I can check it out.