Home · Register · Search · View Winners · Software · Hosting · Software · Join Upload & Sell

Moderated by: Fred Miranda
Username   Password

FM Forum Rules
Wedding Resource List
  

FM Forums | Wedding Photographer | Join Upload & Sell

  

Archive 2012 · In need of CSS work, suggestions?
  
 
cbradio09
Offline
• •
Upload & Sell: Off
p.1 #1 · p.1 #1 · In need of CSS work, suggestions?


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.

Thanks,

Cam



Dec 26, 2012 at 10:43 PM
amonline
Offline
• • • • •
Upload & Sell: Off
p.1 #2 · p.1 #2 · In need of CSS work, suggestions?


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.



Dec 26, 2012 at 11:19 PM
ai3x
Offline
• • • •
Upload & Sell: Off
p.1 #3 · p.1 #3 · In need of CSS work, suggestions?


Amon's right. If you do want to do it yourself, just use firebug or chrome developer tools and play with the numbers until it looks right


Dec 27, 2012 at 01:20 AM
hardlyboring
Offline
• • • • •
Upload & Sell: On
p.1 #4 · p.1 #4 · In need of CSS work, suggestions?


Who is the blog theme by?

I would get a hold of Tim over at Rawfolio. He is my defacto web design guy.



Dec 27, 2012 at 02:46 AM
cbradio09
Offline
• •
Upload & Sell: Off
p.1 #5 · p.1 #5 · In need of CSS work, suggestions?


its a themeforrest theme.

Problem is, I don't know where to change the parameters you mentioned haha.

Thanks,

Cam



Dec 27, 2012 at 01:45 PM
cbradio09
Offline
• •
Upload & Sell: Off
p.1 #6 · p.1 #6 · In need of CSS work, suggestions?


I had a buddy looking at it and he said it had some nested values that depended on loops or something?

Not sure. Thanks tho.



Dec 27, 2012 at 01:50 PM
TheGE
Offline
• • •
Upload & Sell: Off
p.1 #7 · p.1 #7 · In need of CSS work, suggestions?


That theme's "Chocolate" isn't it? It's easier just to size your photos to fit than edit that particular theme.


Dec 27, 2012 at 03:45 PM
cbradio09
Offline
• •
Upload & Sell: Off
p.1 #8 · p.1 #8 · In need of CSS work, suggestions?


yea thats it. thats what its looking like. which sucks, who wants a 500 px wide photo on a 22 inch screen?


Dec 27, 2012 at 04:41 PM
ai3x
Offline
• • • •
Upload & Sell: Off
p.1 #9 · p.1 #9 · In need of CSS work, suggestions?


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.



Dec 27, 2012 at 06:33 PM
 

Search in Used Dept. 



cbradio09
Offline
• •
Upload & Sell: Off
p.1 #10 · p.1 #10 · In need of CSS work, suggestions?


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.

Thanks for the support.




Dec 28, 2012 at 02:44 PM
ai3x
Offline
• • • •
Upload & Sell: Off
p.1 #11 · p.1 #11 · In need of CSS work, suggestions?


<div align=center>
picture
</div>



Dec 28, 2012 at 04:03 PM
cbradio09
Offline
• •
Upload & Sell: Off
p.1 #12 · p.1 #12 · In need of CSS work, suggestions?


I'll give it a shot, the trick is finding where that pic is nested. I didn't have much luck last night.

Sit-rep to follow haha.....



Dec 28, 2012 at 04:36 PM
TheGE
Offline
• • •
Upload & Sell: Off
p.1 #13 · p.1 #13 · In need of CSS work, suggestions?


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.



Dec 28, 2012 at 05:25 PM
cbradio09
Offline
• •
Upload & Sell: Off
p.1 #14 · p.1 #14 · In need of CSS work, suggestions?


I set it to 100%, so it varies with the screen. Pretty sweet so far. I'll do some more testing tonite.


Dec 28, 2012 at 05:34 PM
cbradio09
Offline
• •
Upload & Sell: Off
p.1 #15 · p.1 #15 · In need of CSS work, suggestions?


Should vary*


Dec 28, 2012 at 05:41 PM
tjsix
Offline
• •
Upload & Sell: Off
p.1 #16 · p.1 #16 · In need of CSS work, suggestions?


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:

.hs_done img {
display: block;
float: none;
margin: 0 auto;
}

Keep in mind the above code will override any other styles that are currently being applied for those 3 rules for that first image.

-Tim



Dec 28, 2012 at 09:30 PM
cbradio09
Offline
• •
Upload & Sell: Off
p.1 #17 · p.1 #17 · In need of CSS work, suggestions?


Tim,

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




Dec 31, 2012 at 02:52 AM
tjsix
Offline
• •
Upload & Sell: Off
p.1 #18 · p.1 #18 · In need of CSS work, suggestions?


cbradio09 wrote:
Tim,

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:

.article img {
max-width: 100%;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}



Dec 31, 2012 at 10:37 PM





FM Forums | Wedding Photographer | Join Upload & Sell

    
 

You are not logged in. Login or Register

Username   Password    Retrive password