Adding div tag to sections

[mikejd]

To enable me to target sections of a page with css I would like to add a div tag with a class attribute around each section which is added to a page. If this makes sense, can someone tell me which file I need to modify which controls the display of sections on a page.

To be clearer, when I add, say, a news section to a page I would like it to be surrounded by <div class="block1"></div> tags. Similarly for a gallery section or events section, etc. I am assuming I can add this into the php code which displays the page.

cheers,
Mike

[Ruud]

The way WB is designed to handle this is by using multiple blocks.

http://www.websitebaker2.org/en/help/designer-guide/content-blocks.php

[mikejd]

Ruud - I understand how to add multiple blocks to the page but what I want to do is contain each block in a div tag on the page eg

<div class="block1">
      wysiwyg section
</div>

<div class="block1">
      news section
</div>

This would allow me to style each block with css. I could write this into the 'news' and 'gallery' sections in the respective 'Settings' but this is not available for the 'wysiwyg' section,I think, unless I can somehow write it into the php which adds this section. So I would like to know which file is responsible for adding sections to a page and can I insert some code to add the div tags.

I hope that is clearer.

cheers,
Mike

[pieterb]

You can simply add your <div class="whatever"> and </div> to your wysiwyg section by using the code button in your wysiwyg editor. But why would you want to do it? I always put the div with a certain id in the template and put the page_content() in that div.

[mikejd]

Yes, I can add the div tags in the wysiwyg section but my client doesn't know HTML and the editors won't be able to. So I need it to be added automatically when adding a new section. This needs to be foolproof so that editors can't change it.

Each section is styled to display as a block with a border and background so I need to add the class. You can see an example at www.thegordonschool sfpa.co.uk/wb/pages/news.php. This shows a wysiwyg section and a news section.

Mike

[DarkViper]

you can reach that by modifying the file /framework/frontend.functions.php

Code: (between lines 261/272)

<?php
                // check if module exists - feature: write in errorlog
if(file_exists(WB_PATH.'/modules/'.$module.'/view.php')) {
// fetch content -- this is where to place possible output-filters (before highlighting)
ob_start(); // fetch original content
require(WB_PATH.'/modules/'.$module.'/view.php');
$content = ob_get_contents();
ob_end_clean();
} else {
continue;
}
// highlights searchresults
?>

Code: (new code)

<?php
                // check if module exists - feature: write in errorlog
if(file_exists(WB_PATH.'/modules/'.$module.'/view.php')) {
// fetch content -- this is where to place possible output-filters (before highlighting)
ob_start(); // fetch original content
echo '<div class="block1">';
require(WB_PATH.'/modules/'.$module.'/view.php');
echo '</div>';
$content = ob_get_contents();
ob_end_clean();
} else {
continue;
}
// highlights searchresults
?>

Take care, this is not a official core-modification! To use on your own risk only! Without support by the DEV-Team!!
The modification will be lost after a update/upgrade!!

[pieterb]

Then take a look at the view.php file in modules/wysiwyg. put your div around the echo $content; like so:

Code:

echo "<div id=\"test\">";
echo $content;
echo "</div>";

I've just tested it and this works fine.

[mikejd]

Many thanks pieterb and DarkViper. I will try your suggestions. It will have to wait until tomorrow now.

cheers,
Mike

[Ruud]

You are all thinking way too difficult..
The WB style is:
in your template (using blocks) just do:

<div class="block1">
  <?php page_content(1); ?>
</div>
<div class="block2">
  <?php page_content(2); ?>
</div>
<div class="block3">
  <?php page_content(3); ?>
</div>

This is what blocks are for..

[DarkViper]

no ruud... it does not work with blocks..
he wants each section encapsulated in a div.
Independed from the number of sections on each side.. it can be one section or 20 also.
Also the div must be auto - inserted .. without any additional settings by the authors and  without a limitation by the template. In addition 'Blocks' must be available in normal manner.

[mikejd]

Just to complete this thread:

I have tried both suggestions and settled on DarkViper's. Pieterb's idea worked but I would have to implement it in the view.php file for each module. DarkViper's method works for all sections added. I think this might be a useful modification for the core files as it might assist with css styling by providing a hook for css rules.

Thanks to all for their assistance

cheers,
Mike

[DarkViper]

Code:

<?php
echo "<div id=\"test\">";    // <<< replace ID by CLASS for multiple use
echo $content;
echo "</div>";
?>

I would like to give a small tip for the solution from pieterb:
 
It works perfectly exclusively for WYSIWYG segments. However, a HTML-validity error is generated by use of several WYSIWYG segments.
 
Remember: It is compelling, that the ID of a HTML-Mark  is unique in the whole document.

[pieterb]

You're right. I forgot there were more. But if you use class then it's fine.