Header, CSS
-
Hello,
I was struggling lately to set up a picture on my blog’s Header, now I can upload the picture, but it shows too big, i have tried to set the Width in CSS revision and it still out of control, can anyone help me please?
My other question is : How can I remove the “Edit” at the bottom of my page?
Thank youThe blog I need help with is: (visible only to logged in users)
-
Typically we don’t have to use CSS to manipulate the dimensions of custom header. I can’t check which theme you are using as your blog is protected.
But there will be suggested width and suggested height in pixels in your Dashboard > Appearance > Header > Select Image field. So it should be fine as long as you ensure your header is within those dimensions.
Edit button is visible because you are logged in to your WordPress.com dashboard. It will disappear once you log out of your dashboard and check. Edit button won’t be shown to your visitors for this reason (as your visitors can’t access your dashboard).
-
Thanks chaitanyamsv, I’m actually using the Twenty Twelve theme, and I thought the picture should be re-sized automatically, which is not the case. So when I upload the picture it appears too big. should I turn my page ON then you can see because its set Private so far
-
Yeah, it will be helpful if you could let me see your header.
It is not possible to upload the header image on Appearance > Header page without cropping an oversize image.
I see the suggested width is 960 pixels and the suggested height is 250 pixels.
-
I just set my site public now, you can see it and tell me how to re size the logo, as way it could be complete and fit with the same dimension like it is now, because it has been cut half way there, and I just want it complete with the same size and a little larger to be under the frame menu. It fits well under HOME and should continue until the end of the frame, after TESTIMONIALS. That’s how I want it, how can I re size it that way? Larger and complete not half size..
-
-
Hi there, Twenty Twelve supports the Flexible Header feature, so you can upload and use any size header you desire. When you upload it at Appearance > Customize > Header you are give the opportunity to crop it or use it “as is”. If you choose not to crop, then it will be used at that size.
The theme itself will not adjust the width to fit your header image, if that is what you are wanting, that would have to be adjusted using CSS.
Can you let us know what you want as your final outcome and we can help you achieve that.
-
thesacredpath, so here is what happened,if I don’t crop the logo and upload it directly, and when I crop I doesn’t re size the Logo it just shows it half. i hope you have checked on my page before to see the difference and understand what I’m talking about. So I’m going to upload again without cropping, it will just be a giant pic as header, what I obviously don’t want.
-
And here is the actual CSS code and once again I don’t have the complete Logo when I crop it just take it to half size and cut the bottom of the picture.
#masthead {
position: relative;
top: 0px;
background: url(https://osirisrevolution.files.wordpress.com/2014/12/cropped-jennyce-logo-final.png’);
width: 770px;
height: 200px;
margin: 0px;
margin-top: 0px;
}Is there any mistake in my CSS?
-
I’m not entirely sure I’m understanding. Perhaps I can explain what I typically do.
1. I create the header image at the exact size that I want it in an image editing program on my computer.
2. I go to Appearance > Customize > Header, click add new, upload the image and then when the crop page comes up, I pull the handles on the crop frame out to completely encompass the image. Then I click the “Don’t crop/use as is” button.I’m looking at your site now with the full sized header image, and the one problem I see is that the image is very tall. We can make the image smaller, but due to its current proportions, it isn’t going to look too good.
This CSS will make the image 200px tall, and by using width: auto; it will keep the image proportions.
img.header-image { width: auto; max-height: 200px; }This CSS forces a 200px height, and then stretches the image to fill the entire width of the content area.
img.header-image { width: 100%; max-height: 200px; }This used the 200px height and 770px width values you have in the code you reference above.
img.header-image { width: 770px; max-height: 200px; }If you want a header image that is 200px tall and 700px wide, my suggestion would be to create on that is that exact size in your image editing program. The proportions of the one you have now is very difficult to force into those dimensions without looking bad.
Give the above example CSS a try (keeping the full-sized header image you now have active) and see what you think.
-
Okay, thank you very much, I’m going to try everything you said above step by step, and will keep you posted when its done!
-
-
Hey thesacredpath, you are the best, I followed your instructions and can’t ask for better result, thank you very much for your help.
I would ask another question if you don’t mind…
How can I fit the same Logo in the General Settings / Blog Picture Icon
I might need to use another CSS code to re size the picture as the blog Icon Picture looks like a Square Size, how to do that? -
Hooray on the header image!
On the blog picture, yes, it has to be square, and since they are such a tiny size, I would probably suggest making a new one that is far more simple, perhaps just the graphic logo of the eye. At the small size used in the address bars and tabs, all the details will get lost.
-
Copy that! I think I’m good so far, my designer just sent me a new sample of the pic that he re sized, so I guess I’m done with today’s complain.
Thank you very much for your assistance. -
-
Dear thesacredpath, I would like to create a sign up panel on my page for the members who would like to join. How can I do that please?
Thanks. -
-
Well, but I saw : Subscribe by email panel on “thesacredpath” site, it’s almost the same thing, I want, didn’t he do it with wordpress.com ?
-
#wrapper {
width: 800px;
margin: 0 auto;
}
#header {
float: left;
width: 100%;
height: 150px;
background-color: red;
}
#body {
float: left;
width: 70%;
height: 300px;
background-color: blue;
}
#sidebar {
float: left;
width: 30%;
height: 300px;
background-color: green;
}
#footer {
float: left;
width: 100%;
height: 100px;
background-color: yellow;
}
- The topic ‘Header, CSS’ is closed to new replies.
WordPress.com Forums 
