Building with concrete5

Is there a way to have a block-exclusive CSS file?

August 31, 2010 at 4:59 PM Permalink

(For context, probably not necessary though:http://www.concrete5.org/community/forums/customizing_c5/edit-mode-... )

Is there a way to include a CSS file that affects only the specific block in which you include it, and doesn't affect the rest of the CMS?

I'd like to apply a style for:

div.ccm-block-arrange, div.ccm-block

(from concrete/css/ccm.ui.css) so that it will affect the block in Edit Mode, but won't affect any of the other styles or blocks throughout the rest of the site.

If this is possible, any help would be great.

I've tried using this:

controller.php:

public function on_page_view() {
   $bt = BlockType::getByHandle($this->btHandle);
   $uh = Loader::helper('concrete/urls');
   $this->addHeaderItem('<link rel="stylesheet" type="text/css" href="'. $uh->getBlockTypeAssetsURL($bt, 'grid.css') .'" />');
   }

grid.css:

div.ccm-block-arrange, div.ccm-block {
   width: 165px;
   float: left;
}

but the CSS still affects the rest of the site.

Thanks!

Tags:

page in edit mode

nige replied on Aug 31, 2010 at 7:06 pm Permalink Reply

Can't you just go into the design part of the block ie click once on the block and scroll down to design.

In that area there is a tab for css. You can create a little style however you like in your style sheet and just apply it to that block in this area.

Give it a go...

Nige

andrew replied on Aug 31, 2010 at 7:19 pm Permalink Best Answer Reply

Could you use the same approach, but instead wrap a custom DIV around the entire content of the view.php file?

So within view.php you have

<div class="my-custom-block-wrapper">

</div>

and within grid.css

div.my-custom-block-wrapper {
width: 165px;
float: left;
}

?

stephmars replied on Sep 1, 2010 at 11:12 am Permalink Reply

Nope, still nothing.

I'd already wrapped the contents of view.php in fixed-width divs, float:left, so adding another one around it didn't do anything (even though I tried it anyway).

Here's my view.php:

<? defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<div class="my-custom-block-wrapper">
<div class="grid-col-container">
    <div class="grid-thumb-container">
    <?php
    echo "<img src=\"" . $controller->getFileObject()->getURL() . "\" alt=\"\">"; ?>
    </div>
    <div class="grid-info-container">
    <? echo "<p class=\"grid-title\">" .nl2br($controller->description) ."</p>"; ?>
    <a href="<?php print $anchor?>" class="grid-act"></a>
    </div>
</div>
</div>

And the CSS for those styles...

grid.css:

div.my-custom-block-wrapper {
width: 165px;
float: left;
}

main.css:

.grid-col-container {
height: 330px;
width: 164px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
float: left;
}
.grid-thumb-container {
height: 165px;
width: 164px;
float: left;
}
.grid-info-container {
position: relative;
height: 165px;

Viewing 15 lines of 29 lines. View entire code block.

 
.grid-col-container {
height: 330px;
width: 164px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
float: left;
}
 
.grid-thumb-container {
height: 165px;
width: 164px;
float: left;
}
 
.grid-info-container {
position: relative;
height: 165px;
width: 164px;
float: left;
}
 
a.grid-act {
position: absolute;
height: 330px;
width: 165px;
background: url(/images/universal/arrow2.gif) 115px 280px no-repeat;
bottom: 0px;
right: 0px;
}
 
a.grid-act:hover {
background: url(/images/universal/arrow2-over.gif) 115px 280px no-repeat;
}

If it's any help, I took a screen shot of the source, while the page is in edit mode:http://imgur.com/7kaJU.jpg

C5 has some default style (div.ccm-block) that wraps around the block. But I don't know why this code doesn't override div.ccm-block:

<?php  if ($c->isEditMode()) { ?>
<div style="height: 335px; width: 165px; float: left;">
<?php  } ?>
<?php
$a = new Area('Grid Item 1');
$a->display($c);
?>
<?php  if ($c->isEditMode()) { ?>
</div>
<?php  } ?>

Shotster replied on Sep 1, 2010 at 11:48 am Permalink Reply

Perhaps there are some styles being applied via JS that are overriding the stylesheet styles?

-Steve

stephmars replied on Sep 1, 2010 at 12:01 pm Permalink Reply

Anything is possible, I just can't think of what or which js styles they could be. I'll do some poking around though, thanks for the tip.

LucasAnderson replied on Sep 1, 2010 at 12:22 pm Permalink Reply

Every block is given an id in edit mode and out. Such as:

<div id="b79-84" custom-style="0" class="ccm-block">

I guess I would try to create an addToHeader in the controller that assigns a style to that id automagically.

Bear with me this is an rough idea, so you'll need to work with it a bit:

$b = $this->getBlockObject();
$btID = $b->getBlockTypeID();
$bt = BlockType::getByID($btID);

$this->addHeaderItem('<style>#b'. $bt .'-84 {width: 165px; float: left;}</style>');

stephmars replied on Sep 1, 2010 at 12:40 pm Permalink Reply

This seems really promising but I must be doing something wrong. Here's my full controller.php file:

<?
   Loader::block('library_file');
   defined('C5_EXECUTE') or die(_("Access Denied."));   
   class GridItemBlockController extends BlockController {
      protected $btInterfaceWidth = 400;
      protected $btInterfaceHeight = 300;
      protected $btTable = 'btGridItem';
   $b = $this->getBlockObject();
   $btID = $b->getBlockTypeID();
   $bt = BlockType::getByID($btID);
   $this->addHeaderItem('<style>#b'. $bt .'-84 {width: 165px; float: left;}</style>'); 
      /** 
       * Used for localization. If we want to localize the name/description we have to include this
       */
      public function getBlockTypeDescription() {

Viewing 15 lines of 37 lines. View entire code block.

 
<?
   Loader::block('library_file');
   defined('C5_EXECUTE') or die(_("Access Denied."));   
   class GridItemBlockController extends BlockController {
 
      protected $btInterfaceWidth = 400;
      protected $btInterfaceHeight = 300;
      protected $btTable = 'btGridItem';
 
   $b = $this->getBlockObject();
   $btID = $b->getBlockTypeID();
   $bt = BlockType::getByID($btID);
 
   $this->addHeaderItem('<style>#b'. $bt .'-84 {width: 165px; float: left;}</style>'); 
 
 
      /** 
       * Used for localization. If we want to localize the name/description we have to include this
       */
      public function getBlockTypeDescription() {
         return t("Adds item to the grid page.");
      }
 
      public function getBlockTypeName() {
         return t("Grid Item");
      }      
 
      public function getJavaScriptStrings() {
         return array(
            'image-required' => t('You must select an image.')
         );
      }
 
 
      function getFileID() {return $this->fID;}
      function getFileObject() {
         return File::getByID($this->fID);
      }      
      function getDescription() {return $this->description;}
 
   public function on_page_view() {
   $bt = BlockType::getByHandle($this->btHandle);
   $uh = Loader::helper('concrete/urls');
   $this->addHeaderItem('<link rel="stylesheet" type="text/css" href="'. $uh->getBlockTypeAssetsURL($bt, 'grid.css') .'" />');
   }
 
   }
 
 
?>

Thanks.

LucasAnderson replied on Sep 1, 2010 at 12:46 pm Permalink Reply

Yeah, I'm thinking the actual generate id will be different for you. I'm not sure of the logic behind that ID that gets created, however I think we can get around that.

Can you go to your page, put it in Edit Mode, then view the source and copy it tohttp://www.pasite.org it for me.

stephmars replied on Sep 1, 2010 at 1:10 pm Permalink Reply

Here you go:http://pasite.org/code/645

LucasAnderson replied on Sep 1, 2010 at 1:59 pm Permalink Reply

Try this for your controller. I'm not sure if it will work but we can at least check to see if it's adding the style call to the header in Edit Mode:

b674-347
<?
   Loader::block('library_file');
   defined('C5_EXECUTE') or die(_("Access Denied."));   
   class GridItemBlockController extends BlockController {
      protected $btInterfaceWidth = 400;
      protected $btInterfaceHeight = 300;
      protected $btTable = 'btGridItem';
      /** 
       * Used for localization. If we want to localize the name/description we have to include this
       */
      public function getBlockTypeDescription() {
         return t("Adds item to the grid page.");
      }
      public function getBlockTypeName() {

Viewing 15 lines of 38 lines. View entire code block.

 
b674-347
 
<?
   Loader::block('library_file');
   defined('C5_EXECUTE') or die(_("Access Denied."));   
   class GridItemBlockController extends BlockController {
 
      protected $btInterfaceWidth = 400;
      protected $btInterfaceHeight = 300;
      protected $btTable = 'btGridItem';
 
 
      /** 
       * Used for localization. If we want to localize the name/description we have to include this
       */
      public function getBlockTypeDescription() {
         return t("Adds item to the grid page.");
      }
 
      public function getBlockTypeName() {
         return t("Grid Item");
      }      
 
      public function getJavaScriptStrings() {
         return array(
            'image-required' => t('You must select an image.')
         );
      }
 
 
      function getFileID() {return $this->fID;}
      function getFileObject() {
         return File::getByID($this->fID);
      }      
      function getDescription() {return $this->description;}
 
   public function on_page_view() {
   $bt = BlockType::getByHandle($this->btHandle);
   $uh = Loader::helper('concrete/urls');
   $this->addHeaderItem('<link rel="stylesheet" type="text/css" href="'. $uh->getBlockTypeAssetsURL($bt, 'grid.css') .'" />');
 
   $b = $this->getBlockObject();
   $btID = $b->getBlockTypeID();
   $bt = BlockType::getByID($btID);
 
   $this->addHeaderItem('<style>#b'. $bt .'-347 {width: 165px; float: left;}</style>'); 
   }
 
   }
?>

stephmars replied on Sep 1, 2010 at 2:53 pm Permalink Reply

I replaced all of controller.php with your code and unfortunately received this error:

Catchable fatal error: Object of class BlockType could not be converted to string in /home/websites1.com/client/blocks/grid_item/controller.php on line 44

LucasAnderson replied on Sep 1, 2010 at 2:58 pm Permalink Reply

Icky. Okay, I'll try to get some time to test in a live environment before I post more code.

stephmars replied on Sep 1, 2010 at 3:03 pm Permalink Reply

What would we beginners do without generous folks like you? Thanks very much for lending a hand.

Building with concrete5

Is there a way to have a block-exclusive CSS file?

Tags:

Code

Post Reply

Delete Post

Sign In?