Hemingway Rewritten – customizing title logo
-
I’ve been able to add a custom logo to the tile block area and remove the title text thanks to this original thread.
What I don’t like about the current code is the large amount of black space that is above and below the logo when you scale the screen width smaller, or view it on a tablet or phone.
How could I further refine the code to eliminate vertical spacing when viewed via mobile?
The blog I need help with is: (visible only to logged in users)
-
Hi, this is one of the issues with trying to use an image for the site title in Hemingway Rewrittten. We can use a few Media Queries to adjust the height at various widths. Add the following to the bottom of your custom CSS and see what you think.
@media screen and (max-width: 600px) { .site-title { height: 160px; } } @media screen and (max-width: 500px) { .site-title { height: 140px; } } @media screen and (max-width: 375px) { .site-title { height: 100px } } -
Substantially better. Thank you.
Along the same topic, can I eliminate some of the spacing below the text at the bottom of the dark title block? If that will toss a monkey wrench into what you just did for me, then we can live with it. I’d just like to get it a bit closer to what is left at the top of the logo.
-
There is padding on the four sides of the black box, and then a bit of bottom margin on the site description. Let’s try and set the bottom margin on the description to 0 and see if that works for you.
.site-description { margin-bottom: 0; } -
That’s a little better, but it doesn’t move it much. What was the default margin to begin with?
Can we squeeze any more out of that?
Thanks again for the assistance.
-
Hi, it was only like .85em, so yes, not much. You can also use the following and adjust the bottom padding for the overall div.
.site-branding { padding-bottom: 1.7em; } -
Thank you again.
I fiddled with the bottom padding number to find a value that works for me. 1.0em was the number that looks best.
-
-
Hi Richard.
I’m reopening this thread since I notice a problem. I’m quite sure it’s of my own doing, but I’d like to get it squared away.
First, a small note. The theme states two different header image sizes in two different places. On the theme website, it states: 1280 x 416. On the customize menu area it states: 1280 x 426. Small difference I know, but one is correct, and one isn’t.
Now for my problem. My header image is being stretched much larger than 426h, which is what I have currently uploaded. I’m quite certain it’s because of the title box background size. The box is what is because of the size of the logo. I can adjust the logo size to whatever it needs to be, but what should it be? My main goal is to not stretch the header image height.
Thanks.
-
The Hemingway Rewritten header area is actually designed to stretch that way, and because of that the height is more of a guideline than an absolute.
You could force the height of the container element for the header image to be 426px high, however, because of how the header is setup you would also need to make a few other adjustments and some of them might not look the best.
Here is an example CSS snippet you can try in your Appearance > Customize > CSS editor to see what I mean:
@media screen and (min-width: 790px) { .site-header-image { height: 426px !important; } }That rule will limit the height to 426px for the element that has the class name “site-header-image” for any browser widths that are 790px or wider. Now, if you widen and narrow your browser window, you will see that the image still stretches. That’s part of the charm of Hemingway Rewritten, but if you want to turn it off, you need to set the “background-size” property back to the default:
background-size: auto auto;The next problem is that the site title container in the middle uses a percentage value because it expects the height of the header image to be variable depending on the width of the browser. To turn that off, you can set a height manually in pixels (instead of a percentage) like this:
padding-top: 50px;Putting it all together:
@media screen and (min-width: 790px) { .site-header-image { height: 426px !important; background-size: auto auto; padding-top: 50px; } }The last problem is that the image will have blank space on either side of it if the browser window goes wider than 1280px. That happens because with a fixed height header image, the width is fixed as well. You could remove the “background-size: auto auto;” part of the example CSS to avoid that, but the tradeoff is that the image will stretch and some of it will get cut off because you are manually forcing the container element to a certain height.
I know this explanation was a little long, whew! But hopefully the examples will help you and you’ll have a better understanding of how “background-size” works.
You might also like:
http://davidwalsh.name/demo/background-size.html
https://en.support.wordpress.com/custom-design/custom-css-media-queries/ -
@designsimply Whew indeed! Those are great options. I’ve tested them and I think I can make that work.
My first choice however would be, instead of adding more code, to just make our logo smaller. A size that would better fit the theme and not “force” the header image to expand in height until it gets super wide in width like it’s designed. If that was your task, what would you recommend the maximum height for the logo image to be?
-
Hmm. Give this a try:
Change this:
.site-title { display: block; height: 200px; width: 600px }To this:
.site-title { display: block; min-height: 100px; }And change this:
.site-branding { background: url('https://wardskitchens.files.wordpress.com/2015/04/wkb-header-logo1.png') no-repeat scroll center 20% / 90% auto rgba(0,0,0,1) }To this:
.site-branding { background: url('https://wardskitchens.files.wordpress.com/2015/04/wkb-header-logo1.png?h=100') no-repeat scroll center 20% rgba(0,0,0,1); }If you want to adjust the 100px height to see what works best, change “min-height” in the first block and then change the “?h=100” part of the image URL in the 2nd block to match. In the “site-branding” block, the “20%” number is where the logo appears within the back box in the middle of the header.
-
Thank you, thank you! I think that looks much better. I see you are forcing the logo to 100 in the code. It makes it look a bit funny when forced to a smaller size via code. I think I’ll at least try and just make a logo that is 100 h and see if that makes it look a bit better. If it does, great. If not, great. I’m just picky is all.
One last thing. Would you mind looking over all of the custom CSS that has now been implemented? The reason I ask is there are now two of you helping me in this thread, which I do appreciate – greatly, with the logo/header customization and now I think there may be some conflicting coding going on. Perhaps not. I don’t know CSS coding at all. Just enough to tinker around adjusting values to see what happens.
-
One additional thing that made me change it back until addressed. Inserting the CSS given last by @designsimply, made the logo to big widthwise for the containing black box when viewed on small screens such as iPhone.
-
I don’t see conflicting code so much as I see a complex set of code which you have to keep adding to in order to make this type of change to a theme header to try to make it do something it wasn’t designed to do. Some CSS changes are easier to make than others, and you happened to pick a pretty hard one!
One additional thing that made me change it back until addressed. Inserting the CSS given last by @designsimply, made the logo to big widthwise for the containing black box when viewed on small screens such as iPhone.
It looks like you could leave the “?h=100” part off of the logo image and it still looks good. Is it working how you wanted now?
- The topic ‘Hemingway Rewritten – customizing title logo’ is closed to new replies.
WordPress.com Forums 