Themes

 
 
Mike Wilson
Docked blocks title size
 

I've read "styling and customising the dock moodle doc" looking for a way to resize the the font used in the dock block title:

http://docs.moodle.org/dev/Styling_and_customising_the_dock

From what I read this should be enough to resize the title in afterburner_dock.css:

#dock .dockedtitle h2 {
    margin: 0;
    padding: 10px 5px ;
    color: #fff;
    font-size: 14px !important;
}

When I checked a few browsers, I found the font size change only took in IE 8 (I'm used to things working in modern browsers and not IE wink ). The screen shot below should highlight what I mean.

docked blocks title

 

The dock font-size is hard-coded into \blocks\dock.js at line 526:

 

    // Create the text for the SVG
    var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    txt.setAttribute('font-size','10px');
    if (clockwise) {
        txt.setAttribute('transform','rotate(90 '+(qwidth/2)+' '+qwidth+')');
    } else {
        txt.setAttribute('y', height);
        txt.setAttribute('transform','rotate(270 '+qwidth+' '+(height-qwidth)+')');
    }
    txt.appendChild(document.createTextNode(text));

I don't want to make changes to moodle core files, but can't see a way round it at the moment. I really want to get this working via theme changes.

Any pearls of wisdom would be greatly appreciated.

Mike

 
Average of ratings:Useful (1)
It's only an avatar...
Re: Docked blocks title size
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi,

Well thanks for that bit of information, that accounts for why I could never get IE to change font size!

You could try adding .ie8 infront of the css selector you have above...like so...

.ie8 #dock .dockedtitle h2 {
    margin: 0;
    padding: 10px 5px ;
    color: #fff;
    font-size: 108%;
}

And see what happens?

Another alternative would be to make a copy of dock.js, change the font size in that line to 14px and save it into the javascript directory within your theme. If there is no such directory then create it.

Next open your theme's config.php and add this bit of code...

$THEME->javascripts = array('dock');

and save the changes.

Next go to Site Administration > Development > Purge all caches

A quick CTRL + F5 to refresh your screen and with luck you might get a changed value for font size in IE.

HTH

Mary

 
Average of ratings:Useful (3)
Mike Wilson
Re: Docked blocks title size
 

Thanks for the suggestion Mary. Unfortunately neither options would work. The dock text interestingly will re-size in IE8 but not Firefox, Chrome, Safari or Opera.

I've logged it in the tracker because I'm pretty sure it's a bug. http://tracker.moodle.org/browse/MDL-32159

Here's the full fix.

file: blocks\dock.js

before:

516     // Cool, we can use SVG!
517     var test = Y.Node.create('<h2><span style="font-size:10px;">'+text+'</span></h2>');
518     this.nodes.body.append(test);
519     var height = test.one('span').get('offsetWidth')+4;
520     var width = test.one('span').get('offsetHeight')*2;
521     var qwidth = width/4;
522     test.remove();
523
524     // Create the text for the SVG
525     var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
526     txt.setAttribute('font-size','10px');
527     if (clockwise) {
528         txt.setAttribute('transform','rotate(90 '+(qwidth/2)+' '+qwidth+')');
529     } else {
530         txt.setAttribute('y', height);
531         txt.setAttribute('transform','rotate(270 '+qwidth+' '+(height-qwidth)+')');
532     }
533     txt.appendChild(document.createTextNode(text));

after:

516     // Cool, we can use SVG!
517     var test = Y.Node.create('<h2><span style="font-size:0.8em;">'+text+'</span></h2>');
518     this.nodes.body.append(test);
519     var height = test.one('span').get('offsetWidth')+4;
520     var width = test.one('span').get('offsetHeight')*2;
521     var qwidth = width/4;
522     test.remove();
523
524     // Create the text for the SVG
525     var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
526     txt.setAttribute('font-size','0.8em');
527     if (clockwise) {
528         txt.setAttribute('transform','rotate(90 '+(qwidth/2)+' '+qwidth+')');
529     } else {
530         txt.setAttribute('y', height);
531         txt.setAttribute('transform','rotate(270 '+qwidth+' '+(height-qwidth)+')');
532     }
533     txt.appendChild(document.createTextNode(text));

 
Average of ratings:Useful (1)
Picture of Amy Kuenzel
Re: Docked blocks title size
 

I used Mike's full fix above, and interestingly it changes the font size in Firefox and Safari, but in Chrome the effect was delayed until I turned off developer mode.  When I did this, suddenly the bullets inside the docked menus became broken image links.  Very weird.  Ended up having to change the text size back to 10px, which was the original size.

Have not checked IE or others yet.  Another thing I noticed is that the end of the docked titles are cut off in Firefox, regardless of font size.  I'm running version 2.2.3 and using the theme called fusion.

 
Average of ratings: -
It's only an avatar...
Re: Docked blocks title size
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi,

This may seem a strange question, but did you have the theme you were using selected in Theme selector or were you viewing is as a session theme, that's to say, using /?theme=themename (where themename is the name of the theme like standard, or afterburner etc...?

I only ask because the missing images can happen in that scenario.

Cheers

Mary

 
Average of ratings: -
Picture of David Scotson
Re: Docked blocks title size
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Hi Mary,

your suggestion here seems to indicate that you can override core js from the theme. Is that really possible? It would be pretty useful if it was.
 
Average of ratings: -
It's only an avatar...
Re: Docked blocks title size
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Well it worked for me. I didn't think of it as overriding core js, but I suppose that's what I did.  It was just an experiment really that worked. 

 
Average of ratings: -
Picture of Richard Oelmann
Re: Docked blocks title size
Group Particularly helpful MoodlersGroup Testers

Nice find Mike! smile

And thanks for the tips Mary - I'll be sure to try them out and see what works

Richard

 
Average of ratings: -