https://layingback.net/

29 Oct '12 Mon Oct 29, 2012 23:14

layingback: Site Admin

Relocate A Block to Anywhere on the Page - and More!

Blocks are neat, but they basically appear where they want to appear, not where you necessarily want them. Not any more. With a simple mod, you can place a side block anywhere you want on the page.

UPDATE: The 2nd mod described below, affecting the entire block, also allows you to change the colour, fonts, etc, of selected blocks even if you don't move them, and also to display multiple center blocks side-by-side by setting the width to 50% (you may find 49% works better), and to have blocks of any size mixed=and=matched with the full-sized blocks.

There are 2 ways of doing this:

1. The extra div in the block contents
This is described here, but repeated below.

First create a block, make it a left (or right) block with the following contents:

Code:

<div class="tv600">A basic block with a little [b]NBBC[/b]ode to spice things up.</div>

Give it a temporary title and save the block.

Now in a suitable CSS file (specific.css if you are using reDesign3) add:

Code:

.tv600 {
	position: absolute;
	width: 240px;
	top: 10px;
	left: 400px;
	z-index: 500;
	background-color: #f8f8f8;
	border: 1px #e4e4e4 solid;
	padding: 10px;
}

Now when this block is displayed the CSS routine will drag it up to the top of the page over the header.

You can put any code or image in the block as normal, just make sure to always leave the 2 lines:

Code:

<div class="tv600">
...
</div>

as the first and last lines of the block

The plus with this approach is that no change needs to be made to the Blocks code, but the downside is that you will need to set the block's title to null/empty/nothing, else the title will be left in the block column on the left (or right).

2. Small mod to Blocks Admin and Blocks class to avoid the extra div line
The advantage of this method is that the entire block including the block title is moved, so as well as getting an optional title to use in your relocated block, nothing is left to display in the original block position, so very clean. Also as no mods are required to the actual block content code, so you can relocate any of the existing standard pre-coded blocks from File as well! And it will work with center (up) and bottom (down) blocks as well.

First the code changes to Admin
In languages/english/main.php around line 523 add:

PHP:

define('_CSSNAME','CSS Name');		// Added for CSS stylename - layingback 121029
define('_OPTIONAL','Optional - allows individual display control via CSS styles');

In includes/classes/blocks.php around line 173 with the other assign_block_vars add:

PHP:

			'S_CSSNAME' => $block['cssname'],

and in the same module around line 188 find:

PHP:

		$result = $db->sql_query('SELECT bid, bkey, title, content, url, blockfile, view, refresh, time FROM '.$prefix."_blocks WHERE active='1'$querylang AND bid IN (".implode(',',array_keys($this->blocks)).")");

and replace with:

PHP:

		$result = $db->sql_query('SELECT bid, bkey, title, content, url, blockfile, view, refresh, time, in_module as cssname FROM '.$prefix."_blocks WHERE active='1'$querylang AND bid IN (".implode(',',array_keys($this->blocks)).")");

In admin/modules/blocks.php find around line 427:

PHP:

	$insert['in_module'] = '';

and replace with:

PHP:

	$insert['in_module'] = $_POST['cssname'];

Similarly find around line 492:

PHP:

	$update['in_module'] = '';

and replace with:

PHP:

	$update['in_module'] = $_POST['cssname'];

Around line 319 find:

PHP:

	list($title, $bkey, $content, $url, $bposition, $weight, $active, $refresh, $blanguage, $blockfile, $view) = $db->sql_ufetchrow("SELECT title, bkey, content, url, bposition, weight, active, refresh, blanguage, blockfile, view FROM ".$prefix."_blocks WHERE bid='".$bid."'",SQL_NUM);

and replace with:

PHP:

	list($title, $bkey, $content, $url, $bposition, $weight, $active, $refresh, $blanguage, $blockfile, $view, $cssname) = $db->sql_ufetchrow("SELECT title, bkey, content, url, bposition, weight, active, refresh, blanguage, blockfile, view, in_module FROM ".$prefix."_blocks WHERE bid='".$bid."'",SQL_NUM);

And finally for this module around line 341 add the template variable:

PHP:

		'S_CSSNAME' => $cssname,

Then the Admin templates
Now we just need to update the Blocks Admin templates. In template/admin/blocks_edit.php add the following line just before </table> line (around line 40):

Code:

	<tr><td valign="top">_(CSSNAME):</td><td><input type="text" name="cssname" size="30" maxlength="60" value="{S_CSSNAME}" /><br /><font class="tiny"><i>_(OPTIONAL)</i></font></td></tr>

And in template/admin/blocks.html add before the <input type="submit" ... line (around line 75):

Code:

_(CSSNAME):<br /><input id="cssname" type="text" name="cssname" size="30" maxlength="60" /><br /><i>_(OPTIONAL)</i><hr />

Finally the display templates - reDesign3 first
Ok, now all that is left is to update the block display templates to add the CSS name. Again for reDesign3 in template/blocks.html find on line 2:

Code:

<div id="pe{block.S_BID}" class="block<!-- IF block.S_VISIBLE --> collapsed<!-- ENDIF -->">

and replace with:

Code:

<div id="pe{block.S_BID}" class="block<!-- IF block.S_VISIBLE --> collapsed<!-- ENDIF --> {block.S_CSSNAME}">

Note that space - it's critical.

This template file is used only to display the block content within Admin, for normal use you need to update template/header.html. Search for the line:

Code:

					<div id="pe{rightblock.S_BID}" class="block<!-- IF rightblock.S_VISIBLE --> collapsed<!-- ENDIF -->">

and replace with:

Code:

					<div id="pe{rightblock.S_BID}" class="block<!-- IF rightblock.S_VISIBLE --> collapsed<!-- ENDIF --> {rightblock.S_CSSNAME}">

and for

Code:

					<div id="pe{leftblock.S_BID}" class="block<!-- IF leftblock.S_VISIBLE --> collapsed<!-- ENDIF -->">

and replace with:

Code:

					<div id="pe{leftblock.S_BID}" class="block<!-- IF leftblock.S_VISIBLE --> collapsed<!-- ENDIF --> {leftblock.S_CSSNAME}">

and for:

Code:

						<div id="pe{centerblock.S_BID}" class="centerblock<!-- IF centerblock.S_VISIBLE --> collapsed<!-- ENDIF -->">

and replace with:

Code:

						<div id="pe{centerblock.S_BID}" class="centerblock<!-- IF centerblock.S_VISIBLE --> collapsed<!-- ENDIF --> {centerblock.S_CSSNAME}">

To also get the center down or bottom block, in template/footer.html find:

Code:

						<div id="pe{bottomblock.S_BID}" class="centerblock<!-- IF bottomblock.S_VISIBLE --> collapsed<!-- ENDIF -->">

and replace with:

Code:

						<div id="pe{bottomblock.S_BID}" class="centerblock<!-- IF bottomblock.S_VISIBLE --> collapsed<!-- ENDIF --> {bottomblock.S_CSSNAME}">

For other themes
It will depend on your theme, but look in template/block.html for a pair of lines like:

Code:

    <td class="block">
      <div id="pe{block.S_BID}" style="display:{block.S_VISIBLE};">

and add the cssname like this:

Code:

    <td class="block {block.S_CSSNAME}">
      <div id="pe{block.S_BID}" style="display:{block.S_VISIBLE};">

In template/header.html look for a line like this:

Code:

  <div class="blockcontent" id="pe{leftblock.S_BID}" {leftblock.S_VISIBLE}>

and change to:

Code:

  <div class="blockcontent {leftblock.S_CSSNAME}" id="pe{leftblock.S_BID}" {leftblock.S_VISIBLE}>

and find a line like this:

Code:

	<div class="option" id="pe{centerblock.S_BID}" {centerblock.S_VISIBLE}>

and replace with something like this:

Code:

	<div class="option {centerblock.S_CSSNAME}" id="pe{centerblock.S_BID}" {centerblock.S_VISIBLE}>

In most themes the right block columns is in the footer, so in template/footer.html look for a line like:

Code:

  <div class="blockcontent" id="pe{rightblock.S_BID}" {rightblock.S_VISIBLE}>

and replace with:

Code:

  <div class="blockcontent {rightblock.S_CSSNAME}" id="pe{rightblock.S_BID}" {rightblock.S_VISIBLE}>

and for the bottom block find code similar to this:

Code:

  <div class="option" id="pe{bottomblock.S_BID}" {bottomblock.S_VISIBLE}>

and replace with something like:

Code:

  <div class="option {bottomblock.S_CSSNAME}" id="pe{bottomblock.S_BID}" {bottomblock.S_VISIBLE}>

Back to top

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)

2.6.32 / 1.3 - 2.4 / 5.5 - 5.6 / 5.4 - 5.5 / 9.4

12 Mar '13 Tue Mar 12, 2013 05:07

alyssa: Newbie

Re: Relocate A Block to Anywhere on the Page - and More!

What if your theme does not have a "template/admin/" dir at all?

Back to top

alyssa's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)

[ Linux / Apache 2.2.8 / MySQL 5.0.45 / PHP 5.2.6 / CPG 8.2b - 9.3.4.1 ]

12 Mar '13 Tue Mar 12, 2013 05:17

layingback: Site Admin

Re: Relocate A Block to Anywhere on the Page - and More!

Perhaps it is defaulting to the one in default?

