A Bluffer's Guide to Customising the 2016 Blackboard Theme

Hello everybody! How you doing? While you enjoy your lunch today we’re going to give you a presentation: “The Bluffers Guide to Customising the 2016 Blackboard theme” I’m Matthew Deeprose, I’m the VLE Manager at the University of Southampton, and I’m with Ester Mu├▒oz, from elearning media (you’ve probably seen her amazing posts on the Blackboard community site), and we’re ably assisted by my colleague Sam Cole who is a VLE specialist at the University of Southampton. So, why are we giving this talk? customising the 2016 theme is probably the most popular topic on the Blackboard community site right now, and a couple of months ago in a moment of desperation – asking for help from my fellow members of the community like Ester and Kevin, I said “Hey if you could help us to get something going – get something actually working, then I’d be very happy to give a talk at the TLC this year about customising the theme”, and as soon as I wrote up that message Ester messaged me and said “Hey I’ll help you out too”, so we’re gonna to do different parts as we go through the presentation and hopefully we’re going to be able to take you from knowing nothing necessarily about the theme to becoming an innovator with the 2016 theme. So there is lots of help and material on the community site but it can be quite difficult to make your way around and to find it and since we’ve been doing this, having started from scratch with no prior knowledge of customising the theme a couple of months ago this talk is aimed particularly at anyone who’s not sure how to get started or has gone to the 2016 theme but wants to know how to customise it. So we can show you four steps to take you from a bluffer to an innovator, including top tips from experts in their field from around the community site and by the end of this talk you should feel confident having a go at customising the 2016 theme! Now just a few bits of admin, this presentation contains some animations… if you are photosensitive please be aware that there will be things on the screen moving around and so on, so just please be aware of that Where we provide demonstrations we’re using the 2016 original theme with no customisations, so that later on you’ll be able to follow it back and do exactly what we’ve done in your environment and of course before making any changes take a backup, make sure you know what you’re doing and be prepared to do it in dev first etc. Now, everything that we cover today, including the slides, you can download from the website go.soton.ac.uk/bb that address appears at the bottom of almost every slide and I’ll be tweeting that later on as well, from there you can find lots of details Please save your questions until the end and be aware that this is the abridged version of the talk. We had so much content, and we really wanted to make it as useful as possible for everyone in the Blackboard community, that we really have put everything but the kitchen sink into this presentation. Where you see a green dot – it’s telling you that there will be more material available in the full version of the presentation online. So what is the 2016 theme? According to the Blackboard help pages here – It’s the modern version of the Blackboard user interface and it’s an optional theme that will give you an improved experience for mobile users. And there’s several important notices: that this is about the original experience not ultra courses, “Course Themes” will want to be supported in the 2016 theme and also buttons aren’t supported [in the course menus]. What are “Course Themes”? Who remembers these? For some they will be a distant memory, for some still have them. My favourite one is the one with the football. I also like the ECG one – it’s fantastic, and who doesn’t love these buttons? There are many instructors who still really like using these buttons [in the course menu]. But they are not supported in the 2016 theme. Now, at Southampton we had previously only used the GUI based configuration options for the theme so we try to avoid unnecessary complexity, and our customers, our instructors they were used to choosing their course

colours and so on, that’s very important to them. So we wanted to implement the 2016 theme based on that practice and you might have seen this slide before from an earlier Blackboard roadmap by the Q2 2018 / Q4 2018 development was expected to be roughly complete so we thought that’s the time [release] when we can go and start looking at that [using the 2016 theme] and in particular from Q2 2018 they announced that instructors would be able to choose their own course colours – which hadn’t previously been possible in the course menu [in the 2016 theme] and that administrators would be able to set the colour scheme using the the admin interface like you can do for 2012 theme Who’s using the 2016 theme? Put your hand up! So maybe about a quarter / third of the audience are using it. Okay! Fantastic! Now, I’m gonna hand over to Sam Hello! Can everyone hear me? Okay! Great! So looking at how we started… initially we didn’t actually want to really get involved in any of the CSS customisations. We’ve always just done whatever we can do through the the user interface but back in March the picture there shows Matt and I and another colleague from Southampton on “dress-down Friday” looking very frustrated because we found out there weren’t really enough changes that we could make to the colours that we wanted to make through the user interface Further, we found that there were certain design choices in the 2016 theme that we hadn’t really seen or weren’t familiar with from the 2012 theme. So the issue of having, (well it’s not an issue) but having purple everywhere didn’t really work for us – we didn’t want to have that. We also found that there were several problems, bugs, and other issues with the the 2016 theme that kind of made it inevitable to us that we would have to do some some customisations. So we were kind of pushed down that road anyway regardless of whether we wanted to make further changes. So some of the examples of what we’d call kind of the bugs or the issues. First of all if you’ve got a course menu with a white background we found that anyone who used subheaders, those sub headers were appearing in white and were effectively disappearing. In the middle we’ve got a course map which when you popped it out it had that that default kind of dark grey. I’m not sure what the exact name of that colour is but that dark grey of that theme renders the menu basically unusable. Further, in the mobile view if you’ve got a course name which is particularly long in your course menu it just doesn’t really look great it kind of doesn’t look like it’s meant to be that way. So these were some of the changes that we started thinking we’re going to want to change those things. Anyway we also found from looking at the community site and seeing what other people have done that you could also use CSS to make certain things better. One of the examples that we’ve come up with is… it was actually mentioned in Brent’s [Brent Mundy’s] talk yesterday about the the Grade Centre where you’ve got kind of almost over-the-top spacing on some of these rows. You’re only fitting six or seven rows of data in the the screenshot that we’ve got here and also the column headings up at the top aren’t really defined from the rest of the Grade Center but with a little bit of CSS change you can actually compress those [rows] down a bit and this is something that Brent said will will now be addressed [in a future release] Equally we’ve emboldened the column headings which just makes it all look a little bit better, a little bit clearer So if you’re using the 2016 theme have you customised it using CSS raise your hand! So again probably a similar number to to when Matt asked sounds like most people who are using it are also doing some CSS changes. Taking a bit of a step back, why did we actually want to switch to the 2016 theme in the first place? First of all we looked at our our usage. In the last academic year we had more than 60 combined years of usage of Blackboard by our staff and students and about 20% of that usage was on mobile or tablet devices. Generally I think that that kind of usage is only going to go up in the future and the 2016 theme being responsive probably means that those people are going to get a better experience than had we not moved to the 2016 theme So that was one of the key drivers for us moving over. So back in March our journey began with kind of looking at what we wanted to do and between then and now we’ve made 28 colour or layout changes, a few text formatting

changes and adding some “help text” text customisations and we’ve also tweaked some of the buttons and the graphics that you can tweak through CSS. So this really is going to be our guide on how we how we started doing that and how we progressed to not just taking what we saw in the community but maybe developing a little bit further. Of course we’re standing on the shoulders of giants and we wanted to particularly thank these giants of the Blackboard community who’ve been posting things up that have helped us a lot and throughout this presentation we’ll be telling you about particular people who’ve helped us out, where you can find their resources on the way So we really found that you really can “fake it until you make it” and this is our four step process to turn yourself from a bluffer to an innovator First of all you need to get your tools sorted and develop a proof of concept: Prove [to yourself] that you really can make a customised theme: just make one change upload it, see that it works and then you can take it from there. As soon as you’ve got proof of concept then you can use examples from the community theme gallery on the Blackboard community site. I’ll be showing you a bit of that. Then there’s the fantastic community fixes and issues list Many issues are resolved in that thread, [including] some of those examples that Sam showed you earlier. Once you’ve started using those you’ll gain confidence and you actually find that you’re able to start to innovate in the theme. We’ll be showing you one of the little things that we feel that we’ve innovated on based on the practices that we found on the community site – really standing on the shoulders of giants. The first step is to get your tools sorted and make a proof of concept. So the things that you need to have are all free. You need to have (well apart from your Blackboard installation – you need to have system administration access to) You need to have a browser we tended to use Firefox Something that you may not have heard of is the ‘Stylus’ browser add-on, which we will tell you about in a moment. You’ll need 7-zip or some kind of [file] compression tool, a text editor: [for example] notepad++, Ester was telling us that ‘Kate’ (KDE advanced text editor is really [a] useful [text editor] and you may also want if you look at the graphics and use something like Adobe Illustrator. Now you might not have heard of Stylus before it was recommended on the community site by Ian Goh and Kevin O’Connor and it allows you to test CSS customisations alive before you’ve actually uploaded any new theme to your Blackboard site. It allows for rapid prototyping and it’s very quick and easy to use and it’s free Here’s a demonstration: I’ve got Blackboard on the Left, Stylus on the right. I’ve just pasted in a CSS setting Let’s save it and enable it. It [the CSS snippet] sets the background colour and I can change that live using the colour picker [in Stylus] and instantly you can see how that’s going to look in my Blackboard installation So rather than compiling it [a theme] into the zip file, uploading it, changing the settings, setting it all up – you can very quickly take examples that you found on the community site plug them in via Stylus and instantly see, “Is this going to work? Could we fiddle around with it?” And this tool really allowed us to get going very quickly. So we really recommend that [tool] Also, some people might not be aware of what an actual theme file is. It’s just a zip file. It contains CSS files which affect the behavior and size of certain interface elements. There’ll be graphics fonts and properties files in there too And one important file – the theme.css file is the first, or one of the first files loaded by Blackboard and it points to lots of the other CSS files that are going to be used – you can place all of or almost all of your customisations in one single file that you’ve referenced in your theme.css file and usually we call that the mods.css file. So on the community site you might see people saying “oh, you add this to your mods.css it’ll do [fix] that.” So what you will need to do is you need to get the theme files from Blackboard, extract them, and then open the theme.css file, add a reference to a mods.css file. Create your mods.css file put in a customisation, zip [it all] up and upload to Blackboard. It really is simple and you can see more of this on the full presentation online. Download your Blackboard theme file – which you can

access through the admin panel. Save it then you want to extract it, just using your tools like 7-zip or winzip, and so on Find your theme.css file. Once you’ve opened that file create a reference to your mods.css file. And again you can see this in much more detail on the full version of the presentation online. Create that mods.css file (which is just like creating a ‘txt’ file and renaming it to dot css [.css] You could then add a simple bit of CSS that you’ve copied from the community site [for example] from the brilliant themes fixes and issues list, paste it in, save the file zip it up, and then you can upload that to your Blackboard installation. Which you will see just here. So you go in through the admin panel, brands and themes, first you upload the theme, so this is the theme catalog, you give it a name upload the file, select it, submit it Once you’ve done that you can then choose that you want to use this theme. So there you can see there’s the reference to it, once you apply it you’ll get a quick preview of how it’s going to look and once you’ve submitted it there you go, you can instantly see that that top bar colour has changed. Once you’ve got your proof of concept you know it’s going to work and you could be feeling like Skeletor here. You’re gonna be like, “Yeah I pretty much own the Tower of greyskull.” Next if you’ve done your proof of concept. Go on to the community site you can find the community theme gallery You’ve probably seen Szymon Machajewski on the community site, but you might not have seen this post. So he said that he really thinks it would be really cool and useful if people could upload examples of their themes. So that was a couple of years ago now and so far three institutions have uploaded a theme to the theme gallery. So we’ve got the Grand Valley State University theme uploaded by Colleen Cameron, the UIC learned theme by Szymon Machajewski, and the UC San Diego theme by Allison Czapracki. In the full version of the presentation you can find some more details about those We reached out to the people that had uploaded their themes and Colleen wrote us some fantastic tips which we thought we don’t really have time to go through them in the presentation now, but when you look at the full presentation online you can see some fantastic tips that Collen has added, so we would like to thank her very much! So has anyone actually looked at the theme gallery? Did you know it existed? Well now you do! It’s a brilliant example of the Blackboard community helping each other and on that note you probably saw Tim Atkin’s post “Pay it forward”? “share your insights ideas and innovations”? and in that spirit WE’RE ‘paying it forward’: This week we uploaded our custom theme into the theme gallery so you can download it, you can take the little bits that we’ve added, put them into Stylus, see how it would work with yours, and build upon it. …And because like these otters, isn’t it better to make your way holding hands when you go on a journey? So success! Having reviewed those themes, seen some examples, tested those settings that people have added, put them into Stylus, checked them out and loaded them into your own custom theme You’re really on your way to building the foundation of your theme. The next step is to look at the Community fixes list and some other materials Kevin O’Connor who is sat in front of us here from Trinity Collge Dublin back in 2018, just over a year ago Kevin started as thread where everyone could start to collate these various fixes that we’ve been finding and discussing on the community site. There are more than 48 fixes on there and a lot of great discussion. You can see this is the template that’s used for identifying [and reporting] those fixes. The majority of these fixes have been rated to have a severity level of medium or high. So if you’re going to go about customising your theme you really want to look at these because there’s some severe issues that you will need to fix you won’t want to go live without having fixed these issues. You can use a tool like Stylus to check how it works: “Am i affected by this issue?” “Maybe a recent upgrades resolved this” “Do I really need it?” So you can test it out there’s a document on Google Docs so you can download the whole set print it out, go through it with your team. While I was using that I also found as a lot of other great materials on the community

site and I started a collaborative links list which is also linked to from Kevin’s fantastic thread. So as I was going through the site I was just making a note of where all of the little extra guides were and putting in links because there’s thousands of posts on the community site and it can be a little bit hard to make your way. So I really recommend checking that out as well, and it’s collaborative so you can add further materials to it. Rodney Hargis who is a Senior Support Training Analyst at Princeton wrote a fantastic thread, we have a fantastic overview of how to go about [theme] customisation in the full presentation: we’ve broken that down by elements so you can look at it but I’d really recommend having a look at what Rodney’s written because it is a fantastic resource. There’s also a Blackboard slack workspace that has recently been announced in the community site: there is a dedicated 2016 theme [slack] channel. The site is for Blackboard admins and developers. Who has posted to the community site about the Blackboard theme? Kevin you could put your hand up too ­čÖé So a lot to people but I know what you’re going to want to do when you get back to your institutions, you’re gonna be on that site looking at those fixes, finding some better improvements, posting them up on the community; coming together in the spirit of Awesomeness. Ester has written some AMAZING blog posts that cover details of some specific elements of theme development. We’re going to hand over to Ester now to give you a bit of the in-depth science about the CSS and customisation Hello! So for today what I thought was to explain you a little bit about how CSS works – it’s important you know how it works if you’re going to start playing with it CSS is a Cascading Style Sheet. That means that whatever is loaded last will prevail over whatever is loaded before. You can always add !important it’s there [on the slide] but it’s a bit complicated to start pulling backwards if you use it too much so it’s to use with care when needed but not too much, and then the more specific rules you do, the more they will they will prevail over the not so specific ones. So that’s also important if there is something that you cannot change, something that you have already identified, you can always just add one more specificity level so that it will always be winning, like your rule will win. Then I put there a picture real nice picture that Matt had found with the anatomy of the CSS rule where you can see a selector property and a value. What we are changing are the values and that’s what you need to do those pieces of code is what you need to work with when you make your modifications. Again if you use any code please test it like a million times before putting it in a production server I have prepared three parts that I think make a really big improvement into into the theme. “A big impact with a small work”: The top bar, the modules pages and the course menu. Those three pieces are very much wanted to be modified and it’s quite simple once you understand how they are built. So the top bar – it’s a collection of ‘DIVs’. There is a big ‘DIV’ on the top that has several layers inside other ‘DIVs’. If we want to modify it we need to work with all the layers we need to make different pieces work together – sometimes it’s going to mean that we need to make something transparent to be able to see what’s under[neath]. There is a couple of examples: on the top we have something that has turned completely red, the one down is a picture but it also has a green bar and a semi-transparent picture on top of it so that you can see a little bit blurred All this code you can check later. I like using the the bottom layer to put a picture or a colour and then work with the other layers to give some effects – to add images or or logos or or some other interesting things. We can change the tabs and the logo. Also it’s really simple: you can move it a little bit more inside so it’s not so connected to the corner or to the top. And we can do really nice things with the tabs at for example down there it’s grey and when you hover over it it it turns into that sand colour. Then we go to the responsive

version, that’s a bit of a game: the logo disappears completely when you go to responsive. So what you can do is to add it to this global-navbar-wrap so it will show in the top Some of the things we can do: (these are just for playing for example) You can do a bigger avatar, you can add a test text on the top that says “staging server”, “test server”, so that you know where you’re working. Sometimes if you’re developing you don’t know where you are working anymore by looking at the machines, at the pages, so it’s it’s nice to put that sort of text You can remove the shadows if you don’t like the shadow that shows over the “My Blackboard” flyout or the logout button You can remove those shadows so it will look a lot more plain With the modules you can do many things. Again the background of the page is a container, there’s different levels, so you could even use a background really, really on the back, and then have one area that shows white where the text will go. And then every one of those modules is built out of three parts: the portlet is the complete module, h2 will be the top part, and collapsible is the part where is the information that goes into the module. So we can work the backgrounds, by using for example, one with a background colour or a background image, a location pane then content will turn a little square in that in white. And then we can play with the modules – to make them bigger, to make them have a shadow and not a border, you can run their corners and I got a petition [request] for the My Courses module to be modified so that there would be a little indentation in the courses names and that triangle. And the course menu which originally was dark grey with a white text that turns into violet when is hovered [over], it’s a bit of a… quite a big structure again, we have again many many levels that you have to work with to change backgrounds and to change colours The top has the action bar and then in the bottom you have that button for the Quick Enroll. That’s part of the Control Panel down the students don’t see it but the teachers do, so it’s also nice to personalise it You can change the Control Panel colour by working with “menuWrap”. The navigation panel you will have to play with different different levels of DIVs, and the actionBarMicro is going to control what colour is the action bar at the top [of the course menu], the little buttons up there. You can also change the buttons so that they are the same colour like the background and even change the pictures in there The Puller! The puller is something everybody has been a bit complaining about because when you hide the menu, and especially since the menu hides by itself [at less than] 1024 pixels, for some people it is quite complicated to find. You can change the colour in there it is painted in red. Nowadays in the responsive version it’s a ball – it’s a circle – with the arrow, so it’s a bit better than what it was before. And then I made a modified version shaped as a button that you can see how it works on the back, and Matt here has made a modified version of that where it blinks in red so it’s easier to see that the button is there. It was great! So we can change the links, we can change the Quick Enrol, we can change the subheaders of the titles, the title, the course title, you can work every one of those. By the way every change that you see here in a code corresponds to the picture that is on its side And these are some examples of my clients that have decided (I work for one of the partners so I have handled many many Blackboard Learns, and I’ve been doing modifications and personalisations for our clients) so these are some of our clients that have kindly agreed to allow me to show this one. So this is University of Seville, and they wanted to have that logo there and the big picture on the back which has a grey shadow on top, which is built in two layers. The logo is in the third layer with that Ense├▒anza Virtual [Virtual Learning] text, and then the tabs are in two different colours. Also the modules have been modified to have a little bit bigger text as a title, and I think they look really, really clean somehow

Escuela de Organizaci├│n Industrial [EOI Business School] Again we have three layers on the top that have been modified. One has the picture, the other one has the whitish transparent background, and then we have a green area up there on the top The modules have been rounded Universidad de Navarra [University of Navarra] Again two levels, the black one on the top, I mean there are two different parts – that the image is in one layer and the black part is in a different one. They are using the square button for “The Puller” Fundaci├│n Laboral de la Construcci├│n, they wanted a shadow there to divide the top from the bottom and a big image These are the responsive versions of two of them, the one there is University of Seville again so now we see the logo there on the top in the red bar. These universities only use red and white so we just changed everything red U-Tad [U-tad Centro Universitario de Tecnolog├şa y Arte Digital ] In blues with the logo pushed to the side and more down and a blue menu. Okay so moving on… Success! At this point we’re at stage where we could continue building our theme using primarily examples from from the community, and we’re kind of resolving all of these bugs and the other annoying issues and again primarily copying and pasting stuff that other people had already done and then putting it in Stylus, testing it and using it in our own environment. We also then knew the right places to write, to ask questions of the people that would know the answers to the things that we were still struggling with. At that point we thought what can we then start innovating – to make something that’s more our own theme, that fits what we want to do at Southampton. The first way that we started using that, and again bearing in mind that I know some people in the audience are kind of like CSS gods who would be doing some of this stuff in their sleep, Matt and I had never done CSS before and we found that the the quickest, easiest way to start finding stuff out was using this “Inspect element” tool. So Inspect Element is just an option in most browsers where you can look at the HTML and the CSS of the the web browser, sorry the web content, the web page that you’re on and you can effect changes to that up until the point at which you refresh the page It’s a really useful tool to actually identify the various specific elements in the CSS that you want to change So within a page if you’re on a web page you can right click anywhere on that web page, so for instance maybe on a button that you want to change the colour of, you can right click and choose inspect element and it works best if you’ve got two monitors where you can have on one screen you can have your web page, on the other screen you can have your inspect element, and you’ll get this at first this slightly confusing looking screen with lots of code on it but the key bit is that you can really then start to pick out individual elements on that webpage to see what the associated CSS is and again using the example that Matt used earlier about changing the colour you can start just dragging that colour around to see how that affects the specific element that you’re working with. So you can see here we’ve got that that tools module, we’re then looking at that specific bits of CSS, and this is because we’re only doing this up until the point at which we refresh that page we can then copy that bit of code, put it into Stylus and start developing it more to the point where it exists past the point where you refresh the page. So this was the, kind of the, really quick and dirty way of getting into the CSS and then moving it into Stylus afterwards We also wanted to look at doing something with some of the graphics and some of the buttons in the in the theme. One of the things that was identified I think on the community site was the the buttons that you see at the top of the course menu (I appreciate that this is slightly zoomed in so it’s going to look slightly blurry anyway) but we felt that the the default buttons that you had didn’t really look that clear and especially things like the ‘add menu item’ button over on the left there it’s kind of the plus symbol with a circle around it – we felt that that could be clearer and looking into it we saw that that was just a simple PNG file. So it’s a big PNG file with a range of different icons within it. By taking a copy of that and then putting it into something like Adobe Illustrator we could then create our own version of those icons

some of them you can see I’ve just blatantly ripped off and copied the original Blackboard ones. But there were some like the ‘add menu item’ where I decided we can we can just make that plus symbol a little bit bigger. The red grid that you see is just a grid in Illustrator that dictates the size of each of those buttons which is 16 pixels by 16 pixels. On the end there we’ve added a couple of new icons so with this PNG you can make it as long as you want and just keep adding different graphics that you can then reference in your CSS So we found the bit of CSS which references that PNG for the various different buttons you might want to change and we noticed that by fiddling with the the number you can start shifting which image within that larger PNG it shows. (And I do have to say that we’re not really using a smiley face as our course map button) but we found that by moving it across to 256 pixels we can have the standard one being the smiley face and then when we hover over it it turns to the the lower part of the image so you can see the lower half of that PNG is like the roll over button that you get. So that’s how we went about actually changing some of those icons. So has anyone else customised their Blackboard icons? Good! So a few people… We then started looking at and building on what other people had done. I’ll go through these quite quickly because Ester’s already already touched on some of these so we’ve got the the puller that hides and shows the course menu we had loads of tickets from students where that had automatically hidden that menu and they couldn’t for the life of them work out how to get it back. So they were raising tickets saying ‘all I’ve got is my announcements I can’t see any other content’ Ester of course has she’s already said made a great little ‘puller’ where she’s moved it up to the top of that menu, and we then went one step further than that – we tried to kind of change what Ester had done to make it work better for Southampton. So he kept it fairly innocuous, a fairly bland shade of kind of cream so that it’s not obvious when you don’t particularly need to use it – but if you happen to be on a smaller screen or you’ve resized your window and the course menu hides it then just pulses every four seconds in red. So there’s the student or the member of staff is always thinking, “what what’s that red thing up there? That’s that’s how I make that menu pop back out again”. So that’s great Using inspect element and doing some further investigation you can find all sorts of tweaks that maybe the community hasn’t yet and maybe things that you just want to do for yourself. But you’ve got the limits of your own time that you’ve got available: we’re doing our upgrade in June so we’ve got kind of deadlines that we need to meet and you’ve also got obviously your design skills, the bugs that you have to work with, that are in the existing theme, and of course your patience. The downsides: it’d be great if we didn’t have to spend time fixing those bugs in the first place and we could concentrate on the basic design stuff that we want to do. Also the kind of butterfly effect of making a change in one place and then maybe a day later you’re you’re testing something else and you find that the button has changed in a completely different part of Blackboard because it’s linked to the same bit of code as the button you changed yesterday – and of course every time there’s an upgrade you need to review your customisations and there’s the potential you’re making a lot more work yourself into the future Okay! Over to Matt! So what are some remaining issues that we’ve not been able to fix that we hope that Blackboard will fix soon, because we’re continuing on our journey – it’s endless, we just keep driving forwards. So there’s more details in the full version of the presentation. The ‘cog’ doesn’t work in mobile view. You have to flip to portrait mode or to landscape and then it will start working. When you have a multiple choice question in mobile view the possible answers are out of line with the the answers – the radio buttons aren’t in line with the text Some people have posted up their fixes [for this issue] but none of them will work for us When you have a lot of content in a content area and you have scrolled down the screen, when you pull out the menu in mobile for you, you just get nothing you have to go up to see the menu… so the button to reveal the menu is always present, but if you’ve got a lot of content and you’re at the bottom of the screen when you press the the icon to bring the menu out there’s nothing there “Why would we go live with that?” but we haven’t been able to fix it yet so we

really hope that we can find a fix Because this is the kind of thing where when our students and staff start using they will think “Why are you inflicting this on us? What’s that all about? What’s going on?” I don’t know, so we really want to fix that. We’ve also got a few implementation tips that we’ve you can find more details of on the full version [of the presentation] but when you implement the new theme you’ll probably want to reset all of your course colours so that anyone that’s been using ‘course themes’ previously [their course] can be gracefully reset to a standard which they can then choose the colours that they want because. You’ll also want to disable the old ‘course themes’ option and you probably want to prevent instructors from being able to select buttons [in their course menu] because it’s still possible to select them but it won’t work, so you’ll want to hide that. You can use CSS to hide that option. In conclusion you really can ‘fake it until you make it’: Get your tools ready, make a proof of concept, use the theme gallery, have a look at our theme that we’ve uploaded, rip it off blatantly change your colours and padding make it look good for you, review the fixes list, keep posting back your questions, your tips, and stand on the shoulders of giants. As you gain confidence once you get started you really find, “actually yeah I can do this” I often, we don’t quite know what the code means but we can see what it does we can see what happens when we change the variables in Stylus, so we’ve been able to develop this from nothing in the space of two months. So this is just one example: this is a course in the 2012 theme, this is that same course with the default 2016 theme, and this is how we’ve got things looking now: a bit cleaner, bit less space up here, a little bit of drop shadow so the menu comes out, got our adjusted ‘puller’ and so on. So that although our our customers won’t really see all the effort that’s gone into this they would certainly be telling us about it if we’d just gone live with the default settings! So I just like to thank these colleagues from Blackboard who have helped make this talk possible. So to Sheryn, Alistair, to Nathan, to Andy and particularly to Emmah she has really helped us out to organise this talk. You can continue the conversation we’ve gotta thread about the talk on the community site, you can also find the presentation online, there’s lots of info on that page you can find all of the links, so you can find all of the things that we’ve talked about both the full version and the abridged version of this presentation. I’m not sure what the time is, whether we’ve got any time for questions but does anyone want to throw any questions out there? Minds blown!?! Yes yes, so the question was “What about the ultra theme?” So this was about the original experience but brilliant that you should ask that question because Ester I don’t know if it’s okay, if I asked you to mention this idea that Ester had been having about something to do on the community site… So would you mind if I ask you to talk about that? Yeah we were thinking this morning because at the moment with Ultra you can choose the coordinating colour and that’s about it in terms of colours that you can modify, and I was thinking it would be great if we could get some sort of form where to add “this is grey the the dark grey menu so add your colour” “this is the violet put your colour your colour code” – three four colours that I use in ultra and be able to change all of those save them and have them in Ultra. Just in colours I don’t think it makes much sense to change anything else because the idea with Ultra is that it works in every device and if we start changing paddings and margins and buttons and this and that – then there’s going to be really awful things floating around on the net. But at least the colours I think would be great and in a way that when you change the violet to red it’s going to be changed in every single place where the violet is visible. So I’m going to post it about that in the community and I would really love it if everyone has ideas about that thing and there may be somebody listens, now that there’s so many of them [Blackboard staff in the crowd and surrounding area] Do we have time for another question? No, well you can find all of the materials online at http://go.soton.ac.uk/bb both the full and abridged versions of this presentation, and in the spirit of the otters I’d like to say thank you for your patience, spending the lunch time with us. Check out the community site and enjoy the rest of your conference! Thank You! [Raptuous Applause]