## General developer forum

### Finding current styles

This discussion has been locked because a year has elapsed since the last post. Please start a new discussion topic.
Finding current styles
Hi everyone,

I'm currently working on an accessibility tool for moodle. Is there a way of finding the current styles, such as the font size, that will be used for the current page?

I've had a look at style_sheet_setup(), which combines all the relevant stylesheets. Would it be possible to call that and parse the required properties from its output, or use some of it's code to generate the data I want?

Thanks

Average of ratings: -
Re: Finding current styles
Hi Mark,

The best way to analyse the CSS of any given web page is using Firebug and Web developer toolbar.

Other useful resources are CSS FAQ and Themes FAQ.

hth
Frank

Average of ratings: -
Re: Finding current styles

Mark,

Frank beat me to the answer, but I will second his recommendation for Firebug. Also, the most full featured version of Firebug is supported on the Mozilla Firefox web browser, so I would recommend you get that for testing purposes, even if you are working on somthing that will run through Internet Explorer. If you spend some time on the links Frank has provided, and the Firebug website, it is pretty straightforward to learn how to use it.

Firebug was a HUGE help to me in fixing an issue I was having with styles just last week. It may be information overload, but if you are interested here is the thread that related to that problem, and it includes some screenshots of Firebug in action.

http://moodle.org/mod/forum/discuss.php?d=126935

Carvell

Average of ratings: -
Re: Finding current styles
Sorry guys, I don't seem to have made myself very clear.
What I meant was that, in a PHP script being run by a moodle user, is it possible to determine the stylesheet that's going to be used for any pages being displayed to that user?
I know that I can view it myself after it's been served up to the browser, but I need a way of finding a current style attribute from the stylesheet before it's served (e.g. when it's generated by code in style_sheet_setup() ).

Average of ratings: -
Re: Finding current styles
Ah, I see. That's actually a bit tricky because Moodle bundles a lot of relevant style sheets before sending the code to the browser.

That's why the line numbers Firebug will give you aren't of much use, unfortunately.

Which files are used is defined in your theme's config.php file (see Theme config file).

I would recommend to read Theme basics as a starting point.

hth
Frank

Average of ratings: -
Re: Finding current styles
What exactly do you want to do to the CSS in your accessibility tool?

Are you sure you can't achieve the same effect another way, for example by sending an additional stylesheet with !important rules?

If you really need to do this, you could call style_sheet_setup wrapped in ob_start/_get_contents/_end_clean, but that is probably an ugly hack.

Average of ratings: -
Re: Finding current styles
The !important method is how I'm achieving this so far (at the moment it's just changing text size, but I hope to expand this once the groundwork's in place). The trouble is I want a way of resetting the text to the original size, but I need to find the original size first. The way you suggested is pretty much what I was after, ugly though it is.

I currently have the functionality I'm after working in Javascript, but in PHP it's proving very problematic. Another problem I came across yesterday is how to serve up CSS for a particular user, since when style_sheet_setup accesses the various files, it doesn't do so as the logged in user (and so can't use $USER->id, for example). Is this just one of those things that's only going to be do-able with JS? I could probably implement a simple big/med/small text in PHP, but ideally I was after increment/decrement/reset buttons. Average of ratings: - Re: Finding current styles Hi Mark, If you only want individual users to be able to resize the text then you don't have to touch Moodle (or any other web page) at all. That's a feature each current browser is able to do, e.g. try "Ctrl +" with Firefox (http://www.ghacks.net/2009/02/23/how-to-zoom-in-firefox/). Browsers are also able to apply User Stylesheets to any web page (http://www.squarefree.com/userstyles/user-style-sheets.html). And if you want a generic solution you should try the Firefox plug-in Stylish (http://userstyles.org/stylish). hth Frank Average of ratings: - Re: Finding current styles This is true, however some of my users probably wouldn't know what a browser was if I asked them [1], let alone know about features which are only accessed by second-tier menus and shortcut keys. I'd like to have something more visual and readily available in moodle such as this. [1] Average of ratings: Useful (1) Re: Finding current styles Hi Mark, It would help if you could tell a bit more about your users and which accessibility features they need. IMO shortcut keys are more accessible than anything you have to use a mouse for - even for normal users You could just inform your users about the shortcut keys with a block on your Moodle site. Frank Average of ratings: - Re: Finding current styles Frank, we are talking about UI like the Change font size and colours on this site colours thing here: http://www.bbc.co.uk/accessibility/ That is quite standard practice. Average of ratings: - Re: Finding current styles Now even I have understood... What about Moodle plug-in "Block: Accessibility Options" (http://moodle.org/mod/data/view.php?d=13&rid=1044&filter=1 )? Seems to do exactly what Mark wants but might have to be updated to 1.9. EDIT I only read the description of that block after posting the link here. Seems to be quite a brute force approach. Still looking for a better solution... Frank Average of ratings: - Re: Finding current styles Indeed, I had seen that block. The 'better solution' is what I'm hoping to create. Average of ratings: - Re: Finding current styles Hi Mark, Totally agree with Frank. If you only want individual users to be able to resize the text then you don't have to touch Moodle (or any other web page) at all. For users who need larger font-size, the best way to go is to teach them to use the built-in "larger size" facilities included in modern browsers. FireFox 7 has an excellent and easy-to-use enlarge feature which will not only increase the size of text but also of graphics. What more can you ask for? Plus, some mouses and keyboards now include a ZOOM button or wheel, to make things even easier for people who need larger display sizes. No need to tamper with Moodle code at all. Joseph Average of ratings: - Re: Finding current styles Hi Joseph, I totally agree with what you're saying, in theory. Yes, the best way is to teach every user about their chosen browser's built-in accessibility features. However, for me, this involves teaching about 1000 students (not to mention luddite staff), many of whom may not even know that they use a web browser when accessing Moodle, each year. You and I both know that holding control and scrolling the mouse wheel to zoom in on a page is a technically superior and frankly easier solution, but put yourself in the mindset of a user who isn't technically minded. Try and write some text that would stand out to a non-techie, visually impaired user and explain exactly how to change the font size, in a way that everyone can understand. Contrast that with 3 buttons, that look like this: A- A A+ If you need bigger text and you see those, it shouldn't be too hard to work out what they do. Also, as they're presented on the page rather than hidden on a shortcut key/in a menu, they're discoverable to a user who may not even know such a feature is possible. Add tooltips to the button to say what they do in plain english (I use the term 'english' loosely) e.g. 'Make Text Bigger', and you should never need to teach the user anything, they can work it out themselves. Average of ratings: - Re: Finding current styles Mark, I have to agree (reluctantly). Joseph Average of ratings: - Re: Finding current styles To play the devil's advocate... Teaching a user to use the browser's zoom function benefits them on every web site that they visit, rather than just one. (On the other hand, the two are not mutually exclusive.) "A- A A+" are not entirely clear as to what they do. Especially as Moodle is a learning environment, they may look like something grade-related. I'm not sure how you're planning on implementing this, but on most sites that I've seen, they give you only three choices of font sizes, which may not be enough for everyone. Font size controls also usually don't work with images, while (on a good browser) the zoom function does. Average of ratings: - Re: Finding current styles I'm not arguing for a second that educating users is a better solution, I'm just saying that it's not really feasible in my use case. I could try making the buttons zoom the images as well, since the text increases by a percentage not by a fixed amount. I'll look into this, thanks for the idea! Regarding what's on the buttons, the formatting got stripped out of my message which hampered my point a bit. If you have a look at the block (I posted a link to the tracker down the page a but) the decrease button has a small A-, the reset button a medium-sized A, and the increase button a larger A+, along with tooltips that say what they do. They allow for a range of 16 different font sizes from 10px to 26px, which I hope is enough for everyone. Average of ratings: - Re: Finding current styles You could just make button that pops up a page describing how to use the browser zoom features. Average of ratings: - Re: Finding current styles You seem to be after a solution that's the least possible effort for the developer, whereas I'm after one that's the least possible effort for the user. The more clicks, reading, thinking that a user has to do to work out how a feature is used, the less likely they are to work it out. A button on the page that performs a function requires a lot less thought on behalf of the user than a button that opens a window that contains some text which explains (in terms they might not understand) a function that requires a combination of 2 keys pressed simultaneously to perform. Let me illustrate, with a few examples of what the text might say: "To change text size, hold the control key and scroll the mouse wheel" Problems - what's the control key? The one labeled Ctrl? How was I supposed to know that? - what's the mouse wheel? Is it the grey thing on top of the mouse, or the ball on the bottom? - I held the key, then released it and scrolled the mouse wheel. It didn't work. So we could improve it by saying: "To change text size, hold the control key (the one labeled Ctrl), keep it held, and scroll the mouse wheel on top of your mouse (between the two buttons)." Problems - There's 2 keys labeled Ctrl - which one do I press? - There's no wheel between my mouse buttons, I use a trackball/graphics tablet/trackpad/switch/voice commands As you can see, in order to produce text with the desired effect that will ensure EVERY user reading it knows exactly what to do first off, it easily becomes quite verbose. The longer it is, the less likely it'll be read/understood. Plus as it's aimed at visually-impaired users, the font has to be quite big. Plus if you have to click a button to get to it in the first place, that button might as well perform the function you're teaching the user about, mightn't it? Anyway, it seems several people here disagree with my approach. That's absolutely fine. I'm not suggesting it becomes a core part of Moodle. If you find that telling your users how to use the browser's built in zoom feature is the best solution, please continue to do so. For the rest of you, my block's free for you to use as you see fit Average of ratings: - Re: Finding current styles Hi, I seem you have been a bit put off by some of the responses here. For me, some of it raised memories from the time I advocated making the quiz UI better (later, it seems, my message got through as I did get a chance to implemented, so be strong ;). (Having studied the subject in my yet unborn master's thesis a bit, it seems the usability/accessibility people tend sometimes to be a bit alone in OSS communities in general, too.) The discussion also seems to demonstrate well many of the different ways and levels of using computers in the community. I once explored the subject of enlarging fonts on a website. I never found an implementation that would do it right. Basically, the best option would be to just access the font size of the browser for the tab/window in question. But I guess the browser font size cannot be accessed from script in any browser(?), and this might be something of a security hazard. OR maybe! The best option would be to have those controls visible in all major browsers by default. Seems that a large enough part of the overall population using browsers is likely to appreciate this (as demonstrated by that link to youtube you posted, loved it). Then those who are skilled enough to know how to use ctrl-+ are perhaps more likely to know how to customize their toolbars and remove the buttons ;). Trying to remember from the back of my mind, my wishlist for the almost-perfect font selector, then (I have never seen this in reality): • decrease, restore, increase size buttons • some kind of an indication of the current status • probably not unlimited number of sizes, but more than three • due to the marginality of need, no slider or dropdown, but probably just buttons for each size (that means there should probably not be more than four-five sizes available, and that status is easily displayed by highlighting the button for the active font size) • compact, still affords what it does and visually attractive enought to be found • the convention for the position of this is somewhere near top-right corner of the screen • store the font size in a cookie/the session • have both php and javascript manipulate the same value in the cookie, allowing javascript to quickly set the value and after that have it fixed on server side until changed again - of course, this also means graceful degradation is needed when no js is available I am not sure if I understood why you want to parse the CSS in PHP, but if you really want it, then, though not common, at least you're not the first one to think of this. Average of ratings: - Re: Finding current styles I think what this zoom vs. widget debate really boils down to, is that the accessibility functions in browsers should be more, uhm, accessible (ironically enough). Unfortunately, they are not, which leaves people like Mark trying to figure out the best solution for his users. By the way, is it just me, or does Firefox not even have a standard toolbar button for changing the zoom? Average of ratings: - Re: Finding current styles Firefox doesn't have any toolbar zoom buttons, you have to use the menu or the keyboard. Epiphany does though. Average of ratings: - Zoom toolbar buttons for Firefox Gosh! You're right. But fortunately there are some addons for amend that: https://addons.mozilla.org/de/firefox/search?q=zoom As stated before, for zooming I would always prefer a generic browser based solution. Frank Average of ratings: - Re: Finding current styles I suppose I am after the solution that would give the least amount of work for the developer, but that's not my goal. My goal is to provide a consistent experience for the user. In the long run, reinforcing common built-in mechanisms like this helps to do that. It's certainly an "ideal" goal and not always practical, but I like to be an idealist whenever I can afford it. To solve your problem, this shouldn't be terribly difficult to implement in a theme. Average of ratings: - Re: Finding current styles Alan/Olli, I haven't been in the least bit put off by the responses here. I'm just trying to explain my reasoning, and debate is always welcome! I think it might have gotten a bit lost in the good idea/bad idea discussion, but I have actually solved my initial problem thanks to Tim's suggestion of using style_sheet_setup wrapped in an output buffer. I've managed to implement per-user styles with a 1-line patch to the theme's header. Alan, I think I understand your position better now, and I agree that it's good to reinforce common built-in mechanisms. However, currently I don't think these mechanisms are present enough on the interface (with the possible exception of new IE versions) to make this a realistic possibility at the moment. Olli, I think your wishlist is pretty much spot on. My block's probably about 70% of the way there, the main missing point being a current size indicator and the fact that it can't display at the top right due to a bug (See CONTRIB-1417). I'd love it if Javascript could be used to manipulate the browser's built-in zoom feature, but currently there's no way (at least, no standard way) that I know of doing this. Average of ratings: - Re: Finding current styles Note that block ->get_content method can be called several times. You should always have if ($this->content !== NULL) {
return $this->content; } near the start, so you only generate the conent once. Average of ratings: - Re: Finding current styles Tim, Thank you! That appears to have fixed both the bugs I've posted against the block. Average of ratings: - OT: Firefox 7 Hi Joseph, Where did you get Firefox 7? I'm stuck halfway with 3.5 Average of ratings: - Re: OT: Firefox 7 Oops. I meant FF 3, of course. Average of ratings: - Re: Finding current styles If you want per-user CSS, it might be better to put that bit of CSS directly in the <head> of the page, since while the PHP script is executing, you have access to$USER.

