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
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.
Thank you Devblog!!
I really appreciate your help!
loveinspired,
Add this code in your CSS editor:
loveinspired
timethief
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:
http://faq.wordpress.com/2006/11/09/why-not-to-use-word/
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...
it is strange because in my tests it does work.
What's the URL to the new header image?
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.
Sure thing. Glad it worked.
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;
}
Merry Christmas to myself. I deleted this "#fff!important" from this:
"#header {
background:#fff!important;
}
And now it works... amazing... I want to thank the orginator of this this thread along with devblog for saving me mucho dineros... I am devoting my spare time to helping others too!!!
I am devoting my spare time to helping others too
That's the spirit!
I tried to use the code above to increase the width of the content but my sidebar ended up in the bottom of the page and now I'm lost. Tried to decrease the content-width but nothing happened...
@laymein - every theme is different. You have not provided a link to your blog so we can't help/
the adress is http://laymein.wordpress.com
I found it in another thread. I strongly suggest you link your user name to your blog as explained in the sticky, 8 Things, at the top of the forum. That way, we don't have to ask for it.
First it's recommended that you guys start a new thread. This is marked as "resolved" and I usually don't read those marked as such.
You can make reference to a certain post by placing its link on yours.
Having said that, when modifying an existing theme, is not recommended to copy its CSS, paste it in the CSS editor and check the "Start From Scratch" radio button. The way I'd recommend you to go is just to leave the "Add to [theme's name] CSS" radio button checked and make your modifications in the CSS editor. Since all elements have already been defined, you'll save yourself a lot of time and headaches.
Laymein, try reseting the theme by deleting everything in the CSS editor and checking the "Add to... " radio button. Once the theme is set back to the way it was, copy the code I gave to loveinspired and paste it in your CSS editor. It'll be more easy to track down what might've gone if the changes don't work (since you're using the same theme as loveisnpired, those mods should work for you too with some possible slight changes).
... I thought I read this thread was marked as resolved?
Last time I checked it wasn't. But this thread now seems to be resolved two times over. Your guidelines really worked! Thanks alot for resolving this problem! I've been stuck for hours with this the last couple of days... Thanks alot!
Yeah, the OP might've taken the "resolved" tag out... anyway, I'm glad it worked for you too.
I am new at this stuff. The problem is resolved. Thank you so much for your help.
This topic has been closed to new replies.
teewilling
