WordPress.org

Support

Support » Themes and Templates » Frisco for BuddyPress » [Theme: Frisco for BuddyPress] Logo and colour

[Theme: Frisco for BuddyPress] Logo and colour

  • cdgregory

    @cdgregory

    Hi, I am using the Frisco theme with WP and I am trying to achieve two things.

    1) I want to replace the text logo title with an Image. I have read a few comments about creating a custom images folder, adding and enabling the custom.css. Is this correct? When I preview the site the logo is showing but there is a small question mark image on top of the logo… And sometimes the text is also still there with the logo on top.

    2) I would also like to add a black colour / gradient to the logo header if at all possible. I have looked at the existing colour css files but cannot easily tell which values would need updating.

    Any help appreciated 🙂

    http://wordpress.org/extend/themes/frisco-for-buddypress/

Viewing 15 replies - 1 through 15 (of 23 total)
  • 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?

    Theme Author David Carson

    @davidtcarson

    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;
    	}
    Theme Author David Carson

    @davidtcarson

    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(http://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.

    Theme Author David Carson

    @davidtcarson

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

    Theme Author David Carson

    @davidtcarson

    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.

    Nine Techniques for 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:
    http://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?

    Theme Author David Carson

    @davidtcarson

    Try adding float:left; to #logo a.

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

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘[Theme: Frisco for BuddyPress] Logo and colour’ is closed to new replies.
Skip to toolbar