Forums

if edit area is Main? style.

Permalink 1 user found helpful
Hi, Ok an unusual request, I want to style a block template, i could use custom views but i want a more automated solution.

Basically if a block is in the Main area it should be styled in one way, if it is in the Sidebar area it should be styles in another, now this can mostly be achieved using CSS but there are a couple of declarations I need that I don't want in the other version.

So basically i want something that says:

<?php  if ($page->contentArea('Main')) {  ?>
         <div class="one"></div>
 <?php  } else {  ?>
         <div class="two"></div> 
 <?php  } ?>


Is this possible? what declaration would I need?

Thanks in advance.
BHWW
 
Shotster replied on at Permalink Reply
Shotster
> there are a couple of declarations I need that I don't want in the other version

Can you be more specific? If the mark-up for the block view is the same regardless of the area it's in, I'm having a hard time imagining why it couldn't be accomplished with just CSS.

-Steve
Shotster replied on at Permalink Reply
Shotster
> Basically if a block is in the Main area it should be styled in one way,
> if it is in the Sidebar area it should be styles in another

To elaborate a bit, is there any reason you can't target each block instance based upon its location within the DOM hierarchy? For example...

<div class="my-sidebar">
   <div class="my-block">
      <h1>My Block Title</h1>
   </div>
</div>
<div class="my-main-content">
   <div class="my-block">
      <h1>My Block Title</h1>
   </div>
</div>

Note that the mark-up for each block is identical; yet you can uniquely style each block because the "wrapper" elements allow you to target each block instance...


.my-sidebar .my-block h1 {
   color: blue;
}
.my-main-content .my-block h1 {
   color: red;
}

Any reason that approach won't work?


-Steve
BHWW replied on at Permalink Reply
BHWW
Hi Steve

Thanks for that, yeah i know in the past i have done exactly that, however i now have the scenario where i have the following:

<div class="style_used_elsewhere_1"><h3>Title</h3></div>
<div><vimeo block><h5>Text</h5></div>


and i need it to read differently when in another situation:

<div class="style_used_elsewhere_2">
<h2>Title</h2>
<p>Text</p>
</div>
<div><vimeo block with restricted size></div>
</hr>


Not sure that explains it, but the actual structure of what i need to do needs to change, both parts are made up from div styles used in other block styles and without re-declaring all the styles for this unique use, i would like an easier way to achieve it.

Hope this makes sense.

Cheers

B
Shotster replied on at Permalink Best Answer Reply
Shotster
Ok, I think I understand. Well, it appears there's a method precisely for that...

$area->setCustomTemplate($btHandle, $template);


According to the docs, it "Sets a custom template for all blocks of a certain type within an area."

See here...

http://www.concrete5.org/documentation/developers/pages/areas...

So, presumably, you just edit your page template(s) to invoke that method. Looks pretty sweet. I've never used it myself, so let us know how it works!

-Steve
aghouseh replied on at Permalink Reply
aghouseh
I tried a quick implementation of this to force image blocks to render a certain way, but it would not pickup my template. I even tested using the getCustomTemplates function to be sure it was set, but no go. Anyone out there have experience with this?
BHWW replied on at Permalink Reply
BHWW
Hi I was able to get this working by pasting this in the code for a vimeo block in the main area:

<?php 
        $a = new Area('Main'); 
      $a->setCustomTemplate('vimeo','main.php');
        $a->display($c); 
        ?>


I think there maybe issues if your template is in a folder rather than a single php file, but this works for me.

Regards

Ben
BHWW replied on at Permalink Reply
BHWW
Thanks Shoster, just the job!