At the moment I am struggling to think of a suitable hook to let you do this easily. What form does your code currently take? How are you integrating with Moodle?

At least in the standard theme, we are pretty good. We set a font size on body, and then all the other font sizes are relative to that. And actually in the standard theme we use the browser default size. So you should not need many style rules for this.

Average of ratings: -
Re: Finding current styles
At the moment I'm currently changing the font-size property for the body to a relative (%) value, based on the values specified by the YUI guidelines. In the themes I've tested so far, this works as I hoped, changing all the fonts on the page.

At the moment, I'm attempting to use the block's styles.php to dynamically change the style when the page loads, but as I've discovered, this doesn't work as we can't access $USER. Looks like an additional <link> in the header might be the way to go. It's a bit annoying, but could be included with the block as an optional patch for the site's theme if Javascriptless functionality is required? Average of ratings: - Re: Finding current styles I have used cookies in the past to do such changes as BBC site does. For example one version (js) had the following tags var prefsLoaded = false; var defaultFontSize = 90; var currentFontSize = defaultFontSize; function revertStyles(){ currentFontSize = defaultFontSize; changeFontSize(0); } function toggleColors(){ if(currentStyle == "White"){ setColor("Black"); }else{ setColor("White"); } } function changeFontSize(sizeDifference){ currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5); if(currentFontSize > 150){ currentFontSize = 150; }else if(currentFontSize < 50){ currentFontSize = 50; } setFontSize(currentFontSize); }; function setFontSize(fontSize){ var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area'); document.body.style.fontSize = fontSize + '%'; //alert (document.body.style.fontSize); }; function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; }; function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }; window.onload= setUserOptions; function setUserOptions(){ if(!prefsLoaded){ cookie = readCookie("fontSize"); currentFontSize = cookie ? cookie : defaultFontSize; setFontSize(currentFontSize); prefsLoaded = true; } } window.onunload= saveSettings; function saveSettings() { createCookie("fontSize", currentFontSize, 365); } and the needed buttons were in header.html to make font bigger, smaller or reset to default value. Another option could be user profiles or some variable like$USER->xxx but there is no \$USER->id before you are logged in...

