SimplePortal

Customization => Custom Coding => Topic started by: ncoded on December 26, 2013, 08:58:44 PM

Title: custom HTML blocks: how to align horizontally
Post by: ncoded on December 26, 2013, 08:58:44 PM

I would like to display several custom html blocks on the portal page in such a way that I can fit two, perhaps three alongside (instead of a vertical flow, which is the default).

So far, by styling the body, I managed to shrink one to 250px - but was unable to shorten the title bar as well. I am also quite unsure about the alignment stuff: do I need to contain each block in a wrapper and float it? if so, how? where does the code go?

Also: I am not sure that defining a <style> in the html writeup is the best approach. I'd much rather build a stand-alone CSS file and reference it - but how? :) Where does the link line go?

Hopefully someone can point me in the right direction.

Title: Re: custom HTML blocks: how to align horizontally
Post by: Mladen on December 26, 2013, 11:49:28 PM

Hi ncoded,
Is this what you you would like to achieve, but then with less blocks (see attachment). In my case I have one PHP and 6 HTML blocks.
If I understood you incorrectly then I apologise for my ignorance  :-[

Title: Re: custom HTML blocks: how to align horizontally
Post by: ncoded on December 27, 2013, 08:23:12 AM

Yes, that would be it! The 6 html blocks are tucked inside the one php block, right? Wonder how.

Title: Re: custom HTML blocks: how to align horizontally
Post by: Mladen on December 27, 2013, 11:55:53 AM

Please read Blocks In Blocks (http://simpleportal.net/index.php?topic=5332.0) topic and I am sure you will get valuable information.

My Footer blocks look like this (see attachment)

and the PHP script is like this...

+++++++++++++++++++++++++++++++++

$columns = 6;
$block_ids = array(23, 19, 26, 25, 20, 24);

$block_data = array();
foreach ($block_ids as $block)
{
   $block_data[$block] = current(getBlockInfo(false, $block, false, false));
   $block_data[$block]['style'] = sportal_parse_style('explode', $block_data[$block]['style'], true);
}

echo '
<table style="width: 100%;">
   <tr>';

$counter = 0;
foreach ($block_data as $data)
{
   if ($counter != 0 && $counter % $columns == 0)
   {
      echo '
   </tr>
   <tr>';
   }

   echo '
      <td style="width: ', ceil((100 / $columns)), '%; vertical-align: top;">
         ', template_block($data), '
      </td>';

   $counter++;
}

echo '
   </tr>
</table>';

+++++++++++++++++++++++++++++++++

if you need more info please let me know.

Title: Re: custom HTML blocks: how to align horizontally
Post by: ncoded on December 27, 2013, 08:25:18 PM

Great! And thanks! I will comb your code 'till I fully get it and then apply it to my slightly custom theme. I am sure to come back here with details.

Title: Re: custom HTML blocks: how to align horizontally
Post by: Mladen on December 27, 2013, 11:54:48 PM

I am attaching an example of the simple HTML code for my HTML block.
Note that all HML blocks are NOT-active; only PHP is an active block
++++++++++++++++++++++++++++++++++++

<a href="http://www.476vfightergroup.com/content.php" target="_blank"><b>476th vFG</b></a><br/>
<a href="http://forums.eagle.ru/" target="_blank"><b>DCS Forum</b></a><br/>
<a href="http://www.virtual-jabog32.de/index.php?section=news&lang=en" target="_blank"><b>vJaBoG32</b></a><br/>
<a href="http://www.simhq.com/" target="_blank"><b>SimHQ</b></a><br/>
<br/>
<br/>

++++++++++++++++++++++++++++++++++++

I wish you success with your coding and I am sure you will get on the end a good result.  :thumbsup: