Forums

Repeatable Area Style?

Permalink
Hello,

First of all, C5 is absolutely great and I really enjoy working with it. One question though:

Let's say there's a sidebar within a HTML template and every piece of content by default gets the same styling, in this case a div with a small red border and some margin to seperate each box from eachother:

<div style="border: 1px solid red; margin-bottom: 10px;">Content</div>

Now if I create a new area like this, is there a way to wrap the contents placed in that area between the div, so no matter if I add normal contents, a survey or images, each element gets it's very own red framed box automatically?

<?php
$a = new Area('Sidebar');
$a->display($c);
?>

I already searched within the forums, some sample themes and tried to achieve it manually, but somehow didn't find a working solution so it would be great if anyone knows how to do this.

Thank you very much for your help! :-)
indiqo
 
whereb replied on at Permalink Reply
whereb
If your template php file code looks like this:

<div id="sidebar">
<?php
$a = new Area('Sidebar');
$a->display($c);
?>
</div>

Then your css could look something like:

div#sidebar div, div#sidebar ul, ... {
border: 1px solid red;
margin-bottom: 10px;
}

That may not work for some content, because the nested divs, uls, etc might be red bordered too. In that case you could try this kind of technique - in addition and after the above rules:

div#sidebar div div, ... {
border: 0px;//or whatever the normal is
margin-bottom 0px;
}

If that still fails, then use a bit jquery (it's loaded with Concrete5), like this:

$("#sidebar > *").css({border: "1px solid red", marginBottom: "10px"});

Look up jquery.com documentation if you're not sure how to start with query stuff.

Hope that works for you. You will need to examine the source rendered by your template to see what the range of immediate children of the <div id="sidebar"></di> tag are.

Thanks.
indiqo replied on at Permalink Reply
indiqo
Well first of all, thank you very much for your quick reply. You are definitely right that this works in some cases, but the div with the red border was just a very basic example and it could look even more complex with multiple, nested divs, images, etc. so this solution just works particularly and doesn't offer the amount of flexibility often required.

Do you think there's a way to directly bind some HTML code to an area?

My background is the experience with another CMS (Subdreamer in this case). It's not all that easy to use for the end user and maybe not even that flexible in the backend, but it allows to do exactly what I described already and this is really useful in my opinion, especially regarding more complex designs.

First I just tried to create a new area for each item so they can be seperated from eachother properly, but the HTML code will be displayed even when one or more areas are empty and so it's not a real solution too.
whereb replied on at Permalink Reply
whereb
>"Do you think there's a way to directly bind some HTML code to an area?"

I'm not sure what you mean by that. It might be able to be done using the jquery option - depends what you're after.

>"First I just tried to create a new area for each item so they can be seperated from eachother properly, but the HTML code will be displayed even when one or more areas are empty and so it's not a real solution too."

In my experience when an area is empty nothing comes up in the way of HTML code.

I do feel that what you're after can be done via CSS and / or jquery techniques, you just need to study the rendered source, and know your CSS selectors and rules well.

But some further clarification of the issues with complex nested divs etc. would be helpful here. I'll have a look at subdreamer.
frz replied on at Permalink Reply
frz
so yer saying a way to, from the template, pass a before&after chunk of code to put around every instance of a block that gets added to the area....?

i can see the value in that - it's a bit klunky but we're already bringing back some extended controls from the template that let you pass some values that control how many blocks and what type can be placed in an area....

can you add this prefix/suffix thing to the feature requests area?

thx
-frz
indiqo replied on at Permalink Reply
indiqo
Yes, that's basically exactly what I mean.

While having a look at all of the themes released on the marketplace so far, the format of all content areas wether seems to be advanced nor structured. In fact, most of them don't even have some kind of seperator between the contents added there. So in my opinion a prefix / suffix option would be great to add some more structure here.

The template system is really easy to far but some slightly advanced functions like this would be amazing. :-)

I'll add it to the request area if you don't mind.
frz replied on at Permalink Reply
frz
yeah please add it there, that way we wont lose track of it.

