It is impossible to add custom CSS for blocks

Bug #1273931 reported by Valerii Kuznetsov on 2014-01-29
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Wishlist
Valerii Kuznetsov

Bug Description

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?

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?

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.

Changed in mahara:
importance: Undecided → Wishlist

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

Jono Mingard (mingard) on 2014-02-18
Changed in mahara:
assignee: nobody → Valerii Kuznetsov (valerii-kuznetsov)
status: New → In Progress

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>

Robert Lyon (robertl-9) on 2014-03-03
Changed in mahara:
milestone: none → 1.9.0
status: In Progress → Fix Committed
tags: added: nominatedfeature
Robert Lyon (robertl-9) on 2014-04-22
Changed in mahara:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers