-
Posts
-
Hi,
I have had a custom header/logo designed and would like to replace the current one with it on my Vintage Kitchen theme using CSS.
It is to go in place of the current border section with white background and header image and I would like to know if and how I can do this once I purchase the Custom Design upgrade?
Can you please help?
Thank you very much!
The blog I need help with is mykitchencrumbs.com
Hi there,
Just to make sure I understand correctly — do you want to replace the brown squiggly border around the teapot, teacups and site title with your custom image?
This might be possible with Custom CSS, but it’s hard to say until I see the image. Do you mind uploading the image to your Media Library so that I can take a look at it and let you know if it can be done? Thanks!
Hi,
Yes that is correct I would like to replace the brown squiggly border and the whole area inside it but keep the white background inside it.
I have uploaded two version of what I wish to upload to my Media Library, I only just received the final copies of my new logo yesterday.
Thank you for your help!
Hi,
Here is the URL to the image I would like to use, it doesnt have a white background inside the brown border though, would I need to amend this before trying to add it with CSS?
I tried the below but it didn’t achieve the desired result…
#masthead hgroup {
background-image: url(http://mykitchencrumbs.files.wordpress.com/2013/07/my-kitchen-crumbs-47765-final.png);
}
Thank you for your help!
Hi there,
I tried to view your image but got a file not found error. Can you reupload it to the Media Library so that I can take a look at it? Thanks!
Hi,
Please see now reuploaded.
Thank you!
Hi there! I have CSS for you, but before you enter it in, can you upload a smaller version of the header image that’s 693px wide by 410px high? That’s the size of the original background image. The header image you have now is very large and does not display well within the constraints of the header area.
Once you have done that, then paste this CSS into the CSS Editor (Appearance > Customize > CSS), and replace “http://path/to/your/resized/logo.png” with the path to your smaller logo.
#masthead hgroup {
background-image: url('http://path/to/your/resized/logo.png');
}
#header-image-wrapper {
background: none;
}
.site-title,
.site-description {
text-indent: -9999px;
}Let me know if I can provide further assistance.
Hi there,
Just checking in with you. Have you had a chance to give this a try?
Hi,
I tried to resize my logo myself but couldn’t get the exact pixels required, I did get a chance to try out the code you provided and it seemed to work great except for my logo sizing issue.
I have sent my logo back to the designers and asked their help resizing but they have taken an unusually long time to get back to me. I might try and resize again myself.
I will definitely confirm with you once I have it up and working how I need it.
Thanks so much for your time and help!
Hi there,
You’re welcome, I’m glad to help. Let me know if there is anything I can assist with.
Hi,
I am still trying to get this new logo sizing working, when I tried the sizing you recommended its too squished and narrow.
Below is the link to a larger version.
Is there anyway to get it to keep the same alignment as the current one and even to add any extra space between the base of the total header and the start of the blog roll area?
Thanks!
Hi there, I’ve had a look. Can you give this CSS a try and let me know how it works for you?
#masthead hgroup {
background-image: url('http://mykitchencrumbs.files.wordpress.com/2013/08/47765_rev1-1050x7001.png');
background-size: 793px auto;
margin-top: -60px;
width: 793px;
min-height: 350px;
margin-bottom: 5px;
}
#header-image-wrapper img {
display: none;
}
.site-title,
.site-description {
text-indent: -9999px;
}
Thank you for this, it is looking much better.
Unfortunately it chops off a tiny bit of the top border accent, is there anything I can add to this CSS to fix that?
Thank you again for your help, sorry for late reply I was away on holidays.
Hi there, I made a few adjustments to the code so that the edge isn’t clipped at the top, and the new header aligns better with the ruffled background:
#masthead hgroup {
background-image: url('http://mykitchencrumbs.files.wordpress.com/2013/08/47765_rev1-1050x7001.png');
background-size: 793px auto;
margin-top: -33px;
width: 793px;
min-height: 350px;
margin-bottom: 5px;
}
#header-image-wrapper img {
display: none;
}
.site-title,
.site-description {
text-indent: -9999px;
}
#masthead {
background-position: 0 -115px;
}
.main-navigation {
border-bottom-width: 3px;
}I’ve tested it and it looks fine on my end. Can you let me know how this works for you?
This worked perfectly!
Thank you so very, very, very much!
I really appreciate this, I love it!
Thank you!!!
The topic ‘Insert custom logo/header with border using CSS’ is closed to new replies.
Theme Support 
