Support » Themes and Templates » Autofocus theme modification issues

  • Hi!

    By default the front page of a autofocus theme has 10 links in Home section. I changed the placement and I would like to have 7 links instead of 10 links:

    I did reduce the count from 10 to seven in style.css but it does not seem to have a effect:

    .home {border-bottom:5px solid #FFF;width:765px;}
    .home .post-content{width:760px;}
    .home {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:380px;}
    .home .post-content{width:375px;}
    .home {border-bottom:5px solid #FFF;width:380px;}
    .home .post-content{width:375px;}
    .home {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:380px;}
    .home .post-content{width:375px;}
    .home {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:380px;}
    .home .post-content{width:375px;}
    .home {border-bottom:5px solid #FFF;width:380px;}
    .home .post-content{width:375px;}
    .home {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:765px;}
    .home .post-content{width:760px;}

    If it is any help, I have figured that benjacobsen has managed to solve that problem:

    Thank you!

Viewing 15 replies - 1 through 15 (of 22 total)
  • The number of posts on the front page could be changed in admin settings panel.

    Thank you, that was easier than I thought 🙂

    But now I have issue with the side arrows. I changed the with of my template to 1150px. Left arrow works and is fine. But right arrow has become non functional:

    I figured that the section which is dealing with the arrows should be that code but I am unable to understand the logic behind this(old template was 800px wide):

    .home #container #nav-above .nav-previous {position:absolute;display:block;width:100px;top:50%;left:-100px;text-align:right;line-height:4em;font-size:5em;}
    .home #container #nav-above .nav-next {position:absolute;display:block;width:100px;top:50%;right:-900px;text-align:left;line-height:4em;font-size:5em;}


    in this template classes added to different section of it.
    class home added to home page, class single – to single post page and so on.
    then in style.css you can see code
    .home #container #nav-above .nav-previous

    which makes it for home page only. For individual post page look for line started with .single

    Regarding the arrow – it is functional if scroll down a bit then it is works. I guess it is just overlapped by container

    Thank you, that made it to work!

    Now I am wondering if it is possible to center pictures what are not as wide as full allowed area.

    in your style.css find line
    img,img.alignnone{clear:both;float:none;display:block;margin:0 0 1em 0}

    and change to
    img,img.alignnone{clear:both;float:none;display:block;margin:0 auto 1em}

    not fully tested but should work

    1. How to change the font-color and type for the White links that are overlayed on the image grid on the home-page?
    2. Also can the color that appears on hover on the images be different from the color of the global menu items?

    Thanks much!

    ok here is the problem : when you center picture which is smaller then the container, the photo-credit part doesnt move with picture.

    P.S: I tried adding:

    #header h1 a{color:#000;}
    #menu a {color:#000;}
    h2.entry-title {color:#000;}

    To the bottom of styles.css but while it effected the headings on the sub-pages, it did not impact either the menu items or the link text overlayed on the images on the home page.

    Thanks everyone for your input!

    I’ve managed to resolve most of my problems. But now when it seemed to me that everything is ok I encountered a major problem.
    As I post larger pictures they get resized back to 800px in with. Before if I posted wider pictures they just ran over the sides, now they get resized. style.css has no trace about 800px anymore. Couple of people have confirmed this that it is not caused by style.css.
    My new with is 1150px. If I upload the picture to media, it shows 1150 as with, if I view the picture settings it shows as 1150. If I add it into post and view it in visual post creation mode, it shows as 1150. But once I publish the post it shows in 800px, once I vew the picture through autofocus template it shows in 800px.
    I figured the only way to get things to work is right now adding a picture to post, manually adding the fields and content of image_url and image_tag. Then it works. But if I allow template to create and fill the image_tag and image_url itself, result is a resized image to 800px in post :/

    Any ideas?

    it is in function.php
    there quite a lot of code which is dealing with images.

    After some searching I found the functions.php. Inside of it looks scary to me. Could you please hint more specifically which part has to be changed?

    Thank you!

    hi there,
    thanks for the posts on images. does anyone know how to align the images differently on the homepage? when the images auto load, they show up exactly centered (i think) and this causes them to be framed oddly. can i choose how the images look or modify the css so the framing looks better?


    taunot sorry for misleading you, I wasn’t focused
    Check in your admin panel settings – media – image size ( large )
    it should have max width max height : your image size
    and see if it sorts the problem.

    arche-g in your home.php find code
    <span class="attach-post-image" style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center no-repeat">&nbsp;</span>

    center center is what you need. Learn about css property for background image as there quite a lot of ways to align it differently.
    top left right bottom center or even in % 50% 20% etc. Just remember – you use two values – value for vertical axis and value for horizontal axis.

    AxelYa, that’s exactly the problem, it does not solve the problem. I have the Media settings set same or larger than my pictures. But it still resizes them to 800px.

    So I did some test.
    I changed settings to 1200 x 1200 ( in admin panel )
    I uploaded photo size of 1200 x 900
    created post and attached image to it. OK
    When I view the post – the image is 800 x 600 . Good

    Now Changes. In single.php you can find line of code.
    <?php the_post_image(‘large’); ?>

    in functions.php you can find a line of code.
    $GLOBALS[‘content_width’] = 800;

    Now. If I change the number 800 to 1200 – I get bigger image in my post.
    so this number in functions,php responsible for image size.

    If I don’t change the number in functions.php , but go to single.php and erase the word large in that line
    like this <?php the_post_image(”); ?> – I get bigger image in my post

    So I can do it in two ways. Which way is correct I am not sure.

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Autofocus theme modification issues’ is closed to new replies.