Return to Support

Floating featured image to left in Archive Page, title and summary to the right

Home Forums Graphene WordPress theme Support Floating featured image to left in Archive Page, title and summary to the right

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #8714

    Is there a way of floating featured image to left in Archive Page, title and a limited summary to the right.

    Like seen here: `link

    #41937
    Luko
    Member

    With CSS only, hardly.

    You have to create new archive template call it loop-archive.php and save it in child-theme folder.

    Mail me to: luko.delponte@gmail.com if you need more info…

    #41938
    Prasanna SP
    Member

    Not using Graphene?

    #41939
    Luko
    Member

    Hy,

    He is using Graphene, link was to describe what he wants his layout to look like.

    Anyway, he has to override the main loop.php with loop-archive.php or(and) with loop-category.php in child-theme, and modify the loop.php code to achieve the wanted layout.

    Maybe this is possible with css only but I don’t know how.

    #41940
    Prasanna SP
    Member
    Quote:
    He is using Graphene, link was to describe what he wants his layout to look like.

    My bad!

    #41941
    Prasanna SP
    Member

    Try this,

    .archive .post .excerpt-thumb {
    float: left;
    }
    .archive .post .entry-content p {
    float: right;
    }
    .archive .post .entry-title {
    text-align: right;
    }

    #41942

    hi, Prasanna and Luko,

    For Luko’s kind help I am at a standstill Bell Canada has been hacked so I have no access to my FTP, but the last code made it almost work but now the image is above the text and the spacing is very too large, how can i adjust so it lines up to tight the right of the image.

    `link to my site

    #41943
    Luko
    Member

    Maybe:

    .archive .post .excerpt-thumb {
    float: left;
    position:absolute;
    top:15px;
    }
    .archive .post .entry-content p {
    float: right;
    margin-left:160px
    }

    My first response was a little overkill :). Prasanna’s code is far better.

    #41944

    Thank you so much Luko and Prasanna! This is very close to perfect, I trimmed it up with adjusting.

    .archive .post .entry-title {
    text-align: left;
    margin-left:160px
    }
    .archive .post .excerpt-thumb {
    float: left;
    position:absolute;
    top:1px;
    }
    .archive .post .entry-content p {
    float: right;
    margin-left:160px
    }

    Can the title be brought tighter to the excerpt?

    Thanks so much – j

    #41945
    Luko
    Member

    Something like:

    .archive .post .entry-title {
    margin-top:5px;
    }
    .archive .post .entry-content p {
    margin-top:5px;
    }

    ?

    #41946

    Thank you so much! Consider this closed.

    Cheers!

    j

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.