WordPress.org

Ready to get started?Download WordPress

Forums

Frisco for BuddyPress
Logo and colour (24 posts)

  1. cdgregory
    Member
    Posted 2 years ago #

    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/

  2. Steve Borsch
    Member
    Posted 2 years ago #

    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

  3. NES - Native English Services
    Member
    Posted 2 years ago #

    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?

  4. David Carson
    Member
    Theme Author

    Posted 2 years ago #

    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
  5. mbloom
    Member
    Posted 2 years ago #

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

    Posted 2 years ago #

    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.

  7. mbloom
    Member
    Posted 2 years ago #

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

  8. David Carson
    Member
    Theme Author

    Posted 2 years ago #

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

  9. mbloom
    Member
    Posted 2 years ago #

  10. David Carson
    Member
    Theme Author

    Posted 2 years ago #

    Your image is really big (700x300)... 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.

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

  11. mbloom
    Member
    Posted 2 years ago #

    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;
    }
  12. mbloom
    Member
    Posted 2 years ago #

    Just kidding

  13. Brandon99
    Member
    Posted 2 years ago #

    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

  14. Brandon99
    Member
    Posted 2 years ago #

    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.

  15. G
    Member
    Posted 2 years ago #

    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?

  16. David Carson
    Member
    Theme Author

    Posted 2 years ago #

    Try adding float:left; to #logo a.

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

  17. G
    Member
    Posted 2 years ago #

    David, thanks for your help. your reply prompted me to have a closer look at CSS, and this definitely works, and looks perfect!

    #logo a
    {
    display:block;
    width:320px;
    height:70px;
    background:url(image.png) no-repeat scroll left top transparent;
    text-indent: -9999px;
    padding-top: 0em;
    padding-right: 0em;
    padding-bottom: 0em;
    padding-left: 0em;
    border-top: 0em;
    border-right: 0em;
    border-bottom: 0em;
    border-left: 0em;
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    margin-left: 0em;
    }

    thanks again, i don't mind customise this theme as it looks nice!

  18. laresbernardo
    Member
    Posted 2 years ago #

    My site is laresdj.com/7 where Im making a new project and I also have this problem.. the site recognizes the new dimensions I set but there's no icon appearing anywhere!
    If anyone here can help me.. I've tried all the codes in this post but nothing.. That's why I don't actually share mine here!! I would appreciate it :D

  19. teoh89
    Member
    Posted 2 years ago #

    Hi Steve,

    I used your code for the gradient and I decided to change the header background to just plain white.

    With that, how do I make a border around the search box as it seems to disappear into the white blend of the header colour.

    Hope to hear from you soon.
    Thanks.

  20. beignetbaby
    Member
    Posted 2 years ago #

    Works great, Steve/Dave. Thanks for posting such clear instructions. I'm new to all of this and I was able to get it to work without too much of a problem once I stopped looking for the image folder in WP and remembered to look in my FTP files. (What can I say? I'm new to this)

  21. penguindance
    Member
    Posted 2 years ago #

    I don't get how to have the image in the header but no text. I can get my image to show with text on top of it but wherever put in text-indent, the logo and text both disappear.

  22. i1m98ith
    Member
    Posted 1 year ago #

    @G I'm a newbie to CSS... I'm just 13 years old!!!
    I've copied whatever you have posted (css code) and I've saved it to example.com/wp-content/plugins/buddypress/bp-core/css/custom.css
    but my logo (example.com/wp-content/plugins/buddypress/bp-core/images/logo.png) Is not appearing on the Frisco Theme for Buddypress...
    Anyone Please Help Me...
    The Site:
    http://me.edu.hj.cx
    Thanks in advance,
    Amrith

  23. esmi
    Forum Moderator
    Posted 1 year ago #

    @i1m98ith: You'd be a lot better off posting a new topic as this one is now 3 months old.

  24. G
    Member
    Posted 1 year ago #

    @i1m98ith
    firstly, undo what you have done, both directories you have are not correct.
    1. use my css code as above, and place it in wp-content/themes/frisco-for-buddypress/custom.css
    2. then place your image in directory:
    wp-content/themes/frisco-for-buddypress

    it should work. drop a line if you have probs, or if you succeed!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic