Ultimate Frustration Adding a Working Image Logo to Minimum – PLEASE HELP

Community Forums Forums Design Tips and Tricks Ultimate Frustration Adding a Working Image Logo to Minimum – PLEASE HELP

This topic is: not resolved

This topic contains 8 replies, has 4 voices, and was last updated by  eluviis 1 year ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #24439

    eluviis
    Participant
    Post count: 115

    I have to set the record straight because this is something that was one of the very first things I started working on this site, but I keep postponing because it’s just caused so much trouble.

    I’ve built many sites, 6 of them using Genesis with child themes such as Minimum old, Minimum New, Agency, Clip-Cart and Crystal. I have never had so much trouble adding a proper clickable home logo as I have with Minimum. I’m a graphic designer, no a coder, but I usually do OK with CSS and PHP even though it’s not my forte.

    I’m sorry, but the tutorial’s suggested process of uploading the image via WordPress’ Header Image UI is just not good enough. If it’s 1140, transparent with the logo in the corner, it looks like crap mobile. If you change the dimensions in functions.php and upload the logo in that newly set size, then it gets centered and breaks the menu. I’ve searched throughout this forum and there are constant complains that this either doesn’t work, breaks the menu, is not clickable, it’s impossible to hide the Site Name and Description Text without breaking the layout, etc, etc, etc.

    I personally am having the problem that if I hide the header text in the WordPress header interface, the entire layout of my site moves down about 40px making the top header area much taller. This has been happening since day one, even before all my customizations. So, I know it wasn’t me that broke it.

    If I show the header text, then the layout is fine. But of course, the header text then shows right smack over my logo.

    I’ve tried loading the logo as a 1140px transparent banner with the logo on one end (1140). That looks good, UNTIL you are on a mobile device. And like I said above, I also tried changing the dimensions in functions.php to 280×40, but that displays the logo center, not clickable and also breaks the menu. I’ve gotten to the conclusion that expecting the WordPress Header Image interface to work with Minimum is simple not going to cut it. So, I’m trying CSS only now… (going back to what I was trying a few weeks ago).

    The latest thing I have tried is what’s explained in this locked thread:

    http://www.studiopress.com/forums/topic/clickable-logo-in-minimum-theme/

    He doesn’t specify how he made it transparent, or how he made the text the same size of the logo, or whether it was vice versa… So I tried using display: none; but doesn’t work because it hides both the logo text and the logo image. Then I tried using opacity: 0 in #title a:hover. That seems to have worked, but of course, that doesn’t work in IE, – seems to only work in Firefox, Chrome and Safari. PLUS, it looks huge in mobile, and still touches the menu items below it.

    Could someone PLEASE help me debug this thing. PLEASE, PLEASE, PLEASE

    This is the development site: http://rightisbackside.com

    I keep putting this off and working on other parts of the site, but I’m almost done and I need to fix this. I’m super frustrated and can’t believe how problematic it has been to simply add a working clickable logo to Minimum that also works well mobile. I like everything else about this theme, but this feature has really put me off. This has never been a problem with any of your other themes I have used. At times, I’ve considered moving over to Metro or Modern Portfolio, but I’ve put so much work into this one that it’d be a waste to move to something else now.

    Below is my current CSS showing how I’m adding the logo to the header (see #title-area). The logo is 280 x 40px. The #title a, #title a:hover shows the rule opacity:0 that I added in an attempt to hide the logo text. Note, I can’t simply turn it off in the WP Header pane. Like I said above, it throws my layout down by 40px, give or take. And It also renders the logo image unclickable.

    If you look at the site in Chrome, Firefox or Safari, it looks good and it works. But in IE it doesn’t work and in mobile it looks wrong too. I’m not going to touch this CSS for a few hours to give some time to someone to please look at it as it is now.

    -Danny

     

     

     

    /* Header
    ———————————————————— */

    #header {
    background-position: top center!important;
    margin: 0 auto;
    min-height: 60px;
    overflow: hidden;
    width: 1140px;
    }

    #title-area {
    float: left;
    overflow: hidden;
    width: 35%;
    background: url(“images/logo.png”) no-repeat scroll 5px 10px transparent;
    }

    #title {
    font-family: ‘Open Sans’, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    margin: 15px 0 10px;
    text-transform: uppercase;
    }

    #title a,
    #title a:hover {
    color: #333333;
    text-decoration: none;
    opacity: 0
    }

    #description {
    display: none;
    }

    #header .widget-area {
    float: right;
    width: 65%;
    }
    /* Image Header – Partial Width
    ———————————————————— */

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 100px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
    }

    .header-image #description {
    display: block;
    overflow: hidden;
    }
    /* Image Header – Full Width
    ———————————————————— */

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 100%;
    }

    #24476

    WMcKinley
    Participant
    Post count: 31

    Hi,
    I just built a new site in Minimum and here’s the code I used for the logo.

    #title a {
    background: url(“images/logo.png”) no-repeat center center;
    display: block;
    height: 40px;
    width: 534px;
    text-indent: -9999px;
    }

    Note it’s in the #title a part of the main header section and of course your image size would be different.

    Worked just fine here: http://www.poweremini.com

    Hope this shows up ok


    W. McKinley – WMcKinley.comPowerEmini.com – Genesis Novice

    #24503

    eluviis
    Participant
    Post count: 115

    Hi, that very nearly worked. I had to modify it a bit, but not too much – So far, these are the results:

    1. Firefox: works perfectly

    2. Chrome and Safari: Works, but creates a tiny 1px gap between the menu red boxes and the featured image.

    3. Mobile: It works, but it does not look good in mobile. Mainly because it’s not responsive and doesn’t resize like every other image on the page. Also, it doesn’t center and it sits flush on top of the menu.

    Still, I’m surprised at how hard to do this has been. I’m not a complainer by any means, but you would think that a feature as simple as replacing a text logo with an image logo would be easy to do, intuitive and mobile responsive. But no.

    I appreciate the help @investingsystems. But let’s see if someone else can point at to what’s missing to fine-tune it. Again, normally I wouldn’t be so picky about something like this… or be so adamant about getting the code perfect. But being what it is, the logo, and having fought this thing for so long, I’m now pressing to get this fixed.

    These are my current styles after @investingsystems suggestions (what’s missing? Would the fix be inserted in the mobile CSS section?:

    /* Header
    ———————————————————— */

    #header {
    background-position: top center!important;
    margin: 0 auto;
    min-height: 60px;
    overflow: hidden;
    width: 1140px;
    }

    #title-area {
    float: left;
    overflow: hidden;
    width: 35%;
    }

    #title {
    font-family: ‘Open Sans’, sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    margin: 15px 0 10px;
    text-transform: uppercase;
    }

    #title a,
    #title a:hover {
    color: #333333;
    text-decoration: none;
    background: url(“images/logo.png”) no-repeat scroll 0 0 transparent;
    display: block;
    height: 35px;
    width: 280px;
    text-indent: -9999px;
    }

    #description {
    display: none;
    }

    #header .widget-area {
    float: right;
    width: 65%;
    }

    #24602

    eluviis
    Participant
    Post count: 115

    So I’m leaving it as is for now. It looks ok in most browsers & while it doesn’t look very good mobile, it’s readable. Ultimately, I’m not happy… and I’m quite disappointed at how it seems this very simple feature was seriously overlooked when the design of this child theme was originally made. Never had I had so much trouble with something this simple.

    As of right now, the logo is displayed via CSS with a variation of the code @investingsystems kindly provided.

    To be 100%, I would like to display the logo, in a sensibly small size (280 x 35px) to look the way it does now in Chrome and Firefox but using the Header Image interface in the WP UI, and still look good in mobile. This, I believe is the way this should have been designed in the first place. Uploading a 1140px wide transparent PNG with the logo on the left side, is a hack job, and there is no way that will ever look good mobile.

    The site is currently temporarily hosted at http://rightisbackside.com but by the time you read this it might be at it’s finally location at http://rallyways.com

    Even if it’s in the next 2 months, I would LOVE to sort this problem out. So, if you run into this thread and feel keen on helping me out, please let me know.

    Regards, Danny

    #37775

    BossLady
    Participant
    Post count: 30

    Danny… Here’s what I did. It might be a bit “hacky,” but it works for now so I’m sticking with it.

    In the CSS locate the #title  a::before and change this:

    `#title a::before {
    background-color: #222;
    border-radius: 50%;
    color: #fff;
    content: “M”; /* Used to display the letter in the header logo */
    cursor: pointer;
    display: inline-block;
    height: 58px;
    line-height: 2.5;
    margin-right: 16px;
    margin-right: 1rem;
    padding: 3px 4px;
    padding: 0.1875rem 0.25rem;
    text-align: center;
    width: 58px;
    }`

    to this (using your own url, of course):

    `#title a::before {
    content: url(/uploads/2013/01/website-logo.png);
    cursor: pointer;
    display: inline-block;
    height: 225px;
    line-height: 2.5;
    text-align: center;
    width: 58px;
    }
    `

    Then to #title, #title a add color: transparent. Quickest, easiest thing I’ve come up with that doesn’t screw up the header and everything below it at different sizes. You’ll need to adjust the header height in the functions.php file to match the height of your image. You’ll also need to make some adjustments in the @media files to keep it centered, and you’ll need to adjust the height there, also, unless you just point to a smaller version of your logo.

    Hope this is helpful.

    Edee

    • This reply was modified 1 year, 3 months ago by  BossLady. Reason: oops… screwed up the URL in the code and it looked all wonky
    • This reply was modified 1 year, 3 months ago by  BossLady. Reason: oops... screwed up the URL in the code and it looked all wonky
    #37779

    BossLady
    Participant
    Post count: 30

    PS… I should also say that I had to use !important on the color:transparent, and I have the height set to 225 because that’s how tall my logo is. You’ll need to adjust it for your own image.

    #37906

    BossLady
    Participant
    Post count: 30

    omg… I just realized I was looking at Minimum – my solution is for Modern Portfolio theme. So sorry! But I don’t see why it couldn’t be attempted.

    #50571

    Scott
    Participant
    Post count: 2

    Hey @BossLady I have followed your code snippits to hack in a header for the Modern Portfolio theme but I am stuck with a white header, any chance you can get in contact to discuss? You can find me on Google+ https://plus.google.com/u/0/110036464458829721623/

    #50921

    eluviis
    Participant
    Post count: 115

    Hi! Thanks for the posts. I just got back here and saw them. At some point I cracked it and got it to work. The only thing I could never get right was getting the logo image to look super crisp on Retina display iphones and ipads, but other than that it works great. I’ll keep this in mind though just in case I need to do this again. Needless to say, and coincidentally, I’m working on a new site in Modern Portfolio… so I might need this soon anyway. Again thanks.

    The development site is no more. Now I’m working exclusively on the actual final site… http://rallyways.com

    The new site in Modern Portfolio is actually my design portfolio :) http://dannycruzcreations.com

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.