ImpressCMS: How to theme just ONE block

 It can happen to you. You need one block to be different from the others. And I mean “different”, you know what I mean? It needs a big fat lot of exclusive CSS just for itself.

You need a way to point your CSS just to this block.

Fact: every block has its own ID number

Yes, every block has its own number. Even if you clone a block, both instances have distinct ID numbers.
We just have to insert this number in hour HTML, so, for example, this...

<div class=”icms-block system”>

...becomes:

<div id=”block-42” class=”icms-block system”>

How do we do that?

If you're using barebones as wireframe to build your theme, you're already done, it already does that. If you're using one of the default themes, such as “impresstheme”, do the following:

Locate a file named “blockszone.html” in your theme folder. Search for this line:

<div class="icms-block <{$block.module}>">

And replace it by:

<div id=”b-<{$block.id}>” class="icms-block <{$block.module}>">

You're almost done. Just repeat the operation on the file “centerblocks.html”, if it does exist.

And that's it. You now have your blocks numbered, and you can write CSS that works solely on one block, like this:

#b-42 {background-color: orange;}

Enjoy.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <i> <b> <strong> <cite> <pre> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <img> <h2> <h3> <blockquote>
  • Lines and paragraphs break automatically.

More information about formatting options