It is impossible to add custom CSS for blocks

[Valerii Kuznetsov]

class PluginBlocktype that used for artefact blocks doesn't have any methods to load CSS files while it has two of them for JS:
- get_instance_javascript
- get_instance_inline_javascript

I see two ways of customizing CSS for blocks, but they both have significant disadvantages:

1. Load custom CSS for a block using js dynamic loader (dynamically create link tag to CSS in header). However, this way is quite limited because it doesn't support themes.

2. Change docroot/theme/view.css. This way used for core artifcats like blog. However it is also bad, because it makes artefacts hard to distibute separate from Mahara (main view.css file is part of core). Also, lots of styles that need for unused blocks stored anyway. Generally it makes a bit of mess.

My proposed solution is create style folder structure for blocktype as it done for artefact:
artefact/[artefactname]/blocktype/[blockname]/theme/[themename]/static/style/style.css

This file (if exists) will be loaded when block placed on current page and during page edit mode only.

I am going to implement this functionality anyway, but want to know if community interested in this feature or may be there some workarounds that I don't know?

[Kristina Hoeppner (kris-hoeppner)]

What would be the advantage for customizing CSS for blocks? What do you want to achieve? Shall each user be able to change the style of a block or do you want to be able to target blocks in the CSS, i.e. have a different heading style for image blocks than text blocks for example?

[Valerii Kuznetsov (valerii-kuznetsov)]

Custom CSS will help to solve limitations with artefact blocks design.

Each block placed on a page have own structure and design.
For example, journal block has big title, description, tags in bold, author in gray, date, list separator (dotted line), etc. In the same time file block has file name, and preview on its left, size, etc.

To properly display block of every type developer needs to use different CSS classes and styles.
Currently, developer can only use CSS classes defined in /theme/view.css. But there only limited number of classes defined and they are not fit/enough for many cases. So, if developers need to add some CSS to their blocks they have to add CSS classes into /theme/view.css.

This is done for example for journals. Such classes as .postlist .title, .postlist .post used only for journal block and defined in /theme/view.css to show journals block properly.

This is fine for Mahara core development, but it's bad for me as artefact developer. When I need to add some style I also need to change /theme/view.css, which is part of core. So, each time Mahara updates /theme/view.css I need to merge these changes into my artefact and redistribute artefact upgrade even when nothing else was changed.
Also it's bad for end users when they use two different third party artefact blocks they need to merge /theme/view.css from both artefacts.

Basically it makes impossible distribution of artefacts with blocktypes that need some advanced CSS separate from mahara.

It would be great to have a way to add CSS for blocks without changing /theme/view.css. I really like how it's done for artefacts. When I add style.css to /artefact/[name]/theme/raw/static/style folder, this file will be automatically loaded when artefact location is opened. Having the same for artefact blocks would solve this limitation.

As I said may be there is another way or workaround to solve this limitation, but the only thing I could do, is load CSS file programaticaly using javascript. Which is also has obvious disadvantages.

[Mahara Bot (dev-mahara)]

Patch for "master" branch: https://reviews.mahara.org/3009

[Valerii Kuznetsov (valerii-kuznetsov)]

Added patch to review.
Now any blocktype on page can use it's own CSS without changing main Mahara CSS.
Just put CSS code into blocktype/[blockname]/theme/raw/static/style/style.css
This works not only in artefacts, but independent blocktypes as well.
It supports theming as it's done for plugins. Updated CSS should go to: blocktype/[blockname]/theme/[themename]/static/style/style.css

Also, I've created sample blocktype that shows example of usage of CSS for blocks. It is simple chat that works site wide allowing everyone to chat with each other.

https://github.com/solival/MaharaChat

[Mahara Bot (dev-mahara)]

Reviewed: https://reviews.mahara.org/3009
Committed: http://gitorious.org/mahara/mahara/commit/65f3c09e6c53c1ffcd7fe477db508239acbcd751
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 65f3c09e6c53c1ffcd7fe477db508239acbcd751
Author: Yuliya Bozhko <email address hidden>
Date: Wed Feb 12 09:59:07 2014 +1300

Added CSS support for page blocks (Bug #1273931)

For each block on page added check for themed css in the same way as for plugins.
Also added dynamic CSS including for new blocks in page editor.
See bug descrition for details and usage example.

Change-Id: I7cbe407b7f6811a116301ddac2c0392cbf90b121
Signed-off-by: Valerii Kuznetsov <email address hidden>
Signed-off-by: Yuliya Bozhko <email address hidden>