[Dzonny]

Heya there,

I would like to made a bit bigger change in the way how blogs are displayed using blog block. I would like it to be shown like in the attached picture, and I managed to write html/css code for it, with hover effect and all, but now the tricky part is how to apply that on actual blog block. I'm currently using just html block with the code written down and would like it to be just blog block without having to manually change links and all for every specific blog entry.

html:

Code Select Expand


<Div class="Blog">
  <H1><A class="Blog" href="#" style="text-decoration:none;">Latest Blogs</A></H1><br />
    <Table class="BlogEntries" cellpadding="0" cellspacing="3px">
      <Tr>
        <Td style="background:;" id="blog1">
          <Div class="EntryDesc">
            <h3>He's leaving on that midnight train to Georgia.</h3>
            <p>Said he's going back to find a simpler place and time.
          </Div>
        </Td>
        <Td style="background:;" id="blog2">
          <Div class="EntryDesc">
            <h3>What is the airspeed velocity of an unladen swallow</h3>
            <p>African or European?
          </Div>
        </Td>
        <Td style="background:;" id="blog3">
          <Div class="EntryDesc">
            <h3>The tableau vivante</h3>
            <p>Is not only a welcomed, but expected entertainment at any garden party.
          </Div>
        </Td>
      </Tr>
      <Tr>
        <Td style="background:;" id="blog4">
          <Div class="EntryDesc">
            <h3>Stairmaggedon</h3>
            <p><i>"It will be an inconvenience."</i>
          </Div>
        </Td>
        <Td style="background:;" id="blog5">
          <Div class="EntryDesc">
            <h3>She can't be dead.</h3>
            <p>Misery Chastain can not be dead!
          </Div>
        </Td>
        <Td style="background:;" id="blog6">
          <Div class="EntryDesc">
            <h3>You remind me of a man from my village.</h3>
            <p>One winter, it got so cold, we had to feed him to the wolves.
          </Div>
        </Td>
      </Tr>
      <Tr>
        </Td>
        <Td style="background:;" id="blog7">
          <Div class="EntryDesc">
            <h3>AHS: Coven</h3>
            <p>"This is seriously the worst field trip ever.""
          </Div>
        <Td style="background:;" id="blog8">
          <Div class="EntryDesc">
            <h3>Shake It Out</h3>
            <p>I like to keep some things to myself. I like to keep my issues drawn.
          </Div>
        </Td>
        <Td style="background:;" id="blog9">
          <Div class="EntryDesc">
            <h3>Cough Syrup</h3>
            <p>The zombies in the park, they're looking for my heart.
          </Div>
        </Td>
      </Tr>
    </Table>
</Div>


CSS:

Code Select Expand


Div.Blog { width:1000px; padding-top: 0px; padding-bottom: 10px; border-bottom: 8px solid #BCDA2E; font-size: 10px; text-align: left; }
  Table.BlogEntries Tr Td { height: 250px; width: 332px; border-radius: 8px; padding-left: 20px; }
  Table.BlogEntries Tr Td { background: url('images/blog-y.png') center center; }
  #blog1 { background: url('images/blog/1.png') center center;}
  #blog2 { background: url('images/blog/2.png') center center;}
  #blog3 { background: url('images/blog/3.png') center center;}
  #blog4 { background: url('images/blog/4.png') center center;}
  #blog5 { background: url('images/blog/5.png') center center;}
  #blog6 { background: url('images/blog/6.png') center center;}
  #blog7 { background: url('images/blog/7.png') center center;}
  #blog8 { background: url('images/blog/8.png') center center;}
  #blog9 { background: url('images/blog/9.png') center center;}
  Table.BlogEntries Tr Td:hover, #blog1:hover, #blog2:hover, #blog3:hover, #blog4:hover, #blog5:hover, #blog6:hover, #blog7:hover, #blog8:hover, #blog9:hover { background: url('images/blog-c.png') center center; cursor: pointer; }
  Div.EntryDesc { position: relative; float: right; right:0px; bottom:0px; z-index: 5; height: 152px; width: 215px; background: #EBEBEB; margin-top:98px;}

Now, the biggest problem is how to poll that image out of the blog post, or it would be okay if I can manually add specific image for each of those. I would need help with this part though. As I already saw few members requesting similar function it would be great if we can make something and publish it as mod/tip-trick so others can use it as well.

As an alternative to blog maybe articles system can be used or anything, just to display specific content on portal designed like in attached file.

Any help would be appreciated.