Wider Header Image

rtwnj · Member · Jan 26, 2015 at 7:23 pm
Copy link

Add topic to favorites
Hello –

I am trying to set up this site with a wider image at the top. The site theme initially allows only for a 385×102 image. I need to have about an 800 wide image showing. Can I do this with CSS with this theme?

–*Rob

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Jan 27, 2015 at 8:54 am
Copy link
I wonder how you got the 385X102 dimensions? 385 px width appears far too less. Unfortunately I could not find any blogs using the Yumblog theme with header but what I can see in the preview theme on my site, the width of the header image measured ~1100 px and height ~296px.

Is it possible to upload the header image to your site so we can see how it looks? Also the Yumblog support document does not list the header dimensions. which is atypical.
rtwnj · Member · Jan 27, 2015 at 3:08 pm
Copy link
When I go to upload the header image (I have a temporary one I am using for testing – I’ll put it up) – I’m met with a box that has a “select and Crop” button – when I click that button – I then get a box that lets me crop and tells me max dimensions are 385×102.

I uploaded a bigger image and this larger image seems to be stuck but it’s not the 800 wide that I’d really like to use.

I’m savvy enough to inspect the element through Chrome and I can see there that it mentions 385×102 but I just don’t know quite enough CSS to know what to add to the custom CSS to make it accept a larger image.
magpiekelly · Member · Jan 28, 2015 at 1:29 am
Copy link
I’m interested in this as well. magpiekelly.com The large test image that is there now (old jar with marbles) must be left over from another premium theme that i tested for a few hours. I’d like to replace the image but retain the size. When I try to switch images via the Custom Header option it has to be cropped down to a tiny badder on the left side.
Thanks,
Kelly
magpiekelly · Member · Jan 28, 2015 at 1:37 am
Copy link
Here are some example of larger and centered headers with yumblog…

https://stela9.wordpress.com/

http://havenandhoney.com/2014/07/31/butter-sugar-cookies/
staff-happychia · Staff · Jan 28, 2015 at 9:51 am
Copy link
@magpiekelly, thanks for the blog’s reference. I can see the following custom CSS on the second blog.

The first blog’s header is also a small image but just positioned to center.

Try this style and replace the image url of any uploaded image.
```
.tertiary-actions {
    height: 244px;
    width: 1120px;
    background-image: url(' replace url');
    background-repeat: no-repeat;
    background-position: center
}
```
rtwnj · Member · Jan 28, 2015 at 12:59 pm
Copy link
Thanks for this – will try it out later and report back!
rtwnj · Member · Jan 28, 2015 at 2:15 pm
Copy link
That code worked pretty well. One side effect is that the image appears below the site title header text. I had to take that text out to make it work. The current image I have up there is pretty good, though I need to tweak the size a bit more.
magpiekelly · Member · Jan 30, 2015 at 8:30 pm
Copy link
So for me, it only added more white space under the image and bumped post, “Blog page design” title down a bit. I just want to replace the current 1120×296 image with another one. I don’t know what to do. I open the CSS thing on the right and a white window comes up with a welcome message. I know how to right click the picture (in Google Chrome) to ‘inspect element’. Now what?

I can right-click the url of the image in the Inspect Element window and replace it with the url of the one I prefer **AND IT LOOKS MARVELOUS!**. But how do I make it stick?? How do I save it?
magpiekelly · Member · Jan 30, 2015 at 9:54 pm
Copy link
Ok, so the latest is that I somehow managed to get my preferred image ‘to stick’ even though the bottom half of it has been cropped off. (!!yay me!!) Now, I just need to find a way to delete the temporary one and slide the preferred one up into its place. help!
staff-happychia · Staff · Jan 31, 2015 at 12:03 am
Copy link
1. Delete existing custom CSS.

2. Add this CSS instead:
```
.inner {
	position:relative;
}

.tertiary-actions {
	position:absolute;
	top:0px;
	right:0px;
}

#header #headimg {
    margin-bottom:0px;
}
```
Let me know if you liked the result.

This way,
1. you can change your header image from Appearance > Header dashboard screen.

2. header image is clickable.
staff-happychia · Staff · Jan 31, 2015 at 12:04 am
Copy link
@magpiekelly,

My previous update is for you :-)
magpiekelly · Member · Jan 31, 2015 at 5:08 am
Copy link
WoW! It worked! I had a 1120×244 image ready to go for when you replied with a title and byline in a white font and it looks great!!! The temporary image was peeking out at the bottom a little since it was 1120×296, but I just hid it in Appearance>Header.

Is there anyway to make it look better on mobile devices/iPad/iPhone or is that just out of the question/impossible?

So appreciative,
Kelly
staff-happychia · Staff · Jan 31, 2015 at 8:58 am
Copy link
I don’t know which CSS to add to make the image look good on mobile. It should be definitely possible. I am still learning.

I experimented including the style in media query as following.
```
@media screen and (min-width:992px){

.tertiary-actions {
    position: absolute;
    top: 0;
    right: 0
}
.tertiary-actions {
    height: 244px;
    width: 1120px;
    background-image: url('https://magpiekelly.files.wordpress.com/2015/01/5wordpress1120x244withbyline.jpg')
}
}
```
What this means is the above styles will be applicable only on screen widths more than 992px, which most desktop screens are. So on the smaller screens like iPad and iPhone, the theme default CSS kicks in.

You can add header image from Appearance > Header and see how it goes on smaller screen. You can hide the header image you add from Appearance > Header by including the following CSS as well in the above media query so it is hidden on large screens.
```
#header #headimg {
   display:none;
}
```
magpiekelly · Member · Feb 2, 2015 at 5:19 am
Copy link
Well….I think it’s perfect. I added a small 385×102 img for the header on mobiles devices and I think it’s going to work. Thank you!!! Now I’m going to go dig around the forums to see how to remove the author’s name on all the blog posts since I’m the only author.
Thanks for all of your help!,
kelly

No items found.