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

  • SpaceCatMedia

    #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

    Luko

    #41937

    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…

    Prasanna SP

    #41938

    Not using Graphene?

    Luko

    #41939

    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.

    Prasanna SP

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

    My bad!

    Prasanna SP

    #41941

    Try this,

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

    SpaceCatMedia

    #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

    Luko

    #41943

    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.

    SpaceCatMedia

    #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

    Luko

    #41945

    Something like:

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

    ?

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

You must be logged in to reply to this topic.