Note: in previous script moodle adds X before event handlers (for example onload and onunload) in these forums posts

Average of ratings: -
Re: Finding current styles
That's similar to what I've done, although I've got some AJAX to load/save preferences from/to the database, in place of cookies.
Again, the cookies fall down when we're using PHP as the cookies set on the user's browser aren't availalbe when the server's building stylesheets.

Average of ratings: -
Style switchers
I found this article on CSS Style Switchers (http://www.drweb.de/magazin/alles-uber-styleswitcher/ ). The article itself is in German but you will find an exhaustive reference list with English resources at the bottom of the page.

hth
Frank

Average of ratings: -
Re: Finding current styles
If anyone's interested, I've uploaded the inital version of this block to the tracker: CONTRIB-1416
Thanks for everyone's suggestions!

Average of ratings: Useful (1)
Re: Finding current styles

Hi Mark - yes, I'm interested !
Great idea.
I asked a while back if anyone could integrate something like this into a header (similar to the way numerous websites do it).
Having something in a Block is useful too!
Do you think this could expand to control colours in the future?
Although given the reworking and improvement to Themes perhaps this functionality should be a bit more 'built-in' to those anyway?
PS Using the Rounded Corner Theme I found the controls in this Block were displayed twice (two identical rows). I'm pretty sure it's a Rounded Corners issue though because if I put another Block above the Accessibility Block it's OK.
I look forward to seeing how this Block can be developed - great stuff!
Stu

Average of ratings: -
Re: Finding current styles
Hi Stuart, thanks for the feedback!
Yes, changing colours is my next goal. I was thinking of a similar set to those shown in the Accessibility Options block (black on white/theme default, black on pastel colours and high contrast).

Regarding the rounded corner theme thing, this is one of the 2 "known bugs" that I mentioned in my post on the tracker. I'm not sure why it happens, but it's very reproducible. It happens to me in all themes on all browsers, but only when you put it at the top of a column (which is annoying, as this is where I'm most likely to want it). I'll post up a report on the tracker.

As far as having this as part of a theme goes, I don't see why it shouldn't be possible. I don't know if themes are able to have a database table, but I believe you could still store settings to the session. You could include a set of buttons in the theme's header that link to changestyle.php (with the database bits removed), and move the stuff from userstyles.php into the theme's own styles.php
The main advantage of having it as a block (IMO) is that you can add it on existing themes pretty easily (one-line copy and paste), so if a user wants a different theme from the default they still have the functionality.

Average of ratings: -
Re: Finding current styles

Hi Mark
All sounds good!
Yeah, Customer Corners i excellent, very popular, but does have some odd behaviours here and there.
I agree that the Block option is useful and simple - having this operate in the header is more complex.
Good luck with this Block development
Taunton eh? Nice part of the country.
Stu

Average of ratings: -
Re: Finding current styles
Confusingly, Taunton's college isn't in Taunton (although I think there's a Taunton school in Taunton?), it's in Southampton.

Average of ratings: -
Re: Finding current styles
Hi Mark,

Should have read until the end before posting my previous reply it seems . I can't look at your block right now, but if it looks anything like http://moodle.org/mod/data/view.php?d=13&rid=1044 I am curious: what is your user base like? Although that design is good in that it makes the choices pretty clear, it is very verbose, and it seems that a great part of the users need to have an explicit need to justify including a big block like that by default?

P.S. Thanks Frank for directing me here.

Average of ratings: -
Re: Finding current styles
My user base is anything from 16-year-old students, to their parents, to teachers in their 60s. The reason that I thought this block would be necessary was that the current theme we used had quite large text. I wanted to design a nicer looking theme for the site with smaller text, but not lose the accessibility benefit. I also wanted an exercise in Moodle block development since I'm pretty new to the game, and this seemed like an interesting learning experience

My block's not quite so verbose as the "Accessibility Options" block. I'm hoping the eventual block will have 3 text resize buttons, 4 colour scheme buttons, and the save button. The buttons I currently use are quite a bit larger than in that block, I may make them smaller as I add more to keep the block compact.

Average of ratings: -
Re: Finding current styles

Hi Mark, this is the spanish (es_utf) traslation. Congratulations for your work.

Average of ratings: Useful (1)
Re: Finding current styles
Thank you!

Average of ratings: -
Re: Finding current styles

Hi,

the german translation=>

Average of ratings: Useful (1)
Re: Finding current styles
Awesome!
When I get the chance, I'll add it to CVS!

Thanks
Mark

Average of ratings: -
Re: Finding current styles

Hi Mark,
the update of German translation

Average of ratings: -
Re: Finding current styles
Thank you!

Average of ratings: -
Re: Finding current styles

Hello!
I apologize for my English - it is an automatic translation from Russian.
Can you please tell why the unit comes on my page in the wrong way?
A column of the letters are arranged, small size and without pictures?
And how can we make this unit was on all pages? That is, in tests, assignments ... Or that kind of pages are saved when switching to other pages? Now the changes are not saved, the font size and background change to those that were originally in the transition to another page of the course.
Thank you!

Average of ratings: -
Re: Finding current styles

Just a quick note to say the the block has been released for Moodle 2! It now includes Text to Speech and Dictionary Lookups, thanks to the inclusion of ATbar. Get it while it's hot: http://moodle.org/mod/data/view.php?d=13&rid=2510&filter=1

Average of ratings: -
Re: Finding current styles

Mark, I'm using Moodle 1.9.8 and followed the installations steps for the current Accessibility Block but get a "Block accessibility: self test failed" message. Is the current version only operable on Moodle 2? If not, is there a permission issue or something else I may be overlooking for use with 1.9.8? Thanks and thanks for your commitment to accessibility.

Average of ratings: -
Re: Finding current styles

Hi Martin,

The 1.9 version is still available from the Modules and Plugins page (although it's no longer actively maintained unless someone else wants to take it over, my development focus is now 2.0) - clicking "Download for Moodle 1.9" should give you accessibility.zip containing a folder called "accessibility" to be placed in /block/. If you clicked "Download Latest Version" or "Download for Moodle 2.0" you'll have problems with 1.9.8.

Average of ratings: -
Re: Finding current styles

Mark,

Can you let me know if the AT Bar is included in the 1.9 version, or only the 2.0 version?

Thanks

Average of ratings: -
Re: Finding current styles

Hi William,

It's only in the 2.0 version.  If you'd like to use AT Bar in 1.9, I'd recommend grabbing the AT Bar Lite bookmarklet and displaying it in an HTML block.

Average of ratings: -
Re: Finding current styles

Mark,

I will be upgrading this summer to 2+ and will be including your block. I'm wondering how much work would be involved for me to add in another colour set theme?

Is it just a case of adding the theme colours into userstyles.php, adding another option into changecolour.php, adding the relevant colour thumbnail into block_accessibility.php and styles.css?

Or is there other places needed to update too?

Average of ratings: -
Re: Finding current styles

Hi William,

To change the existing themes, you'll need to edit the theme in userstyles.css and at the top of module.js, then change the colour of the button in styles.css.

Adding additional buttons is a bit more complicated, you'd need to add additional buttons in block_accessibility.php, styling for the buttons in styles.css, styling for the theme in userstyles.css and module.js, then add support for additional theme numbers in changecolour.php

Average of ratings: -
Re: Finding current styles

Thanks Mark,

Missed off the .js file, but not a bad first look.

I'll see how I go with adding 1 or 2 (you may get some PM's though ;))

Cheers

Average of ratings: -
Re: Finding current styles

Actually, turns out that it was quite easy to find the bits that I needed to ad another 3 colour combinations.

Average of ratings: -
Re: Finding current styles

That's great to hear, would you consider publishing your version of the block on github so others can see how it's done?

Average of ratings: -
Re: Finding current styles

Sure if you point me in the right direction. I have already used gitorious. I take it's the same as that.

Average of ratings: -
Re: Finding current styles

Pretty much,

The accessiblity block's repository is at https://github.com/marxjohnson/moodle-block_accessibility

If you sign up for an account, create a fork of my respository (with the "Fork" button at the top of the page), then apply your changes to that fork (clone the fork's repository locally, apply your changes, commit, push), it would create a nice link between the original and the modified version.

Average of ratings: -