Increasing the width og the template borders
-
I paid for the upgrade. I am a photographer and I am not happy with the 450px width limit on my images. I would like my images to be viewed at 800px. Can this be done?
The link to my blog is http://loveinspired.wordpress.com
Is this the Kubrik template?
Can anyone help?Kind Regards,
Andy
-
There’s no staff support for learning CSS. There are afew bloggers here who occasionally drop in and give advice. CSS resources are found here http://faq.wordpress.com/2006/08/15/where-can-i-find-css-customization-help/
-
I haven’t forgotten about your request, loveinspired. I’ll have something for you by Friday, sooner if I can.
-
-
loveinspired,
Add this code in your CSS editor:
div#page { width: 1000px; background: #fff !important; clear: both; overflow: hidden; padding: 0; margin: 0 auto; } #header, #footer{clear: both; width: 1000px !important; margin: 0 !important; padding: 0 !important;} #header {background: #fff !important;} #header #headerimg {margin: 0; padding: 0;} #content { width: 780px; padding: 0 10px; float: left; overflow: hidden; } #sidebar { width: 180px; padding: 0 5px; margin: 0; float: right; } #footer {background: #fff !important;} .widecolumn {margin: 0 auto; float: none !important;}The main content has a width of 780px, so I’d suggest you not to make your images wider than 750px.
The main container is 1000px wide, so you’d need to create a new header image 1000px wide.
You may want to create an image for the footer or just leave it as it is (with a white background).
On a final note, I noticed that it seem you’re writing your posts in Word, then copy the text and paste it into the editor. That’s not recommended, as you can read here:
HTH.
-
I could not customize the header to expand accross the page. It wanted to crop it to original template header size.
-
You need to upload the image for the header to the image library and then put the URL into the CSS at the appropriate place. The custom image header uploader is designed for the standard theme, not a modified theme, so it will always try and crop it to the original size.
-
Sounds like a plan. Does any body know the right code for pulling my image from the image library and placing it as my custom header?
-
I added this code to the css editor as thesacredpath suggested but it did not increase the size of my header.
————————————————————————–
#pic {
background:transparent url(http://loveinspired.files.wordpress.com/2008/12/animated1000-light4.gif) no-repeat scroll 0 0;
}
—————————————————————————At the same time I added the code devblog posted and it worked except for the header. The header stayed the same. The image that I am linking is 1000 px wide but I am seeing something smaller at the header.
Again my url is http://loveinspired.wordpress.com—————————————————————————-
div#page {
width: 1000px;
background: #fff !important;
clear: both;
overflow: hidden;
padding: 0;
margin: 0 auto;
}#header, #footer{clear: both; width: 1000px !important; margin: 0 !important; padding: 0 !important;}
#header {background: #fff !important;}
#header #headerimg {margin: 0; padding: 0;}
#content {
width: 780px;
padding: 0 10px;
float: left;
overflow: hidden;
}#sidebar {
width: 180px;
padding: 0 5px;
margin: 0;
float: right;
}#footer {background: #fff !important;}
.widecolumn {margin: 0 auto; float: none !important;}
-
See if you can reset the header image (put the original image back), then try adding the following to the CSS code I gave you:
#headerimg { background: transparent url(URL/to/new/image) top left no-repeat !important;} -
That did not work. What happened was it showed a portion of the larger image because the box was smaller than the new image. In other words, it showed an un-resized newer image in a smaller frame so only part of the nbewer banner could be seen. Strange…
-
-
never mind my previous post, it does work with the background color, and I thought you’d make the new header image with the same height as the old one… there’s more that need to be changed because the new image is taller…
I’ll post a revised code as soon as I can.
-
Okay, here’s the revised code. Replace all the code I previously gave you with this one:
h2 {text-align: left;} div#page { width: 1000px; background: #fff !important; clear: both; overflow: hidden; padding: 0; margin: 0 auto; } #header, #footer{ clear: both; width: 1000px !important; margin: 0 !important; padding: 0 !important; } #header {background: #fff !important;} #header #headerimg { width: 1000px !important; height: 263px !important; background: #fff url(http://loveinspired.files.wordpress.com/2008/12/animated1000-light4.gif) top left no-repeat; margin: 0; padding: 0; } #content { width: 780px; padding: 0 10px; float: left; overflow: hidden; } #sidebar { width: 180px; padding: 0 5px; margin: 90px 0 0; float: right; } #footer {background: #fff !important;} .widecolumn {float: none !important;} .narrowcolumn, .widecolumn {margin: 63px auto 0;}it should work now. Really.
Let me know.
-
Thank you devblog…
You are right! The change you made works. I am so excited. Thank you for staying with me on this.
Kind Regards,
Andy
-
Haha… I spoke too soon. Even though the borders and the header are exactly correct the images that I upload are no different which was the goal in the first place. 450px x 275px
Oh wait… I just realized that I can chamge the image by using the advanced settings and change it to “original size”. It’s more steps but I am fine with it.Thanks again devblog.
-
-
I have been trying to help myself by following this thread and it has helped me alot. I am having the same problem with my header. I tried everything except for substituting my header location in the appropriate place… My blog: http://teewilling.wordpress.com/
-
Here is the text of my stylesheet:
h2 {
text-align:left;
}div#page {
width:1000px;
background:#000!important;
clear:both;
overflow:hidden;
margin:0 auto;
padding:0;
}#header,#footer {
clear:both;
width:1000px!important;
margin:0!important;
padding:0!important;
}#header {
background:#fff!important;
}#header #headerimg {
width:1000px!important;
height:236px!important;
background:transparent url(‘http://teewilling.wordpress.com/wp-admin/media.php?action=edit&attachment_id=354’) top center no-repeat;
margin:0;
padding:0;
}#content {
width:780px;
float:left;
overflow:hidden;
padding:0 10px;
}#sidebar {
width:180px;
float:right;
margin:90px 0 0;
padding:0 5px;
}#footer {
background:#000!important;
}.widecolumn {
float:none!important;
}.narrowcolumn,.widecolumn {
margin:63px auto 0;
}
- The topic ‘Increasing the width og the template borders’ is closed to new replies.
WordPress.com Forums 
