So I bought a new theme that replaced my prophotoblog theme, and I love it. Only problem is my blog pages and any post or text is about 1/3 of a page and cuts off all of the pictures.
I am not a programmer by any means. Nor do I have to time to play and learn.
I am looking for anyone on here that would be willing to help for a small fee, or any suggestions of persons you know of that would be willing to make a few minor CSS changes to improve the overall layout.
All you need to do is increase your article.box width to the width you want (ie: 1000px), and then make all your images a maximum of 1000px. Easy peasy.
It looks like you might want to make the images about 20px smaller, since you're using a boarder and want spacing.
Have a look in your theme directory (should be something like /wp-content/themes/yourthemename) there you'll find at least 1 .css file. The value will be in there.
As an aside remember your clients don't all have 22" screens. Looking at my stats most of my clients actuall view on laptops these days.
If you're really stuck, shoot me a pm and I might be able to help.
So after reading the posts here I decided to venture out and try and fix it myself. I'm 95% happy with what I was able to accomplish. I still cant get the featured 1st image to center. But I'll talk to my "compsci bs/ms in less than 4 years" major brother. In theory we ought to be able to make something work haha.
cbradio09 wrote:
So after reading the posts here I decided to venture out and try and fix it myself. I'm 95% happy with what I was able to accomplish. I still cant get the featured 1st image to center.
Make sure to view it on different browsers, different size resolutions and monitors.
As I recall, changing the default width of the container bumps some other things around, like the sidebar. It's not simple.
For centering, try including a style field in the div tag you want to center:
style="text-align:center;"
cbradio09 wrote:
yea thats it. thats what its looking like. which sucks, who wants a 500 px wide photo on a 22 inch screen?
I think you could go as wide as 650px for an image with that theme.
Looks like you managed to get it pretty much squared away, just a couple of things you'll want to change in your style.css file:
Line 709: Remove the px after the % sign, the line should look like this: width: 100%;
Line 755: Changethe width to 100% instead of 704px so that it matches your other changes, should look like this: width: 100%;
If you want to center the first featured image of your posts put this at the bottom of your style.css file:
Thanks a ton! that code worked perfectly. Curiously enough, now the pictures that I reinsert at a smaller width are supposedly centered but are not centered on the background. Any idea what line of code I need to change so it centers itself on the background correctly?
Thanks a ton! that code worked perfectly. Curiously enough, now the pictures that I reinsert at a smaller width are supposedly centered but are not centered on the background. Any idea what line of code I need to change so it centers itself on the background correctly?
Thanks,
cam
I'm not 100% sure what you're referring to but I think you're talking about the main images overflowing to the outside of the content area correct? This is happening because you've set an explicit width for the article_t, article, & article_b sections to 950 pixels, but the images you're using have a width set to 1001px. Since the image container (the article element) has an explicit width, it will not resize itself to accomodate the larger contents, as this only happens when no width is set or relative widths are being used. There are two solutions to this, the first is to use images that are sized to fit within your post content area, which using your current measurements would be a max of 906px wide (950px width - 22px of Left Padding - 22px of Right padding), OR you can put some CSS rules in place that will tell the browser to scale the images, though keep in mind each browser handles scaling differently and often times the end result is not perfect, though it can save you the headache of resizing all of the images. This also only works in modern browsers i.e. IE9+, FF, Chrome & Safari. If you want to go this route, add the following at the bottom of your style.css:
