Autofocus theme modification issues (23 posts)

  1. taunot
    Posted 6 years ago #


    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 featured.post count from 10 to seven in style.css but it does not seem to have a effect:

    .home .featured.post.p1 {border-bottom:5px solid #FFF;width:765px;}
    .home .featured.post.p1 .post-content{width:760px;}
    .home .featured.post.p2 {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:380px;}
    .home .featured.post.p2 .post-content{width:375px;}
    .home .featured.post.p3 {border-bottom:5px solid #FFF;width:380px;}
    .home .featured.post.p3 .post-content{width:375px;}
    .home .featured.post.p4 {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:380px;}
    .home .featured.post.p4 .post-content{width:375px;}
    .home .featured.post.p5 {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:380px;}
    .home .featured.post.p5 .post-content{width:375px;}
    .home .featured.post.p6 {border-bottom:5px solid #FFF;width:380px;}
    .home .featured.post.p6 .post-content{width:375px;}
    .home .featured.post.p7 {border-left:5px solid #FFF;border-bottom:5px solid #FFF;width:765px;}
    .home .featured.post.p7 .post-content{width:760px;}

    If it is any help, I have figured that benjacobsen has managed to solve that problem: http://www.benjacobsen.com/

    Thank you!

  2. AxelYa
    Posted 6 years ago #

    The number of posts on the front page could be changed in admin settings panel.

  3. taunot
    Posted 6 years ago #

    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;}


  4. AxelYa
    Posted 6 years ago #

    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

  5. taunot
    Posted 6 years ago #

    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.

  6. AxelYa
    Posted 6 years ago #

    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

  7. jess_b
    Posted 6 years ago #

    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!

  8. AxelYa
    Posted 6 years ago #

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

  9. jess_b
    Posted 6 years ago #

    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.

  10. taunot
    Posted 6 years ago #

    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?

  11. AxelYa
    Posted 6 years ago #

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

  12. taunot
    Posted 6 years ago #

    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!

  13. arche-g
    Posted 6 years ago #

    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?



  14. AxelYa
    Posted 6 years ago #

    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.

  15. taunot
    Posted 6 years ago #

    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.

  16. AxelYa
    Posted 6 years ago #

    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.

  17. AxelYa
    Posted 6 years ago #

    actually if you put two slashes in front of that line in functions.php
    like this
    //$GLOBALS['content_width'] = 800;
    it makes this piece of code non functional and it gives you the result you want. If you don't see any other trouble you can do that too.

  18. arche-g
    Posted 6 years ago #

    thank you AxelYa! is there a way to choose spacing for each one or is it a universal setting?

    taunot, i like your use of autofocus. it looks really nice. the homepage blocking looks great.

    AxelYa & Taunot,
    1. is there a way to order (or randomize) the homepage posts? alan has a lot of drawings and they look funny when there is a full page of drawings. i love how the color images look beside one another and would like to splice in drawings between the paintings.

    2. i'm looking for the easiest way to navigate to the different categories in my site. the pages in the header seem redundant for navigation. can i insert categories as navigation in the header or should i simply use "Page Post Association" or "Quick Page/Post Redirect"? i think "Archive Template" might be what i'm looking for but i'm not sure how to proceed. maybe like this:


    3. i'd like to have a blog page where people can wish alan happy birthday and simply say hello (open enrollment for posts, etc). any recommendations on how to do this on a "Blog" page?


    thank you so much!!

  19. arche-g
    Posted 6 years ago #

    ok, for question #1 is there anything easier than modifying the loop?

    for question #2 i've found a solution... lemme know what you think:

    i found that i can navigate to the categories via url. ie:

    so i used "Quick Page/Post Redirect" to fwd the page to the URL :-)
    any other suggestions?



  20. AxelYa
    Posted 6 years ago #

    If you look at the first post in this thread you will see a part of css file and there border-bottom border-left. You can style each border for each image.
    Regarding order of posts there might be a way to organize loop function in a way you want.
    Happy Birthday ! could it be just comments people leave on that page?

  21. arche-g
    Posted 6 years ago #

    ok thanks i will check the css file!

    yes it can be just comments (i'd like them to be able to post pics too). thoughts?

  22. betti_na
    Posted 6 years ago #

    Hey AxelYa & Taunot

    I think I've got the same problem that Taunot met before. My picture are wider than the container on the homapage. It's like they're totally zoomed in the box and I can't resize them...

    I tried the change the admin settings (min & max)

    I also tried to add (in functions.php) the two slashs in front of $GLOBALS['content_width'] = 800; and also the change the 800...

    And nothing works... I don't know what to do...
    I'm hosting my blog locally so I can't send you the link but I can send some codes if you need to see...

    Thank a lot in advance! Any tip would be welcome :)

  23. enfocar
    Posted 6 years ago #

    Hey everyone.

    I've been playing around with the Autofocus theme and i have 1 question. I'm trying to make the height of ONLY the first image on the homepage taller. Essentially, I want the current days post, to be at full size (450 height) and then the rest at a smaller size (300 height)

    any ideas?

    here's the test ive been doing:


Topic Closed

This topic has been closed to new replies.

About this Topic