Adding Styling for Selected Activities

Issue #671 resolved
Jeremy Hopkins created an issue

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)

  1. Manoj Solanki

    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.

    activity styling 1.jpg

  2. Manoj Solanki

    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.

    activity styling 1.jpg

  3. Info 3bits

    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.

  4. Manoj Solanki

    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.

  5. Info 3bits

    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()
    
  6. Info 3bits

    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.

  7. Manoj Solanki

    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?

  8. Manoj Solanki

    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.

  9. Manoj Solanki

    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,

  10. Log in to comment