Community Forums › Forums › Archived Forums › General Discussion › Replaced logo in sample theme, same size as original but mine is cut off
- This topic has 9 replies, 2 voices, and was last updated 9 years, 7 months ago by copious.
-
AuthorPosts
-
August 6, 2014 at 10:50 am #117373copiousParticipant
Hi, first post here. New to Genesis, but somewhat familiar with WordPress having used other themes in the past. Right now I'm making a website using the Sample theme. I noticed the default image is 360x164 pixels, so I made my logo those exact same dimensions. The only difference is that the default Genesis logo's text is in the middle and only about 60 pixels high. In my logo, the text takes up most of the 164 pixels of height, with very white space at the top and bottom. It seems that although the default logo (and my logo) is 164 pixels high, it only shows the middle 60 pixels and cuts off whatever is above or below it.
I found some suggestions and tutorials online. Some are overwhelming, some seemed easy. I tried a few where it suggested to insert a snippet code to functions.php but it broke my site every time and I had to upload a new functions.php file by FTP to restore it and get the site working. Another way I found to get it working was to edit the code of the style.css where it shows max height: 60 px (I made it 164) and it worked. I wouldn't mind a wider logo, so I could replace width: 100% with something like max-width: 500px for example. But... I think editing the files is frowned upon, because if an update is released and a new file is uploaded to replace the old functions.php or style.css it will overwrite my edited file and the changes will be lost. There has to be a better way...
Any help or suggestions would be greatly appreciated. I'd love it for my logo to be completely shown instead of cut off at the top and bottom 😉
Thanks! 🙂
Occasional WordPress designer, learning more with each website!
August 6, 2014 at 5:25 pm #117459copiousParticipantI decided to take a chance and edit the styles.css file - despite my hesitations. I always thought it was a bad idea to edit the files. Having used *cough* Thesis before (but not anymore, Genesis from now on!) I would have used "hooks" in a separate file for new code to take priority over existing code. That way, when a theme gets updated, changes made to the code will be preserved in the separate file and not overwritten.
So the good news is that I got my logo to display now by changing min-height from 60px to 164px but the bad news is that it added a whole lot of extra white space above and below my logo (I'd say about 100px worth). I'm not sure how to eliminate the extra white space AND keep the logo from being cut off or cropped.
This is the code I edited:
.header-image .site-title > a { background: url(images/logo.png) no-repeat left; float: left; min-height: 164px; width: 100%; }
Occasional WordPress designer, learning more with each website!
August 6, 2014 at 5:36 pm #117460copiousParticipantThere doesn't seem to be a way to edit my posts, so I will just post a new reply. In playing around with the code, I found this:
/* # Site Header ---------------------------------------------------------------------------------------------------- */ .site-header { background-color: #fff; min-height: 160px; } .site-header .wrap { padding: 40px 0; }
I removed the 40px from the padding and now the extra white space is gone. But I wonder if that will have any repercussions elsewhere, or in other browsers? Seemed like too easy of a fix, and troubleshooting CSS, or any code, is NOT my strongpoint!
Occasional WordPress designer, learning more with each website!
August 6, 2014 at 7:41 pm #117484ᴅᴀᴠɪᴅMemberFirstly, it is recommended to change code inside a child theme. That's how we do it. Child themes aren't updated, just the parent theme. So you did the right thing.
I would need a URL to have a look at the css properly.
Sounds like you have done it though, to check how it will look on different screen widths just make your browser width smaller and smaller and see how it changes.
There are media queries towards the bottom of your stylesheet. From memory, I think there is one targeting the same '.site-header .wrap' at screen sizes of 800px or 960px, I can't remember. But if you make your browser narrower and notice some of the logo being cut off, that's where you need to change the code. ie just change the width like you did before.
Sorry can't be specific, hard without seeing the site.
I love helping creative entrepreneurs build epic things with WP & Genesis.
August 6, 2014 at 7:46 pm #117486ᴅᴀᴠɪᴅMemberOh and I may as well throw it out there, if you want your logo to look sharp on high resolution screens, retina etc, then make your image twice the size... so 720 x 328 then add the background-size to shrink it back down to fit. For example, I use..
background: url(images/logo.png) no-repeat center; background-size: 360px 164px; -webkit-background-size: 360px 164px; -moz-background-size: 360px 164px; -o-background-size: 360px 164px; min-height: 60px; }
Only looks sharp when you've used a larger image to start with.
I love helping creative entrepreneurs build epic things with WP & Genesis.
August 6, 2014 at 8:24 pm #117497copiousParticipantThank you for your help! I really appreciate it. I noticed my logo was getting partially cut off when viewed on my iPhone so I reduced the size to 275x110 px. I just discovered I can add back a bit of padding at the top to push the logo down a bit without harming anything else - or so it seems.
Good to hear it's OK to edit the child themes. It's a bit different than what I got used to with the *cough* Thesis theme, but I'm sticking with Genesis now. Just a bit of a learning curve to get past. I think it's actually easier to edit the child theme than using hooks anyways.
I tried resizing my browser, and for the most part, the website looked good. At a certain point, the logo was diagonally across from the phone numbers (normally at the right side of the header at full browser width), and then eventually once the browser window got narrow enough, the phone numbers jumped below the logo - just as they do when viewed on my iPhone. If you'd like to see the website, please keep in mind that I'm still building it, so a lot of content is still not up, and I'm still working on the layout and fine tuning the appearance, though I think the header will be just about done now. Looks a bit odd with so much white space in the middle, but it might have to be that way so nothing gets cut off or too spread out on mobile phones, which is really important these days. Here's the temporary link where I'm working on the website while it's in development: http://virtualmaximum.com/wds/
That's a great idea for the logo to look good at high resolutions! I'm going to do that, but I'll have to do it later. For some reason, Photoshop keeps crashing on me today. Must be too many things open, normally it's fine. Hopefully a computer restart will take fix that.
Occasional WordPress designer, learning more with each website!
August 6, 2014 at 10:20 pm #117513ᴅᴀᴠɪᴅMemberOk so the reason that the logo is becoming diagonal across from the phone numbers on screen sizes less then 960px because the background-position for the header is set to left, and the text-align for the text widget you have put there is set to right.
This looks fine for large screens, as thats how they are on the left and right, but for smaller screens you probably want to neaten them out a bit and center them both.
To do this, go into your stylesheet and search for the media queries..
You want to look for this in particular, as this is where your problem is happening
@media only screen and (max-width: 960px) { }
with a bunch of code inside it. This is telling the browser, do these things only when the browser is sized 960px or less. So you need to put the code inside them brackets underneath all the other stuff that is in there.
So you add this..
.header-image .site-title > a { background: url(images/logo.png) no-repeat center; } .site-header .widget-area { text-align: center; }
For the first part, all you are doing is putting the same code as what originally edited, but changing the left to center. This is assuming that you didn't make any other changes to that code, if you did you may have to tweak.
I hope you can see what I have done and why I've done it. It's much better if you understand why you need to change it, and why it needed to be in the media queries.
I love helping creative entrepreneurs build epic things with WP & Genesis.
August 7, 2014 at 8:36 am #117568copiousParticipantExcellent, thank you! That new snippet of code worked perfectly. I tested it on my computer by resizing the browser as well as on my iPhone. In both cases, it works great. Looks much better with the phone numbers below the logo than diagonally across. Luckily I didn't need to do any tweaking. The only changes I made prior to this were to the height and padding of the logo, which didn't seem to affect this.
I understand the concept of what you did, but I don't think I would have figured out what code to write. Once you showed it to me, it made perfect sense. Writing and troubleshooting CSS is not my strong point, but with each website I make, I get a bit better. It's been a while since I made a website, so I need to get back into the groove. Thanks again! 🙂
Occasional WordPress designer, learning more with each website!
August 7, 2014 at 8:54 am #117574copiousParticipantI forgot to ask... do you think it looks OK with that large amount of white space in the middle of the header area? I tried making a wider graphic with the logo and a photo, which filled in some of the space nicely. But it didn't work well on mobile phones - it widened the viewing area and made it necessary to scroll left to right on mobile phone, which didn't seem very good. It works fine right now, with the extra white space. Should I just leave it like this?
Occasional WordPress designer, learning more with each website!
August 19, 2014 at 10:10 am #119790copiousParticipantI finally got around to making the larger version of the logo for retina and high resolution screens, as you suggested. My original logo was based off a .ai vector file, so it was nice and clean to begin with. I brought it into Photoshop in a larger size so there would be no loss of quality. When I went to upload it, I noticed there was a file called [email protected] - so it seems like the theme I'm using (the Genesis Sample Theme) might already have a provision for a high resolution retina logo. So, that code you gave me might not even need to be used with this theme? If so, I'll save it so I can use it on another theme that doesn't have this feature.
The computer I'm using (a recent model 15" Macbook with retina) was displaying the logo nicely before, and I honestly didn't see any change with the new logo. Maybe because I had the original vector file, so it was crisp and clean to being with. I've tried on my iPhone 5S and iPad 2 and it still looks good. I guess it can't hurt to have the larger logo just in case - you never know when it will be used.
Thanks again for your help! The site looks great now! Almost done, and I can launch it on the live domain name.
Occasional WordPress designer, learning more with each website!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.