<div dir="ltr"><div><div><div><div><div><div>Hi! :)<br><br></div>My sketch does not really change anything other than appearance; what can be done through CSS. Maybe also some js/jquery for the on/off buttons at the bottom middle, depending on how they are implemented. <br><br>The
only major change I propose, is moving the Save/Play/Publish buttons to
a more intuitive position, which in the sketch displays the "power"
these buttons are in possesion of. This also creates more tidy workspace in the main column. But this also is just CSS styling and placement. <br><br></div>Other changes that I focus on are (inspired by <a href="http://getuikit.com">getuikit.com</a>): <br></div><ul><li>Use of an elegant and easy-to-read font (From Google Fonts or similar)</li><li>Applying more margin/padding so the page feels "airy"</li><li>Simple, elegant icons using icon-font instead of images:</li><ul><li><a href="http://fortawesome.github.io/Font-Awesome/">http://fortawesome.github.io/Font-Awesome/</a> </li></ul><li>Using button-icons instead of text at the most obvious functions like Insert, Copy and Delete in the left coloumn. </li></ul></div></div></div><div><br></div><div><br></div><div>As this is just a way of CSS-styling, my suggestions for design should not at all interfer with your changes in functionality. It just gives some ideas on how things can look. :)<br><br><br></div><div>Feel free to comment/criticise! <br></div><div><br></div><br><br>Mvh Jens Magnus<br><br><div><div><br></div><div><br></div></div></div><div class="gmail_extra"><br><div class="gmail_quote">2014-11-25 16:41 GMT+01:00 Smith, Bradley <span dir="ltr"><<a href="mailto:brsmith@akamai.com" target="_blank">brsmith@akamai.com</a>></span>:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div style="word-wrap:break-word;color:rgb(0,0,0);font-size:14px;font-family:Calibri,sans-serif">
<div>Unfortunately I have a work deadline that is going to keep me from being able to contribute anything more than ideas and mockups until some time in December, most likely. :(</div>
<div><br>
</div>
<div>—Brad</div>
<div><br>
</div>
<span>
<div style="font-family:Calibri;font-size:11pt;text-align:left;color:black;BORDER-BOTTOM:medium none;BORDER-LEFT:medium none;PADDING-BOTTOM:0in;PADDING-LEFT:0in;PADDING-RIGHT:0in;BORDER-TOP:#b5c4df 1pt solid;BORDER-RIGHT:medium none;PADDING-TOP:3pt">
<span style="font-weight:bold">From: </span>Inge Donkervoort 12Change <<a href="mailto:i.donkervoort@12change.eu" target="_blank">i.donkervoort@12change.eu</a>><br>
<span style="font-weight:bold">Organization: </span>12Change<br>
<span style="font-weight:bold">Reply-To: </span>For Xerte technical developers <<a href="mailto:xerte-dev@lists.nottingham.ac.uk" target="_blank">xerte-dev@lists.nottingham.ac.uk</a>><br>
<span style="font-weight:bold">Date: </span>Tuesday, November 25, 2014 at 10:26 AM<br>
<span style="font-weight:bold">To: </span>"<a href="mailto:xerte-dev@lists.nottingham.ac.uk" target="_blank">xerte-dev@lists.nottingham.ac.uk</a>" <<a href="mailto:xerte-dev@lists.nottingham.ac.uk" target="_blank">xerte-dev@lists.nottingham.ac.uk</a>><br>
<span style="font-weight:bold">Subject: </span>[Xerte-dev] Re: Design editor<br>
</div>
<div><br>
</div>
<div>
<div text="#000066" bgcolor="#FFFFFF">
<div><font size="-1">No it doesn't, so your ideas for the insert page are stil very welcome.<br>
Are you working on that?<br>
<br>
</font>
<div><font face="Arial" size="+1"><font color="#a0cf67">1</font><font color="#00aeef"> 2</font><font color="#d71720"> Change</font></font><br>
<font face="Calibri" size="-1"><br>
Chopinlaan 27<br>
5242 HM Rosmalen<br>
T 073-5226195<br>
M 06-50267104<br>
F 073-5226196<br>
E <a href="mailto:i.donkervoort@12change.eu" target="_blank">i.donkervoort@12change.eu</a><br>
I <a href="http://www.12change.eu" target="_blank">www.12change.eu</a> <br>
<br>
T <a href="http://twitter.com/12ChangeLearn" target="_blank">twitter</a><br>
L <a href="http://nl.linkedin.com/pub/inge-donkervoort/7/4b/18a" target="_blank">linkedIn</a></font></div>
Smith, Bradley schreef op 25-11-2014 16:23:<br>
</div>
<blockquote type="cite">
<div>Yeah, the stylesheet is lovely. Nicely done.</div>
<div><br>
</div>
<div>Does this change anything functionally/structurally, though? Or would this be separate from things like fixing the way the Insert menu works?</div>
<div><br>
</div>
<div>—Brad</div>
<div><br>
</div>
<span>
<div style="font-family:Calibri;font-size:11pt;text-align:left;color:black;BORDER-BOTTOM:medium none;BORDER-LEFT:medium none;PADDING-BOTTOM:0in;PADDING-LEFT:0in;PADDING-RIGHT:0in;BORDER-TOP:#b5c4df 1pt solid;BORDER-RIGHT:medium none;PADDING-TOP:3pt">
<span style="font-weight:bold">From: </span>Julian Tenney <<a href="mailto:Julian.Tenney@nottingham.ac.uk" target="_blank">Julian.Tenney@nottingham.ac.uk</a>><br>
<span style="font-weight:bold">Reply-To: </span>For Xerte technical developers <<a href="mailto:xerte-dev@lists.nottingham.ac.uk" target="_blank">xerte-dev@lists.nottingham.ac.uk</a>><br>
<span style="font-weight:bold">Date: </span>Tuesday, November 25, 2014 at 8:59 AM<br>
<span style="font-weight:bold">To: </span>For Xerte technical developers <<a href="mailto:xerte-dev@lists.nottingham.ac.uk" target="_blank">xerte-dev@lists.nottingham.ac.uk</a>><br>
<span style="font-weight:bold">Subject: </span>[Xerte-dev] Re: Design editor<br>
</div>
<div><br>
</div>
<div>
<div bgcolor="white" link="blue" vlink="purple" lang="EN-GB">
<div>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)">I think so too, really nice.<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)"><u></u> <u></u></span></p>
<div>
<div style="border:none;border-top:solid #b5c4df 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif;color:windowtext" lang="EN-US">From:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif;color:windowtext" lang="EN-US"><a href="mailto:xerte-dev-bounces@lists.nottingham.ac.uk" target="_blank">
xerte-dev-bounces@lists.nottingham.ac.uk</a> [<a href="mailto:xerte-dev-bounces@lists.nottingham.ac.uk" target="_blank">mailto:xerte-dev-bounces@lists.nottingham.ac.uk</a>]
<b>On Behalf Of </b>Ron Mitchell<br>
<b>Sent:</b> 25 November 2014 13:56<br>
<b>To:</b> 'For Xerte technical developers'<br>
<b>Subject:</b> [Xerte-dev] Re: Design editor<u></u><u></u></span></p>
</div>
</div>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)">That looks great to me!<u></u><u></u></span></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)"><u></u> <u></u></span></p>
<div>
<div style="border:none;border-top:solid #b5c4df 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif;color:windowtext" lang="EN-US">From:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif;color:windowtext" lang="EN-US"><a href="mailto:xerte-dev-bounces@lists.nottingham.ac.uk" target="_blank">xerte-dev-bounces@lists.nottingham.ac.uk</a>
[<a href="mailto:xerte-dev-bounces@lists.nottingham.ac.uk" target="_blank">mailto:xerte-dev-bounces@lists.nottingham.ac.uk</a>]
<b>On Behalf Of </b>Inge Donkervoort 12Change<br>
<b>Sent:</b> 25 November 2014 12:28<br>
<b>To:</b> For Xerte technical developers<br>
<b>Subject:</b> [Xerte-dev] Design editor<u></u><u></u></span></p>
</div>
</div>
<p class="MsoNormal"><u></u> <u></u></p>
<div>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span style="font-size:10.0pt">Hi all,<br>
<br>
One of our Norwegian users Jens Magnus Jensen made an example for a new design of the editor. Is this something he can go on with? Any suggestions?<br>
</span><br>
<span style="font-size:10.0pt"><br>
<br>
Bye,<br>
Inge</span><u></u><u></u></p>
<div>
<p class="MsoNormal"><span style="font-size:13.5pt;font-family:Arial,sans-serif;color:rgb(160,207,103)">1</span><span style="font-size:13.5pt;font-family:Arial,sans-serif;color:rgb(0,174,239)"> 2</span><span style="font-size:13.5pt;font-family:Arial,sans-serif;color:rgb(215,23,32)">
Change</span><br>
<span style="font-size:10pt;font-family:Calibri,sans-serif"><br>
Chopinlaan 27<br>
5242 HM Rosmalen<br>
T 073-5226195<br>
M 06-50267104<br>
F 073-5226196<br>
E <a href="mailto:i.donkervoort@12change.eu" target="_blank">i.donkervoort@12change.eu</a><br>
I <a href="http://www.12change.eu" target="_blank">www.12change.eu</a> <br>
<br>
T <a href="http://twitter.com/12ChangeLearn" target="_blank">twitter</a><br>
L <a href="http://nl.linkedin.com/pub/inge-donkervoort/7/4b/18a" target="_blank">
linkedIn</a></span><u></u><u></u></p>
</div>
<p class="MsoNormal">Julian Tenney schreef op 25-11-2014 10:26:<u></u><u></u></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)">A custom interface is a legacy from the old flash runtime, where you could use a swf as a custom interface: that swf could then call the navigation
methods in the main engine.</span><u></u><u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)"> </span><u></u><u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)">I’m not so close to the html5 runtime, Fay will give you a better answer tomorrow: try overriding with !important in css?</span><u></u><u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)"> </span><u></u><u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)">Otherwise extend the code in the template to handle an optional property for layout?</span><u></u><u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)"> </span><u></u><u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)">J</span><u></u><u></u></p>
<p class="MsoNormal"><span style="font-size:11pt;font-family:Calibri,sans-serif;color:rgb(31,73,125)"> </span><u></u><u></u></p>
<div>
<div style="border:none;border-top:solid #b5c4df 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span style="font-size:10pt;font-family:Tahoma,sans-serif" lang="EN-US">From:</span></b><span style="font-size:10pt;font-family:Tahoma,sans-serif" lang="EN-US"><a href="mailto:xerte-dev-bounces@lists.nottingham.ac.uk" target="_blank">xerte-dev-bounces@lists.nottingham.ac.uk</a>
[<a href="mailto:xerte-dev-bounces@lists.nottingham.ac.uk" target="_blank">mailto:xerte-dev-bounces@lists.nottingham.ac.uk</a>]
<b>On Behalf Of </b>Smith, Bradley<br>
<b>Sent:</b> 24 November 2014 23:15<br>
<b>To:</b> For Xerte technical developers<br>
<b>Subject:</b> [Xerte-dev] Custom layout for questions?</span><u></u><u></u></p>
</div>
</div>
<p class="MsoNormal"> <u></u><u></u></p>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">Hello all,</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">Not sure if this is better send to xerte or xerte-dev, but I’ll try the latter first.</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">Personally, I’m not a fan of the two-column sort of layout that Xerte seems to prefer for questions. Often, both my questions and answers may include unix
commands, screen shots, and other things that take up a lot of horizontal space. What I would like to have is a “vertical” layout that just shows the instruction/prompt (when you only have one question, I’m unclear why you would distinguish between these anyway),
followed by the answer options, each taking up 100% of the page’s width. </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">The closest I’ve gotten to this is to set the Panel Width setting to “full”, and put the instruction and prompt text both in the Prompt box . However, the
prompt is rendered as an H3 tag, so the whole question appears bolded. This causes problems with text-heavy questions where I need more variety in the formatting. </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">I noticed an option to include a custom stylesheet with a learning object, so I uploaded one with:</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">h3.question {</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> font-weight: normal;</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">}</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">When I load the preview, my browser’s dev tools show that the stylesheet is loaded by something, but there is no change to the formatting of the question.</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">So my question is: what’s the best way to do what I want here? I see there’s also an option to upload a “custom interface”, but that only seems to be available
at the the learning object level (as opposed to a specific component like a question), and I haven’t seen any docs that explain exactly how to make one anyway.</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black"> </span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">Suggestions?</span><u></u><u></u></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:10.5pt;font-family:Calibri,sans-serif;color:black">—Brad</span><u></u><u></u></p>
</div>
<pre><u></u> <u></u></pre>
<pre><u></u> <u></u></pre>
<pre>This message and any attachment are intended solely for the addressee and may contain confidential information. If you have received this message in error, please send it back to me, and immediately delete it. Please do not use, copy or disclose the information contained in this message or in any attachment. Any views or opinions expressed by the author of this email do not necessarily reflect the views of the University of Nottingham.<u></u><u></u></pre>
<pre><u></u> <u></u></pre>
<pre>This message has been checked for viruses but the contents of an attachment may still contain software viruses which could damage your computer system, you are advised to perform your own checks. Email communications with the University of Nottingham may be monitored as permitted by UK legislation.<u></u><u></u></pre>
<p class="MsoNormal" style="margin-bottom:12.0pt"><br>
<br>
<u></u><u></u></p>
<pre>_______________________________________________<u></u><u></u></pre>
<pre>Xerte-dev mailing list<u></u><u></u></pre>
<pre><a href="mailto:Xerte-dev@lists.nottingham.ac.uk" target="_blank">Xerte-dev@lists.nottingham.ac.uk</a><u></u><u></u></pre>
<pre><a href="http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev" target="_blank">http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev</a><u></u><u></u></pre>
</blockquote>
<p class="MsoNormal"><u></u> <u></u></p>
<pre><u></u> <u></u></pre>
<pre><u></u> <u></u></pre>
<pre><u></u> <u></u></pre>
<pre>This message and any attachment are intended solely for the addressee and may contain confidential information. If you have received this message in error, please send it back to me, and immediately delete it. Please do not use, copy or disclose the information contained in this message or in any attachment. Any views or opinions expressed by the author of this email do not necessarily reflect the views of the University of Nottingham.<u></u><u></u></pre>
<pre><u></u> <u></u></pre>
<pre>This message has been checked for viruses but the contents of an attachment may still contain software viruses which could damage your computer system, you are advised to perform your own checks. Email communications with the University of Nottingham may be monitored as permitted by UK legislation.<u></u><u></u></pre>
</div>
<pre>This message and any attachment are intended solely for the addressee and may contain confidential information. If you have received this message in error, please send it back to me, and immediately delete it. Please do not use, copy or disclose the information contained in this message or in any attachment. Any views or opinions expressed by the author of this email do not necessarily reflect the views of the University of Nottingham.
This message has been checked for viruses but the contents of an attachment may still contain software viruses which could damage your computer system, you are advised to perform your own checks. Email communications with the University of Nottingham may be monitored as permitted by UK legislation.
</pre>
</div>
</div>
</span>
<pre>This message and any attachment are intended solely for the addressee and may contain confidential information. If you have received this message in error, please send it back to me, and immediately delete it. Please do not use, copy or disclose the information contained in this message or in any attachment. Any views or opinions expressed by the author of this email do not necessarily reflect the views of the University of Nottingham.
This message has been checked for viruses but the contents of an attachment may still contain software viruses which could damage your computer system, you are advised to perform your own checks. Email communications with the University of Nottingham may be monitored as permitted by UK legislation.
</pre>
<br>
<fieldset></fieldset> <br>
<pre>_______________________________________________
Xerte-dev mailing list
<a href="mailto:Xerte-dev@lists.nottingham.ac.uk" target="_blank">Xerte-dev@lists.nottingham.ac.uk</a><a href="http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev" target="_blank">http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev</a></pre>
</blockquote>
<br>
<pre>This message and any attachment are intended solely for the addressee and may contain confidential information. If you have received this message in error, please send it back to me, and immediately delete it. Please do not use, copy or disclose the information contained in this message or in any attachment. Any views or opinions expressed by the author of this email do not necessarily reflect the views of the University of Nottingham.
This message has been checked for viruses but the contents of an attachment may still contain software viruses which could damage your computer system, you are advised to perform your own checks. Email communications with the University of Nottingham may be monitored as permitted by UK legislation.
</pre>
</div>
</div>
</span>
<pre>
This message and any attachment are intended solely for the addressee and may contain confidential information. If you have received this message in error, please send it back to me, and immediately delete it. Please do not use, copy or disclose the information contained in this message or in any attachment. Any views or opinions expressed by the author of this email do not necessarily reflect the views of the University of Nottingham.
This message has been checked for viruses but the contents of an attachment may still contain software viruses which could damage your computer system, you are advised to perform your own checks. Email communications with the University of Nottingham may be monitored as permitted by UK legislation.
</pre></div>
<br>_______________________________________________<br>
Xerte-dev mailing list<br>
<a href="mailto:Xerte-dev@lists.nottingham.ac.uk">Xerte-dev@lists.nottingham.ac.uk</a><br>
<a href="http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev" target="_blank">http://lists.nottingham.ac.uk/mailman/listinfo/xerte-dev</a><br>
<br></blockquote></div><br></div>