Home › Forums › Graphene WordPress theme › Support

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

  • Anonymous

    January 30, 2014 at 2:30 am #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

    Anonymous

    January 30, 2014 at 8:13 am #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…

    Anonymous

    February 1, 2014 at 12:29 pm #41938

    Not using Graphene?

    Anonymous

    February 3, 2014 at 8:06 am #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.

    Anonymous

    February 4, 2014 at 2:19 pm #41940
    Quote:
    He is using Graphene, link was to describe what he wants his layout to look like.

    My bad!

    Anonymous

    February 4, 2014 at 2:45 pm #41941

    Try this,

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

    Anonymous

    February 5, 2014 at 3:59 am #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

    Anonymous

    February 5, 2014 at 9:47 am #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.

    Anonymous

    February 5, 2014 at 12:21 pm #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

    Anonymous

    February 5, 2014 at 2:42 pm #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)

  • 1
  • 2
  • You must be logged in to reply to this topic.