WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hello there,
I am hoping to make a border that extends thru the whole page. I managed to do that on blogger a while back but cant find the code I used. Any suggestions?
This is my blog at WP that I am trying to add the border:
http://limetreefruits.wordpress.com
This is the one I have on blogger:
http://www.limetreefruits.com
Thank you!
The blog I need help with is limetreefruits.wordpress.com.
I can't connect to the blogger site; could you describe what you mean?
Hi, thanks for checking my question.
Under my banner on WP you see that is a red border. I want to extend that border beyond the banner's width; to extended till the edge of the browser.
I added below a screenshot of the blogger view that has that border extended like that. Hope you can see that pic and that will help understand what I mean. :)
Thanks!
Screenshot of banner
Your max-width on your #page is set to 1000px, so you'd have to change that (it's too small).
However, the body is set to have padding on either side, I suspect so that the pink color under there shows through. So you'll have to set your body to have 0 padding, too.
Then take your #main attribute and set it back to max-width 1000px (so it's not taking up your whole page), and set the margins on #main so:
limetreefruits
margin-left: auto;
margin-right: auto;Then you'll have to go into #branding img and I would re-upload an image that is the right size. If you set the width to 100%, you could upload an image with a generous white space to the left and right to ensure that you don't stretch the image to fit. By setting the width to 100%, you get the border all the way across the bottom.
I hope that's helpful!
This *might* work as a starting point. It does take over the body background, which means it overrides the built in functions for background images such as on Appearance → Background pages. If you plan to keep the background white, it may work for you. Also, note that this moves the banner to be the very first thing on the the page.
body.custom-background {
display: block;
background: url(http://limetreefruits.files.wordpress.com/2012/08/cropped-baralhobanner63.jpg) top center no-repeat;
display: block;
height: 215px;
border: 1px solid red;
border-bottom: 5px solid red;
}
#page {
margin-top: 221px;
}
#branding a img {
display: none;
}This was a first pass, and there might be an even better way to do it if anyone else has ideas.
HI there, thanks for your response. the bar looks perfect all across but this deleted my header. any ideas how to make it show up again?
@zandyring I copied and pasted what you posted and didn't work. I am not good with coding, I guess I am missing something. any chance you could spell it out where to change #page and #branding? Thank you!
Looks like that's happening because you deleted this image from your media library:
http://limetreefruits.files.wordpress.com/2012/08/cropped-baralhobanner63.jpg
Upload a new image to your media library and replace that link in the CSS example inside the url() function with a new link tot he new header image you uploaded.
Thank you so much! it is back!
The red bar is overlapping the header thou. I changed the height to 220px and something else is overlapping now. Seems to be the menu bar. I found on another thread this code:
#branding #searchform {
display: none;
}
but didn't work. any suggestions?
by the way I don't mind removing the menu bar completely. I actually prefer that.
Thank You!
The overlapping is probably happening because the new image you uploaded is a slightly different size than your original. Try updating the custom-background height to 228px and the margin-top value for #page to 233px. Note that you can fiddle with the numbers until they look good to you.
To completely get rid of the entire header (the old one that you're not using), including the menu bar, look in your CSS and change this:
#branding a img
to this:
#branding
YES!!!!! It worked! Looks awesome!
Thanks so much for all your help!
Even though I really wasn't very helpful, I am glad you got this working!
This topic has been closed to new replies.
