Boost theme - help with Dashboard and Site Home page

Boost theme - help with Dashboard and Site Home page

by Jacques LeCavalier -
Number of replies: 6

I've been trying to find which IDs or classes need changing in the header of the Boost theme's Site home and Dashboard pages, and I'm not getting anywhere using Chrome's inspector.

How does one identify the ID's and/or classes to be changed if, for example, I want to:

- enlarge the logo shown on the site home page

- replace the user name by a banner image, on the Dashboard page

I'm very appreciative of the specific CSS code snippets provided by Mary, that I can add to the SCSS box in Boost's settings, but I'm wondering how one becomes a bit more independent with this. Is there any documentation of the theme that lays out all the IDs and classes used, or am I just dreaming?

thanks yet again.
JL

Average of ratings: -
In reply to Jacques LeCavalier

Re: Boost theme - help with Dashboard and Site Home page

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, 

The best places to look are in the Boost theme itself.

So get yourself a copy of the Boost's layout and template files.

you will find all the ID's and classes there.

The CSS in SCSS format which is CSS most of the time but layer out like LESS in a more structured way but still available to inspect

you will find this in theme / boost / scss / moodle/ 

To do what you want is a bit tricky.

The logo should be easy to alter, however the changing the username to an image is not easy. For this you would need to alter one if the template files as well as need to write a renderer.

To do all this you would really need to start thinking about designing / building your own custom theme based on the Boost theme.

You can view all those files in Moodle GitHub 

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Boost theme - help with Dashboard and Site Home page

by Jacques LeCavalier -

Thanks for the quick reply, Mary!

Designing a child theme is not realistic, that is clear; so I'll forget about changing the user name to a picture...

As far as changing logo size is concerned, here is the SCSS in core.scss that seems relevant:

/** Page header */
#page-header {
    .logo {
        margin: $spacer 0;
        img {
            max-height: 75px;
        }
    }
}

/** Header. */
header {
    .logo img {
        max-height: 35px;
    }
    .collapse.in,
    .collapsing {
        display: block;
        clear: both;
    }
}

/** Header-bar styles **/
.page-context-header {
    // We need to be explicit about the height of the header.
    $pageHeaderHeight: 140px;

    // Do not remove these rules.
    overflow: hidden;

    .page-header-image,
    .page-header-headings {
        float: left;
        display: block;
        position: relative;
    }

    .page-header-image {
        margin-right: 1em;
        margin-bottom: 1em;
    }

    .page-header-headings,
    .header-button-group {
        position: relative;
        line-height: 24px;
        vertical-align: middle;
    }

    .header-button-group {
        display: block;
        float: left;

        a {
            position: relative;

            // Don't touch it unless you know exactly what you are doing.
            top: -0.4em;
        }
    }
}


There seem to be 2 or 3 possible logo heights at work here - so not really sure where to start - and then that rather sinister warning at the end about not touching anything unless I know exactly what I'm doing...

I don't want to take lots of your time getting help if I don't have the capacity to use it. Should I just switch to a theme that has more settings and options that can be changed in the front end, and/or that perhaps has some support available?

JL

Average of ratings: -
In reply to Jacques LeCavalier

Re: Boost theme - help with Dashboard and Site Home page

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Don't worry about sinister comments, this is just Moodle developers making sure that these styles are not changed as Moodle layout relies on them to be there and in those formats.

However you can get round this but styling each page differently so a fontpage can look different than the login page the course pages, the incourse pages, the admin pages, the report pages, etc.

To do this you add the body class infront of the CSS you want to change.

.pagelayout-frontpage

.pagelayout-base

.pagelayout-standard

.pagelayout-admin

.pagelayout-course

.pagelayout-coursecategory

.pagelayout-incourse

.pagelayout-mydashboard

.pagelayout-mypublic

.pagelayout-login

.pagelayout-report

.pagelayout-secure

In fact all these layouts listed in the boost config.php which is relevant for ALL themes in Moodle

https://github.com/lazydaisy/moodle/blob/master/theme/boost/config.php#L36-L145

Another TRICK

Try colour coding the places you want to change:

#page-header { background-color: green; }  

.page-context-header { background-color: red;}

That way you learn where each bit of CSS is styling.

You can add all this css into the Raw SCSS box in 
Site-Administration > Appearance > Theme > Boost -> Advanced settings page.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Boost theme - help with Dashboard and Site Home page

by Jacques LeCavalier -
This is great stuff, Mary, thanks!

Have you given any thought to developing a course on customizing Moodle??

JL


Average of ratings: -
In reply to Jacques LeCavalier

Re: Boost theme - help with Dashboard and Site Home page

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I'm not a teacher, so I wouldn't really know where to start.

I suppose writing a Moodle doc would be the easiest way for me to dociment these kind of  customised changes, that can be made to enhace the display for any course. There is so much one can add in the HTML text area just using the Examples fround in the Bootstrap Example layouts.https://getbootstrap.com/docs/4.0/

PS

I dare say I could put together a Moodle course using Course Topics to structure it. I shall have to think about this.

Mary

Average of ratings: -
In reply to Mary Evans

Re: Boost theme - help with Dashboard and Site Home page

by Bill Wells -

Mary - thank you for the class list - very useful

Average of ratings: -