Adding Styling for Selected Activities
Snap theme styles activities in a way that breaks the page up and highlights activities within it. It would be useful to know if this could be implemented in Adaptable on a selective basis perhaps beginning with assignments only.
An image from snap theme is shown below:
Comments (16)
-
-
Of course if they don't have a description in the assignment, it will look like this:
-
I wonder if it's better to have the styling customisations for various activities, customisable as per other options for styling? I.e. the colour and option to switch on / off a highlighted view (so to speak) for any activity? Maybe for the colours at least? Given that each use of the Adaptable theme will have customisations for colours and after all, it is intended to be very customisable.
Or just have them set in stone in the stylesheet completely?
I'm leaning more toward the first option. Thoughts?
Also see an updated look for this below (as per snap, the border colour is the same as the icon background). As there are a lot of blue background icons I've purposely placed it near some of those so you can see how it would look.
-
Best choice is a colour setting to each activity type.
I guess you are using a border so it needs: border width (common for all the blocks) and colour.
They can be added to the course settings section.
This section needs some changes: Rename it to Course Formats, integrate all the courses settings and separate by sub-sections.
I will create a new issue for this.
-
Sure. For now, I will create settings under the "Course Section Settings" page for the adaptable theme then. I will add a colour setting for various activity types and one (common) border width setting.
Hope everyone agrees on that? If there are only certain activities that are desired to be targeted, please let me know. Otherwise I can do it for all of them.
Update: I'll do another example of another activity and the example changes I've done will be reviewed before deciding on which activity types will be chosen.
-
Thanks Manoj, I will try to create re-organize the section later today.
-
Got this error when testing:
pix_url is deprecated. Use image_url for images and pix_icon for icons. line 267 of /lib/outputrenderers.php: call to debugging() line 1763 of /theme/adaptable/renderers.php: call to renderer_base->pix_url() line 350 of /theme/adaptable/layout/includes/header.php: call to theme_adaptable_core_renderer->navigation_menu() line 30 of /theme/adaptable/layout/columns2.php: call to require_once() line 1162 of /lib/outputrenderers.php: call to include() line 1092 of /lib/outputrenderers.php: call to core_renderer->render_page_layout() line 244 of /course/view.php: call to core_renderer->header()
-
What version of Moodle? I will try and reproduce then.
-
Also what screen.
-
My dev site: Moodle 3.3 (Build: 20170515)
The function is located in moodle/lib/outputrenderers.php line 270
pix_url is deprecated from moodle 3.3 but image_url can be used from previous versions.
-
Can't replicate it in 3.2
-
- changed title to Adding Styling for Selected Activities
-
Yes I found this also. Easy enough to fix the line causing the error above, which is to replace it with pix_icon() (as it is calling an icon).
However in line 986 in renderers.php, there is this which calls (pix_url):
if (!isset($message->from) || !isset($message->from->id) || !isset($message->from->firstname)) { continue; } // Following if to be removed once we are happy with check above correctly limits messages. if (!isset($message->from)) { $url = $OUTPUT->pix_url('u/f2'); $attributes = array( 'src' => $url ); $senderpicture = html_writer::empty_tag('img', $attributes); } else { $senderpicture = new user_picture($message->from); $senderpicture->link = false; $senderpicture = $this->render($senderpicture); }
This would need replacing with image_url() method from the recommendation in the code, which exists in outputrenderers.php from version 3.3 onwards. However, it doesn't exist before that and so using image_url() will fail. I don't know if this code above is actually being executed. In my 3.2 environment, I changed the above to image_url(), but it had no effect. But then I added the same line somewhere else in code and it did give an error that the function isn't found.
Looking at the comment on the code above, maybe it can be removed? I'm just testing now to see if this code is actually executed. Otherwise, if it is used, then we'll need to check the class function exists before executing for backward compatibility. Probably this second option is safest.
Does that make sense?
-
Having looked at the code more, it's ok. The code I mentioned above is ONLY called if it is version 3.1 or below of Moodle (actually anything lower than 2016120500 in the code). Meaning we can leave that part as it is. Will fix the original issue mentioned before that.
Please note I think this bug isn't related to this issue? However I can reference this issue number in the git commit.
-
Please note I have checked in a change to renderers.php in master-wip-mani-icon-pack for the above issue. However, the change is in a merge of master with master-wip-mani-icon-pack (I tried to amend the commit message and it lost my original message so it did commit of renderers.php at the same time as trying to merge master into my branch!).
Please ignore this change for the moment. I am not sure about the state of branch master-wip-mani-icon-pack. I will advise when I have fixed this issue.
Update: My change is in this commit: https://bitbucket.org/covuni/moodle-theme_adaptable/commits/6fced1a57b7217950d3e2a81cf337e582b0a96b2?at=master-wip-mani-icon-pack#
Before merging into master, please can someone make a quick check of this branch for the change please?
Thanks,
-
- changed status to resolved
Fix
#671. First check in of activity styling. Further minor updates expected after review.→ <<cset 439e62763d44>>
- Log in to comment
Fairly straightforward to add some custom styling in adaptable.css for most (if not all Moodle modules). There's a custom class referred to in the code for an activity that can be used. It's just a case of adding the style declarations to adaptable.css. Example below for course assignments.