- This topic has 8 replies, 4 voices, and was last updated 11 years, 4 months ago by
.
-
Posts
-
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 280x40, 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:
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%;
}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 – PowerEmini.com
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%;
}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
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
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.
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.
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/
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
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.