Skip to content

Diagnosing Issues

Jump to bottom
Tim Klapdor edited this page Nov 29, 2017 · 4 revisions

Diagnosing problems in the new theme may seem tricky but there are a few methods and tools that can really help.

Is it the Browser?

Check to see what browser is being use. Internet Explorer is no longer a supported browser - so is not longer being maintained and it's out of date. The new theme should be fine in all modern browsers - Chrome, Firefox, Edge and Safari - so make sure that the browser is one of those. Make sure it's up to date. If the browser is one of the listed above and up to date and the problem is still persistant move on to the next step.

Browser Developer Tools

Modern Browsers come with a range of tools that allow you to see and manipulate code in a non-destructive way. They allow you to identify and diagnose problems before getting into the nitty gritty of editing code.

To turn on Developer Tools:

  • Chrome: View ➤ Developer ➤ Developer Tools.
  • Firefox: Menu ➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools.

Once enabled a new panel will appear in the browser - on the left you'll see the HTML of the page and on the right the CSS being applied. You can use the selector tool to highlight the section of the page to find the source of the problem. Once you've found the source you can edit the HTML to test various solutions - deleting set widths, inline styles or problem HTML tags. And doing it in the Developer Tools means it's not destructive - you're not changing the content in Interact2 - just what is being displayed in the Browser. This quick video shows how you can use the tool (shown using Chrome).

IMAGE ALT TEXT HERE

Re-apply the code

For videos and embedded content try going to the original source and copy the embed code from there and paste into Blackboard. YouTube and other services occasionally update their embed code and so the reason may stem from just old code. This may apply to other embedded content too - so go to the source and copy over the source embed code again.

It's happening everywhere

Small issues may exist across a whole subject and effect content throughout the subject. So while the issue might be small the scale makes it quite a big problem. In circumstance like this there are two possible ways forward:

  1. Check to see if the problem can be resolved using CSS. If the issue is how content is being displayed it might be possible to add a new piece of CSS to the theme that can target and fix this issue. In these circumstance use GitHub to create an issue.
  2. If the problem is HTML code - well this is where it gets more difficult. If the problem is inline styles, then they can be removed using CSSout. If the problem is rogue HTML code - like extra <span>, <p>, or <br> tags then you can use a tool like HTML Cleaner. If the problem is more about how the HTML is structured - issues with table layouts etc - then you coulld use an external HTML editor like Dreamweaver or Atom. Why use these tools?
  • better find and replace - often this is the easy way to fix problems
  • shortcuts - Atom has a range of shortcuts that can really simplify editing HTML - like the Select Same Words.
  • work offline - you can work offline and not in Blackboard so save your files locally or to the S drive and do a copy and paste in once the work is finished
  • easier to view - a tool like Atom marks up the code and indents it so you can see what's what on the screen better - which the plain text view in Interact2 doesn't let you do.
Clone this wiki locally