Back to top

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)

2.6.32 / 1.3 - 2.4 / 5.5 - 5.6 / 5.4 - 5.5 / 9.4

13 Mar '13 Wed Mar 13, 2013 02:52

alyssa: Newbie

Re: Relocate A Block to Anywhere on the Page - and More!

Ooooooooooooooooo good guess! Do ALL themes have to have that dir, even if it defaults to the default theme?

Could I maybe just add the admin dir from default to the other theme and then affect it?

Hmmmmmmmm ...

Back to top

alyssa's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)

[ Linux / Apache 2.2.8 / MySQL 5.0.45 / PHP 5.2.6 / CPG 8.2b - 9.3.4.1 ]

13 Mar '13 Wed Mar 13, 2013 04:08

layingback: Site Admin

Re: Relocate A Block to Anywhere on the Page - and More!

Yes and Yes.

Back to top

layingback's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)

2.6.32 / 1.3 - 2.4 / 5.5 - 5.6 / 5.4 - 5.5 / 9.4

14 Mar '13 Thu Mar 14, 2013 02:37

alyssa: Newbie

Re: Relocate A Block to Anywhere on the Page - and More!

Thank you for your patience as I work through this!

Oh yeah ... and sorry for having a lot of this discussion on DF ... I didn't realize until like halfway through it that I should be asking questions here most likely!

Another question .... when I use the Home module for an empty page to display the blocks on ... it doesn't resize the length of the page to fit the stacked blocks, how did you do that so that the page stretches past where we have set the blocks using css?

More css?

Back to top

alyssa's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)

[ Linux / Apache 2.2.8 / MySQL 5.0.45 / PHP 5.2.6 / CPG 8.2b - 9.3.4.1 ]

14 Mar '13 Thu Mar 14, 2013 03:21

alyssa: Newbie

Re: Relocate A Block to Anywhere on the Page - and More!

This is the original code for the header that I am working with:

Code:

<table class="maintable"><tr>
<!-- IF S_LEFTBLOCKS -->
  <td class="mainsidel" id="pe600" {B_L_VISIBLE}>
  <!-- BEGIN leftblock -->
  <div class="blockhead">
    <img align="right" alt="Toggle Content" title="Toggle Content" id="pic{leftblock.S_BID}" src="{leftblock.S_IMAGE}.gif" onclick="blockswitch('{leftblock.S_BID}');" style="cursor:pointer" />
    {leftblock.S_TITLE}
  </div>
  <div class="blockcontent" id="pe{leftblock.S_BID}" {leftblock.S_VISIBLE}>
      {leftblock.S_CONTENT}
  </div>
  <br/>
  <!-- END leftblock -->
  </td>
<!-- ENDIF -->
<td class="main">
<!-- IF IMPORTANT_MESSAGE -->
<center><span style="font-size: 12px; color: #FF0000">{IMPORTANT_MESSAGE}</span></center><br />
<!-- ENDIF -->
<!-- IF PAGE_TITLE -->
<div class="pagetitle">{PAGE_TITLE}</div><!-- ELSE --><div class="pagetitle">{S_HOME}</div>
<!-- ENDIF -->
<div class="table1" align="center">{S_BANNER}</div>
<!-- BEGIN messageblock -->
<div class="table1">
  <div class="option" align="center">{messageblock.S_TITLE}</div><br />
  <div class="content" >{messageblock.S_CONTENT}</div><br /><div align="center">
  <!-- IF S_CAN_ADMIN -->
  [ {messageblock.S_OUTPUT} - {messageblock.S_REMAIN} - <a href="{messageblock.U_EDITMSG}">{messageblock.S_EDIT}</a> ]
  <!-- ELSE -->
  {messageblock.S_DATE}
  <!-- ENDIF -->
  </div>
</div><br/>
<!-- END messageblock -->
<!-- BEGIN centerblock -->
<div class="table1">
  <div class="option" align="center">{centerblock.S_TITLE}</div>
  {centerblock.S_CONTENT}
</div><br />
<!-- END centerblock -->

Back to top

alyssa's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)

[ Linux / Apache 2.2.8 / MySQL 5.0.45 / PHP 5.2.6 / CPG 8.2b - 9.3.4.1 ]

14 Mar '13 Thu Mar 14, 2013 08:48

alyssa: Newbie

Re: Relocate A Block to Anywhere on the Page - and More!

I believe I got it to work! YAY!

Back to top

alyssa's server specs (Server OS / Apache / MySQL / PHP / DragonflyCMS)

[ Linux / Apache 2.2.8 / MySQL 5.0.45 / PHP 5.2.6 / CPG 8.2b - 9.3.4.1 ]

log in

Relocate A Block to Anywhere on the Page - and More!