mahara-contributors team mailing list archive

[Valerii Kuznetsov <valerii.kuznetsov@xxxxxxxxxxxxx>]

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.

-- 
You received this bug notification because you are a member of Mahara
Contributors, which is subscribed to Mahara.
Matching subscriptions: Subscription for all Mahara Contributors -- please ask on #mahara-dev or mahara.org forum before editing or unsubscribing it!
https://bugs.launchpad.net/bugs/1273931

Title:
  It is impossible to add custom CSS for blocks

Status in Mahara ePortfolio:
  New

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?

To manage notifications about this bug go to:
https://bugs.launchpad.net/mahara/+bug/1273931/+subscriptions