• Resolved djhopps

    (@djhopps)


    Hi there

    I’ve bought the Autofocus+ Pro theme for WordPress and I am trying to change the width of my whole site to 1000px. Autofocus is set to 800 pixels wide, so I have been through the style.css for autofocus and changed all the “800px” to “1000px”. However, I can’t figure out why the blog grid is appearing all out of alignment. I’ve just included text (no images) and you can see the grid is not aligned properly at all.

    If I were to remove the 1000 and put 800 back, it’s fine. Should I be looking elsewhere? Any help would be GREATLY appreciated!

    Site is at https://hopkinsphotography.co.uk

    Thanks in advance
    DaveH

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter djhopps

    (@djhopps)

    I thought I would elaborate on my initial post…… what I am trying to do is to modify my Autofocus+ Pro site and :

    1. Change the site width to 1000 pixels from 800 pixels
    2. Display 1000px width pictures in the single-post section (currently they display in a 1000 pixel area but I just get a 800/794 pixel size photo with a grey background).
    3. Have post-images on the blog-grid align correctly with just a maximum of 9 or 10 posts.

    Can anyone help here? I’ve just added an image for the top 5 posts on my site.

    Here’s what I have done so far…..

    1. I’ve edited my autofocus style.css so all 800 pixels are removed from just the “layout” section (I’ve added +200 to these values):

    /*	Layout
    -------------------------------------------------------------- */
    body {min-width:1032px}
    #header {width:1000px; margin:22px auto;}
    #access {position:relative; overflow:hidden;}
    #wrapper {position:relative;z-index:20}
    #main {width:1000px; margin:0 auto; padding:0;overflow:visible; position:relative;z-index:25}
    #container {width:1000px;display:table;padding:0; margin:0 0 66px;}
    #content {margin:44px 0 0; width:1000px; overflow:visible}
    .main-aside {width:392px; float:left; position:relative;}
    #secondary {clear:right}
    #footer {clear:both; width:1000px; margin:0 auto}
    #subsidiary {width:1000px; margin:0 auto; overflow:hidden}
    #siteinfo {clear:both; }

    2. I’ve made changes to the default-layout.css (as this is Autofocus +Pro) in order to try and ensure that the 1000 pixel table is adhered to but this doesn’t seem to reflect in the blog-grid as it’s now back to showing around 800 pixels

    .blog #content .hentry.p1 {width:664px;margin-right:5;}
    .blog #content .hentry.p2 {width:330px;}
    .blog #content .hentry.p3 {width:330px;margin-right:5;}
    .blog #content .hentry.p4 {width:330px;margin-right:5;}
    .blog #content .hentry.p5 {width:330px;}
    .blog #content .hentry.p6 {width:330px;margin-right:5;}
    .blog #content .hentry.p7 {width:665px;}
    .blog #content .hentry.p8 {width:664px;margin-right:5;}
    .blog #content .hentry.p9 {width:330px;}
    .blog #content .hentry.p10 {width:664px;margin-right:5;}

    Note that if I restore these lines back to their defaults, I get a wider grid (the top post-grid-box is by default set to 100% and so fills 1000 pixels), but the remainder are staggered as if I am missing posts (but I’m not)

    3. I’m pretty sure that in order to get 1000 pixel posts in the single-post area, I’ll have to alter function.php or some other file. After reading thru loads of posts I’ve tried // commenting out the ‘$_GLOBALS[content_width] = 494’; line in function.php but that didn’t seem to make any difference.

    So, 3 problems.
    1. 1000 pixel width isn’t working
    2. Blog-grid isn’t aligned properly, and
    3. Pictures on single-post page are not 1000pixels, and

    If anyone has had similar issues and could advise that would be great. I’m losing the will to live ??

    Blog is at https://www.hopkinsphotography.co.uk/index.php/blog-2/

    Thanks, Dave.

    Dave posted this 3 months ago and he has changed his theme. So I guess he hasn’t solved the problem.
    Now I’m experiencing the exactly same things described.

    I see that the full sized image in my Media Gallery is 1000×600 but still it displays as 800px wide inside the post and in the front page.
    I also see (with firebug) that it’s because of an inline settings (not in any css) that says:

    <img class="attachment-single-post-thumbnail wp-post-image" width="800" height="400" title="horses" alt="horses" src="https://domain/theme/wp-content/uploads/2011/04/horses-800x400.jpg" style="display: inline;">

    What code decide that the image I uploaded has to be resized and renamed in “name-800×400”? Where to find it?

    Thanks in advance, if someone will find a minute to reply ??
    Alice

    Thread Starter djhopps

    (@djhopps)

    Hi there – I havent’ actually changed my theme, I’ve just modified it. I managed to fix the alignment problems by starting from scratch and playing around with the width of the individual columns for the grid (the .hentry sections). Try reducing them down to 300, 300, 300 (so you have 3 entries followed by a gap of 100 pixels), then increase them incrementally until they fit Ok. It’s a bit weird as they SHOULD add up to 1000 pixels. Mine didn’t!

    Hi, I am about to change my site width to 1000px.

    When I will finish I will post here the changes.

    I had changed css file and going to look into function files. Didn’t tested yet.

    Those who has trouble with the changes:

    1. double check css file
    2. check function file
    3. try to regenerate thumbnails

    Tested now.

    I am using Autofocus +
    In style.css file I changed all 800 to 1000, navigation above changed to 1200px. Front page: you have total width of site 1000px then you divide it into sections,according to your idea. Keep in mind to deduct 4 px for space between images. For example 1000 divided into 2 sections – First section is 616px second section is 380px.

    In functions.php changed all 800 to 1000, keeping in mind desired ratio.
    For example $width=1000, $height=800,

    Then I deactivated the theme and reactivated.

    Now I add post with image 1000px wide and it is fine

    Hi,
    I am also trying to change my site to 1000px wide.
    I have followed your instructions Axel Ya, and now I have a sticky post as my main image which is showing correctly at 1000px wide, but nothing else seams to have changed.
    I am a bit lost and hoping you may be able to shed some light on the problem for me ??
    The website I am playing around with is https://www.websitesonline.co.nz/wordpress

    Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Can't resize Autofocus Pro page/blog width’ is closed to new replies.