should be easy to add if its done at the right time.. good idea, thx.
whereb replied on at Permalink Reply
whereb
This is actually very easy with just a few lines of jquery using the existing templates in the marketplace, but it would definitely be better to be able to do this without touching the template code itself, making it an option that is coded within the template definition.

So in that case, I'll second your feature request if that counts!

:)
indiqo replied on at Permalink Reply
indiqo
Think so too - it would be really useful and is something I'm currently missing to style everything properly to be honest.

I already created a feature request by the way.
falbukrek replied on at Permalink Reply
Hi there,

I am fairly new to concrete5, but here is a way that might accomplish what you need:

<div>
         <?php
            $a = new Area('sidebar');
            $a->setBlockWrapperStart('<div class="redbox">');
            $a->setBlockWrapperEnd('</div>');
            $a->display($c);
         ?>
      </div>


If you add this to your template code, it will make sure to inject the BlockWrapperStart and BlockWrapperEnd html before and after each block element. You can then style the inserted div as you see fit.

Good luck!
indiqo replied on at Permalink Reply
indiqo
Hi there,

Thank you very much - I recently had a look at the API reference myself and you are right, there seems to be a new function which can handle that.

However, the code as you've written it doesn't work for me - using older versions of concrete it displays a PHP error message and using the most recent one it doesn't display the area at all anymore.

I assume there's a small typo problem somewhere in the code but can't seem to find it so any further help would be must appreciated of course!

Kindly,
Max
Remo replied on at Permalink Reply
Remo
this code works fine with the latest version. Not with the first public c5 version since it's newer..

I also can't find any typos there.

What does the error log tell you?
falbukrek replied on at Permalink Reply
I discovered that using both setBlockWrapperBegin and setBlockWrapperEnd in this manner breaks the arrange functionality for that area. I think this is a bug, but I would welcome other opinions.

You can see a related thread on this athttp://www.concrete5.org/community/features/keep_setcustomtemplate_...
kino replied on at Permalink Reply
kino
http://c5.tktools.jp/index.php/download_file/-/296/

already use this.

concrete/librares/block_view.php
copy to
librares/block_view.php
and change 
if (!isset($template)) {
            $base = $this->getBlockPath($_filename);
            $template = $base . '/' . $_filename;
         }
         if (isset($header)) {
            include($header);
         }
         if ($template) {
            include($template);
         }
         if (isset($footer)) {
            include($footer);
         }


to

if (!isset($template)) {
            $base = $this->getBlockPath($_filename);
            $template = $base . '/' . $_filename;
         }
         $txt = Loader::helper('text');
         $arHandle =$txt->sanitizeFileSystem($this->area->arHandle);
         $v = View::getInstance();
         if (file_exists($v->getThemeDirectory() . '/' . DIRNAME_BLOCK_TEMPLATES . "/{$arHandle}_block_header.php")) {
            $header1 = $v->getThemeDirectory() . '/' . DIRNAME_BLOCK_TEMPLATES . "/{$arHandle}_block_header.php";
         } elseif (file_exists($v->getThemeDirectory() . '/' . DIRNAME_BLOCK_TEMPLATES . '/block_header.php')){
            $header1 = $v->getThemeDirectory() . '/' . DIRNAME_BLOCK_TEMPLATES . '/block_header.php';
         }
         if (file_exists($v->getThemeDirectory() . '/' . DIRNAME_BLOCK_TEMPLATES . "/{$arHandle}_block_footer.php")) {
            $footer1 = $v->getThemeDirectory() . '/' . DIRNAME_BLOCK_TEMPLATES . "/{$arHandle}_block_footer.php";
         } elseif (file_exists($v->getThemeDirectory() . '/' . DIRNAME_BLOCK_TEMPLATES . '/block_footer.php')){
Viewing 15 lines of 32 lines. View entire code block.
indiqo replied on at Permalink Reply
indiqo
Sorry, I recently installed the most recent version on my local development environment once again and it really worked perfectly fine immediately.

Thank you very much for all your help - for me this is really a huge step forward because it adds a lot more flexibility to the way each module position can be styled in advance!

Max
synlag replied on at Permalink Reply
synlag
thanks kino, works fine.

an area option when in edit mode and clicking on it would be nice.

rn