Blog in my forum in several columns

[Ysamar]

Hi. I would want to set the blog in my forum in several columns like on this picture:

Spoiler:

My forum is phpbb3
I am Administrator
My code until now:

Spoiler:

topics_blog_box

Spoiler:

Thank you in advance!

[Ysamar]

up

[10spetter10]

Hi,

I have tried something that seems to work on my test forum, but I couldn't compare it with yours because it seems to be in a locked state. So there are probably some errors with the css.

Code:

 <!-- BEGIN topics_blog_box -->
    <!-- BEGIN row -->
    <!-- BEGIN header_table -->
        <!-- BEGIN multi_selection -->
          <script type="text/javascript">          function check_uncheck_main_{topics_blog_box.row.header_table.BOX_ID}() {
              var all_checked = true;
              for (i = 0; (i < document.{topics_blog_box.FORMNAME}.elements.length) && all_checked; i++) {
              if (document.{topics_blog_box.FORMNAME}.elements[i].name == '{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.header_table.BOX_ID}') {
                all_checked = document.{topics_blog_box.FORMNAME}.elements[i].checked;
              }
              }
              document.{topics_blog_box.FORMNAME}.all_mark_{topics_blog_box.row.header_table.BOX_ID}.checked = all_checked;
          }
          function check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}() {
              for (i = 0; i < document.{topics_blog_box.FORMNAME}.length; i++) {
              if (document.{topics_blog_box.FORMNAME}.elements[i].name == '{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.header_table.BOX_ID}') {
                document.{topics_blog_box.FORMNAME}.elements[i].checked = document.{topics_blog_box.FORMNAME}.all_mark_{topics_blog_box.row.header_table.BOX_ID}.checked;
              }
              }
          }
          </script>        <!-- END multi_selection -->
 
      <div class="main-head">          <!-- BEGIN multi_selection -->
          <input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" />          <!-- END multi_selection -->
          <h1 class="page-title">{topics_blog_box.row.L_TITLE} [{topics_blog_box.row.COUNT_TOTAL_TOPICS}]</h1>        </div>        <div class="main-content">        <table cellspacing="0" class="table">          <tbody class="statused">    <!-- END header_table -->
 
 
    <!-- BEGIN header_row -->
    <strong>{topics_blog_box.row.L_TITLE}</strong>    <!-- END header_row -->
 
 
    <!-- BEGIN topic -->
        <!-- BEGIN table_sticky -->
          </tbody>        </table>        </div>
 
      <div class="main-head">          <!-- BEGIN multi_selection -->
          <input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" /  >
          <!-- END multi_selection -->
          <h2>{topics_blog_box.row.topic.table_sticky.L_TITLE} [{topics_blog_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>        </div>        <div class="main-content"><div id="blog_cont">        <table cellspacing="0" class="table">          <tbody class="statused">        <!-- END table_sticky -->
<div class="blog_area">
   <div class="blog_message">{topics_blog_box.row.FIRST_POST_TEXT}</div>
   <div class="blog_info">
      <div class="blog_title">
         <h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_blog_box.row.U_VIEW_TOPIC}">{topics_blog_box.row.TOPIC_TITLE}</a></h2> 
         <!-- BEGIN switch_description -->
            <span class="genmed"><br />{topics_blog_box.row.topic.switch_description.TOPIC_DESCRIPTION}</span>
         <!-- END switch_description -->
      </div>
      <div class="blog_comments">
         <span class="gensmall">
            {topics_blog_box.row.L_BY} <strong>{topics_blog_box.row.TOPIC_AUTHOR}</strong> -
            ({topics_blog_box.row.FIRST_POST_DMY_VALUE0}/
            {topics_blog_box.row.FIRST_POST_DMY_VALUE1}/
            {topics_blog_box.row.FIRST_POST_DMY_VALUE2})<br />
            <a href="{topics_blog_box.row.U_VIEW_TOPIC}#comments">{L_COMMENTS}</a>: {topics_blog_box.row.REPLIES} -
            {L_VIEWS}: {topics_blog_box.row.VIEWS}
         </span>
      </div>
   </div>
   <!-- BEGIN single_selection -->
      <input type="radio" name="{topics_blog_box.FIELDNAME}" value="{topics_blog_box.row.FID}" {topics_blog_box.row.L_SELECT} />
   <!-- END single_selection -->
   <!-- BEGIN multi_selection -->
      <input onclick="javascript:check_uncheck_main_{topics_blog_box.row.BOX_ID}();" type="checkbox" name="{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.BOX_ID}" value="{topics_blog_box.row.FID}" {topics_blog_box.row.L_SELECT} />
   <!-- END multi_selection -->
</div>
        <!-- END topic -->
    <!-- BEGIN no_topics -->
    <tr>        <td class="tcl" colspan="4"><strong>{topics_blog_box.row.L_NO_TOPICS}</strong></td>    </tr>    <!-- END no_topics -->
 
 
    <!-- BEGIN bottom -->
          </tbody>        </table>        </div></div>        <div class="main-foot clearfix">          <!-- BEGIN multi_selection -->
          <input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" />          <!-- END multi_selection -->
          <p class="h2">{L_TOPICS} [{topics_blog_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>          <p class="options">              <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a> {S_WATCH_FORUM} <a href="#top">{L_BACK_TO_TOP}</a>          </p>        </div>    <!-- END bottom -->
    <!-- BEGIN spacer --><br /><!-- END spacer -->
    <!-- END row -->
    <!-- END topics_blog_box -->
 
 
    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">    //<![CDATA[
    $(resize_images({ 'selector' : '.blog_message', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>    <!-- END switch_image_resize -->
 
 
    <style>    @charset "utf-8";.blog_message table, .blog_message div, .blog_message hr, .blog_message br,
    .blog_message {font-size: 12px;height: 300px;width: 200px;overflow:scroll;font-family: arial;background:#fff;font-size: 12px;font-family: arial;margin-left: 0px;}
    .blog_message img {width: 200px;height: 300px;background: #000;border: 1px solid #fff; }
 
    </style>

css:

Code:

.blog_area, .blog_comments {
  width: 200px;
  text-align: center;
  display: inline-block;
  margin: 3px 10px;
}

[Ysamar]

Hi, thank you so much for the help! You're a genius, the first and only one who has been able to help me. And yeah, it worked! But, now I have a little problem... Well, I applied it on two forums, and it corrupted the configuration on both. On one the footer gets on top. And on the other one, the wrap's background is removed. You can access to the forum, and in this topic you can see an example: http://tiempoentrelibros.foroactivo.com/f7-na

[10spetter10]

Try this line of css:

Code:

#content-container div#container {
  float: none !important;
}

Floating elements are always a pain in the *ss.

[Ysamar]

Yeah, they are always a F*** headache.

Well, thanks! It worked with the color. But I still has the issues with the wrap and the footer.

Here are the codes, maybe there is something wrong.

Wrap:

Footer:

[10spetter10]

I don't think I get what you are saying.

The footer seems to be on the bottom of your forum and I don't see something that really stand out in you wrap.

[Ysamar]

Sorry, here is a screenshot showing what is wrong:

Spoiler:

[10spetter10]

Try this:

Code:

#wrap {
  background: #ebd2cf !important;
  margin: -60px auto !important;
  padding-bottom: 70px !important;
  width: 1350px !important;
  box-shadow: #0A0A0A 0 0 200px 20px;
}
#page-footer {
  margin: 0 auto;
  width: 1350px;
  text-align: center;
}

This is a quick solution, probably not the best one but I think it will fix your problem.

[Ysamar]

Oh, thank you so much. That resolve the issue!!! You saved my day!

[SLGray]

Topic solved and archived