Docked blocks title size

Docked blocks title size

by Mike Wilson -
Number of replies: 7

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)
In reply to Mike Wilson

Re: Docked blocks title size

by Mary Evans -

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)
In reply to Mary Evans

Re: Docked blocks title size

by Mike Wilson -

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)
In reply to Mike Wilson

Re: Docked blocks title size

by Amy Kuenzel -

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: -
In reply to Amy Kuenzel

Re: Docked blocks title size

by Mary Evans -

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: -
In reply to Mary Evans

Re: Docked blocks title size

by David Scotson -
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: -
In reply to David Scotson

Re: Docked blocks title size

by Mary Evans -

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: -
In reply to Mike Wilson

Re: Docked blocks title size

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of 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: -