Moodle
  1. Moodle
  2. MDL-35048

Formal White Theme does not display paragraphs correctly in forum posts

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.3.1, 2.4
    • Fix Version/s: 2.3.2
    • Component/s: Themes
    • Labels:
    • Rank:
      43661

      Description

      I switched to Formal White theme.

      It is making double carriage returns appear as single ones, so paragraphs in html pages are no-longer separate.

      Paragraphs now appear stuck together like this.
      Paragraphs now appear stuck together like this.
      Paragraphs now appear stuck together like this.

      ...instead of how they used to:

      Like this.

      Like this.

      Like this.

      Perhaps this is a problem with the way Formal White is interpreting html <p> tags rather than <br> tags.

      • The only way I have been able to fix this is to type multiple return carriage returns between paragraphs using TinyMCE or just hitting return key for text in Moodle's Book module. Sometimes two return key strokes will do the trick, sometimes it needs three or four - there is an inconsistency in result. This is particularly a problem with text in the new Moodle Book module. Before, I had been using Magazine theme (under Moodle v2.0) and that displayed fine. I'm wondering if there is an incompatibility between Formal White and Moodle v.2.3.

        Issue Links

          Activity

          Hide
          Mary Evans added a comment - - edited

          I have just been testing this and found it is being caused by the global change in the bottom margin of the paragraph tag <p></p> which starts and ends every paragraph in Moodle.

          The bottom margin for the paragraph tag is set to 1em in YUICSS. This value is also set in Canvas theme, which is the parent theme for Formal White. It is, however, a mystery why it has now been reduced to zero in Formal White, and thus affecting forum posts in this way.

          A quick fix would be to add the following CSS to your Formal White settings page...

          .forumpost p {margin-bottom: 1em;}
          
          Show
          Mary Evans added a comment - - edited I have just been testing this and found it is being caused by the global change in the bottom margin of the paragraph tag <p></p> which starts and ends every paragraph in Moodle. The bottom margin for the paragraph tag is set to 1em in YUICSS. This value is also set in Canvas theme, which is the parent theme for Formal White. It is, however, a mystery why it has now been reduced to zero in Formal White, and thus affecting forum posts in this way. A quick fix would be to add the following CSS to your Formal White settings page... .forumpost p {margin-bottom: 1em;}
          Hide
          Mary Evans added a comment -

          @Rick
          I have just added you as a watcher so that you will be kept in the loop.

          Show
          Mary Evans added a comment - @Rick I have just added you as a watcher so that you will be kept in the loop.
          Hide
          Francois Evans added a comment -

          Thanks for quick fix suggestion Mary.

          Will '.forumpost' setting affect only Moodle fora however?

          This bug affects paragraph breaks in 'Book' activity and the content of html 'Pages' added to courses.

          Show
          Francois Evans added a comment - Thanks for quick fix suggestion Mary. Will '.forumpost' setting affect only Moodle fora however? This bug affects paragraph breaks in 'Book' activity and the content of html 'Pages' added to courses.
          Hide
          Rick Jerz added a comment -

          Yes, this fix worked (after purging all caches, of course).

          This seems to be a work-around solution, however. Now that you have a fix, and a couple users providing feedback, I assume that this fix will eventually be integrated into the theme, fixing problems like Francois suggested.

          I don't use the "book" activity. I haven't noticed any other problems with paragraphs within Moodle 2.3. I will watch to see if this fix causes any other problems.

          Thanks for taking care of this so quickly, and adding me as a "watcher". Great!

          Show
          Rick Jerz added a comment - Yes, this fix worked (after purging all caches, of course). This seems to be a work-around solution, however. Now that you have a fix, and a couple users providing feedback, I assume that this fix will eventually be integrated into the theme, fixing problems like Francois suggested. I don't use the "book" activity. I haven't noticed any other problems with paragraphs within Moodle 2.3. I will watch to see if this fix causes any other problems. Thanks for taking care of this so quickly, and adding me as a "watcher". Great!
          Hide
          Mary Evans added a comment -

          I could get this fixed today by just deleting p

          {margin: 0}

          from formal_white/style/formal_white.css and that would ensure that the theme is back on track. If you both want to do that, then do so. This just allows the YUI CSS to take over again, which is why I think Daniele added that fix.

          What really bothers me is why? It it was to fix the 1em margin in all labels generated inside a course page, then I can understand it. But that's not the way to do it, which is to target the object in question.

          Hope this helps?

          Show
          Mary Evans added a comment - I could get this fixed today by just deleting p {margin: 0} from formal_white/style/formal_white.css and that would ensure that the theme is back on track. If you both want to do that, then do so. This just allows the YUI CSS to take over again, which is why I think Daniele added that fix. What really bothers me is why? It it was to fix the 1em margin in all labels generated inside a course page, then I can understand it. But that's not the way to do it, which is to target the object in question. Hope this helps?
          Hide
          Mary Evans added a comment -

          Just fixing this as I feel it's a regression and the sooner is fixed the better.

          Show
          Mary Evans added a comment - Just fixing this as I feel it's a regression and the sooner is fixed the better.
          Hide
          Daniele Cordella added a comment -

          Thanks Mary for your investigation during my days of rest with children (and wife). Sure, the problem comes from p

          {margin=0}

          in formal_white.css [I do not have the code here so the style selector may be different]
          I forget to delete it after a session of test I made months ago. I apologise.

          @mary: thanks for all your support. Feel free to fix this issue as you like. Whatever you decide is ok for me. Thanks and thanks again.

          – Posted from Bugbox for iPhone

          Show
          Daniele Cordella added a comment - Thanks Mary for your investigation during my days of rest with children (and wife). Sure, the problem comes from p {margin=0} in formal_white.css [I do not have the code here so the style selector may be different] I forget to delete it after a session of test I made months ago. I apologise. @mary: thanks for all your support. Feel free to fix this issue as you like. Whatever you decide is ok for me. Thanks and thanks again. – Posted from Bugbox for iPhone
          Hide
          Mary Evans added a comment -

          @Daniele
          Ho già fatto, ho presentato per la revisione integrazione di questa sera. Spero che hai avuto una bella vacanza ...

          Ciao
          Mary

          Show
          Mary Evans added a comment - @Daniele Ho già fatto, ho presentato per la revisione integrazione di questa sera. Spero che hai avuto una bella vacanza ... Ciao Mary
          Hide
          Rick Jerz added a comment -

          Mary and Daniele (and Gareth Barnard),

          I thought that I would provide you an update as to how I am using the Formal White theme, with your improvements. (Sorry that it is about 20 minutes long).

          Go to:

          http://www.rjerz.com/v/misc/m/Formal_White_Update/Formal_White_Update.html

          Show
          Rick Jerz added a comment - Mary and Daniele (and Gareth Barnard), I thought that I would provide you an update as to how I am using the Formal White theme, with your improvements. (Sorry that it is about 20 minutes long). Go to: http://www.rjerz.com/v/misc/m/Formal_White_Update/Formal_White_Update.html
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Integrated, thanks! (23 & master).

          Show
          Eloy Lafuente (stronk7) added a comment - Integrated, thanks! (23 & master).
          Hide
          Gareth J Barnard added a comment - - edited

          Dear Rick,

          I watched the video and thank you for your comments . To answer your questions:

          1. The design of the arrows was a conscious thought as I wanted them to reflect the direction the underlying section would go when clicked. I did not consider making them the same as the navigation block - to be honest I did not think about that - however, it is a good point and one to be considered.
          2. To change the title of the section in the toggle to bold, edit 'styles.css' in the 'topcoll' folder and add 'font-weight: bold;' to the '.course-content ul.ctopics li.section .content .toggle a' selector then do a 'Purge all caches' in Moodle. Is this something you would consider a good thing by default for all themes?

          Would you and others wish the new arrow direction and bold font to be default?

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - - edited Dear Rick, I watched the video and thank you for your comments . To answer your questions: 1. The design of the arrows was a conscious thought as I wanted them to reflect the direction the underlying section would go when clicked. I did not consider making them the same as the navigation block - to be honest I did not think about that - however, it is a good point and one to be considered. 2. To change the title of the section in the toggle to bold, edit 'styles.css' in the 'topcoll' folder and add 'font-weight: bold;' to the '.course-content ul.ctopics li.section .content .toggle a' selector then do a 'Purge all caches' in Moodle. Is this something you would consider a good thing by default for all themes? Would you and others wish the new arrow direction and bold font to be default? Cheers, Gareth
          Hide
          Mary Evans added a comment - - edited

          @Rick
          Thanks for adding the video here, I found this very informative, and YES do raise a Moodle Tracker for the TinyMCE Editor. You are so right when you say it should be left aligned. At present there is far too much white space surrounding it.

          As for the text area, where you found that words got truncated, this is actually quite easy to fix in the page. I don't know if you noticed the little tiny icon (looks like six dots in a right-angle triangle shape) in the bottom right corner of the text area window? If you hover over it with the mouse a diagonal arrow appears, indicating you can drag sideways or down, thus expanding or contracting the amount of space you need to write in. Docking the side blocks is another good way to make some space in a report style window.

          As for the Collapsed topics course view arrows, I think they could could do with changing, but not sure whether it should be a smaller arrow like the Navigation icon or the Block + - which does the same thing, or even an up/down arrow toggle switch. However these can be changed in Themes depending on the icon set chosen anyway.

          It's great to get feedback. Glad you like the fluid width setting Daniele added.

          Thanks again

          Mary

          Show
          Mary Evans added a comment - - edited @Rick Thanks for adding the video here, I found this very informative, and YES do raise a Moodle Tracker for the TinyMCE Editor. You are so right when you say it should be left aligned. At present there is far too much white space surrounding it. As for the text area, where you found that words got truncated, this is actually quite easy to fix in the page. I don't know if you noticed the little tiny icon (looks like six dots in a right-angle triangle shape) in the bottom right corner of the text area window? If you hover over it with the mouse a diagonal arrow appears, indicating you can drag sideways or down, thus expanding or contracting the amount of space you need to write in. Docking the side blocks is another good way to make some space in a report style window. As for the Collapsed topics course view arrows, I think they could could do with changing, but not sure whether it should be a smaller arrow like the Navigation icon or the Block + - which does the same thing, or even an up/down arrow toggle switch. However these can be changed in Themes depending on the icon set chosen anyway. It's great to get feedback. Glad you like the fluid width setting Daniele added. Thanks again Mary
          Hide
          Gareth J Barnard added a comment -

          @Mary,

          Sorry but the Collapsed Topics arrows cannot be changed in Themes as they are a part of the course format that uses JavaScript to change them as appropriate. I did make them semi-transparent in an attempt to blend in with different theme colours. The only way of migrating this would be a change to use a standard pair of icons as used in core that can be overridden by themes if they wish to - how to do this at the code end of the format would need looking into.

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - @Mary, Sorry but the Collapsed Topics arrows cannot be changed in Themes as they are a part of the course format that uses JavaScript to change them as appropriate. I did make them semi-transparent in an attempt to blend in with different theme colours. The only way of migrating this would be a change to use a standard pair of icons as used in core that can be overridden by themes if they wish to - how to do this at the code end of the format would need looking into. Cheers, Gareth
          Hide
          Rick Jerz added a comment -

          Gareth, I made the "bold" changes, which worked as you suggested. I really like the look in this theme. I will have to rely on Mary's opinion as to whether or not bold headings would work for all themes.

          Relative to arrow directions, I like matching them to this theme's directions. But I think that some themes do not use arrows.

          Keeping the background of the arrows transparent is probably good. I like the way that they blend in with the background heading color.

          When my Firefox browser lost its java addin, I did notice that the arrows would not drop. I am not a programmer, but if this could ever be down without java, it would be worth considering.

          Show
          Rick Jerz added a comment - Gareth, I made the "bold" changes, which worked as you suggested. I really like the look in this theme. I will have to rely on Mary's opinion as to whether or not bold headings would work for all themes. Relative to arrow directions, I like matching them to this theme's directions. But I think that some themes do not use arrows. Keeping the background of the arrows transparent is probably good. I like the way that they blend in with the background heading color. When my Firefox browser lost its java addin, I did notice that the arrows would not drop. I am not a programmer, but if this could ever be down without java, it would be worth considering.
          Hide
          Gareth J Barnard added a comment -

          @Rick,

          I've coded the format so that when JavaScript (was it a typo as 'Java' is a totally different thing?) is disabled the arrows are open so that all sections are view-able. This is the desired effect as without JavaScript there would need to be some sort of server side manipulation of the page and the page would completely refresh every time you clicked a toggle - slow and not user friendly.

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - @Rick, I've coded the format so that when JavaScript (was it a typo as 'Java' is a totally different thing?) is disabled the arrows are open so that all sections are view-able. This is the desired effect as without JavaScript there would need to be some sort of server side manipulation of the page and the page would completely refresh every time you clicked a toggle - slow and not user friendly. Cheers, Gareth
          Hide
          Mary Evans added a comment - - edited

          @Rick

          I think the 'bold' heading is great and would be OK to have it set as a permanent feature in this plugin.

          @Gareth

          I see what you mean about the toggle images. I use ▼ and ▲

          &#9660; and &#9650;
          
          function toggle5(showHideDiv, switchTextDiv) {
          	var ele = document.getElementById(showHideDiv);
          	var text = document.getElementById(switchTextDiv);
          	if(ele.style.display == "block") {
          			ele.style.display = "none";
          			text.innerHTML = '&#9660;';
          	}else{
          			ele.style.display = "block";
          			text.innerHTML = '&#9650;';
          	}
          }
          

          instead of images for same sort of thing in Aardvark Post-IT (show/hide) profile-bar, This then allows more flexibility when styling as it's a text character.

          However, if you were to add a class selector to the <a> tag that indicates when the toggle is open or closed, then it could be styled in a theme.

          Show
          Mary Evans added a comment - - edited @Rick I think the 'bold' heading is great and would be OK to have it set as a permanent feature in this plugin. @Gareth I see what you mean about the toggle images. I use ▼ and ▲ &#9660; and &#9650; function toggle5(showHideDiv, switchTextDiv) { var ele = document.getElementById(showHideDiv); var text = document.getElementById(switchTextDiv); if (ele.style.display == "block" ) { ele.style.display = "none" ; text.innerHTML = '&#9660;'; } else { ele.style.display = "block" ; text.innerHTML = '&#9650;'; } } instead of images for same sort of thing in Aardvark Post-IT (show/hide) profile-bar, This then allows more flexibility when styling as it's a text character. However, if you were to add a class selector to the <a> tag that indicates when the toggle is open or closed, then it could be styled in a theme.
          Hide
          Rick Jerz added a comment -

          Mary, I did create a Moodle Tracker item for left-justifying TinyMCE, see MDL-35105, and vote for it.

          Thanks for the tip about resizing TinyMCE. I think that if TinyMCE is left-justified, using the resizing feature will not be needed as often.

          Relative to the arrow direction, whatever makes sense... up, down, left or right, I recommend that it should be consistent between the theme and "collapsed topics." However, I see no problem with having two different sizes. The larger size in collapsed-topics might be very appropriate for the significance of the main course (center) column.

          Gareth, I am not a programmer so I will leave it up to you folks as to the best way to create the desired effects. You seem to know what you are doing. (By the way, great work! I hope your plugin eventually becomes standard.)

          Show
          Rick Jerz added a comment - Mary, I did create a Moodle Tracker item for left-justifying TinyMCE, see MDL-35105 , and vote for it. Thanks for the tip about resizing TinyMCE. I think that if TinyMCE is left-justified, using the resizing feature will not be needed as often. Relative to the arrow direction, whatever makes sense... up, down, left or right, I recommend that it should be consistent between the theme and "collapsed topics." However, I see no problem with having two different sizes. The larger size in collapsed-topics might be very appropriate for the significance of the main course (center) column. Gareth, I am not a programmer so I will leave it up to you folks as to the best way to create the desired effects. You seem to know what you are doing. (By the way, great work! I hope your plugin eventually becomes standard.)
          Hide
          Gareth J Barnard added a comment -

          @Rick,

          Thank you . I already add and remove the 'opencps' class name when the theme is the 'My Mobile' theme so that the arrow is styled differently in a theme. Only for that theme at the moment as I wanted to be efficient. Could change though if felt needed. However, lots of course format changes happening in the future that could affect how course formats and themes interact - please see notes / transcript and hopefully replay on http://docs.moodle.org/dev/Developer_meeting_August_2012.

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - @Rick, Thank you . I already add and remove the 'opencps' class name when the theme is the 'My Mobile' theme so that the arrow is styled differently in a theme. Only for that theme at the moment as I wanted to be efficient. Could change though if felt needed. However, lots of course format changes happening in the future that could affect how course formats and themes interact - please see notes / transcript and hopefully replay on http://docs.moodle.org/dev/Developer_meeting_August_2012 . Cheers, Gareth
          Hide
          Jason Fowler added a comment -

          Looks fine Mary, thanks for that

          Show
          Jason Fowler added a comment - Looks fine Mary, thanks for that
          Hide
          Rick Jerz added a comment -

          I attached a graphic showing how the topic titles now appear in "bold." I think that they look great.

          Gareth, maybe you noticed one more change. In the open/close topics heading, you will see in the graphic that I simplified this by using the word "All", as in "Open All", and "Close All". Quite honestly, I can't remember your original wording, but for some reason, it didn't seem as natural to me as simply the word "All".

          Show
          Rick Jerz added a comment - I attached a graphic showing how the topic titles now appear in "bold." I think that they look great. Gareth, maybe you noticed one more change. In the open/close topics heading, you will see in the graphic that I simplified this by using the word "All", as in "Open All", and "Close All". Quite honestly, I can't remember your original wording, but for some reason, it didn't seem as natural to me as simply the word "All".
          Hide
          Rick Jerz added a comment -

          Mary, I looked at some of the information in the transcripts. I noted that there is work being done on performance. Right now, my Moodle is a little slow. I am digging into this. Over the last month, I moved my Moodle to a new virtual server, upgraded to Moodle 2.3.1, and installed Collapsed-Topics. I am not sure what is causing the slower than expected performance. As you (or others) experiment with this theme, 2.3.1+, and Collapsed-topics, see if you think your Moodle is a little slow.

          Show
          Rick Jerz added a comment - Mary, I looked at some of the information in the transcripts. I noted that there is work being done on performance. Right now, my Moodle is a little slow. I am digging into this. Over the last month, I moved my Moodle to a new virtual server, upgraded to Moodle 2.3.1, and installed Collapsed-Topics. I am not sure what is causing the slower than expected performance. As you (or others) experiment with this theme, 2.3.1+, and Collapsed-topics, see if you think your Moodle is a little slow.
          Hide
          Gareth J Barnard added a comment -

          @Rick,

          Thanks for the screen shot, I think I'll put that into the next release . The original wording for 'ALL' is 'all toggles' as I wanted to be explicit and blatantly obvious on its action to facilitate usability by users of all abilities. Perhaps I might change it on reflection to 'all sections' to be completely accurate.

          I'm not sure why your Moodle is running slow. I do some of my development work on a dual-core Atom Netbook with 2GB of RAM under Windows 7 Starter with a full blown Zend Community Edition WAMP server and it runs fine. The code in CT's 'module.js' and the calling 'php' is designed to be efficient as it can be - until somebody points out an efficiency .

          Cheers,

          Gareth

          Show
          Gareth J Barnard added a comment - @Rick, Thanks for the screen shot, I think I'll put that into the next release . The original wording for 'ALL' is 'all toggles' as I wanted to be explicit and blatantly obvious on its action to facilitate usability by users of all abilities. Perhaps I might change it on reflection to 'all sections' to be completely accurate. I'm not sure why your Moodle is running slow. I do some of my development work on a dual-core Atom Netbook with 2GB of RAM under Windows 7 Starter with a full blown Zend Community Edition WAMP server and it runs fine. The code in CT's 'module.js' and the calling 'php' is designed to be efficient as it can be - until somebody points out an efficiency . Cheers, Gareth
          Hide
          Rick Jerz added a comment -

          Gareth,

          Yes, I know what you mean about the wording, and that I could probably live with "All Sections" too. I had thought about "All Topics", "All Below", "All Materials", and maybe a few more.

          My Moodle is up on the Internet on a Virtual Server. I do have 2GB of RAM, and the server is a standard Apache-CentOS-mySQL-PHP environment. I am not a server administrator type, so I am not sure about all the things that can be done to optimize this environment, but I am researching it right now. Thanks for your perspective.

          Show
          Rick Jerz added a comment - Gareth, Yes, I know what you mean about the wording, and that I could probably live with "All Sections" too. I had thought about "All Topics", "All Below", "All Materials", and maybe a few more. My Moodle is up on the Internet on a Virtual Server. I do have 2GB of RAM, and the server is a standard Apache-CentOS-mySQL-PHP environment. I am not a server administrator type, so I am not sure about all the things that can be done to optimize this environment, but I am researching it right now. Thanks for your perspective.
          Hide
          Mary Evans added a comment - - edited

          @Rick
          I know nothing about servers, but I have read stuff in the forums that point to too many database calls but nothing specific. Some themes can be slow, on the other hand so can broadband connections. Here in the UK if you live down hill from the main telephone exchange as I do in a very rural part of North-West Lancashire, England, you are lucky if you get a quarter of the speed you should be getting. So when you talk about 'slow' it could be the server, but more than likely your connection is overloaded.

          Show
          Mary Evans added a comment - - edited @Rick I know nothing about servers, but I have read stuff in the forums that point to too many database calls but nothing specific. Some themes can be slow, on the other hand so can broadband connections. Here in the UK if you live down hill from the main telephone exchange as I do in a very rural part of North-West Lancashire, England, you are lucky if you get a quarter of the speed you should be getting. So when you talk about 'slow' it could be the server, but more than likely your connection is overloaded.
          Hide
          Rick Jerz added a comment -

          @Mary,
          Okay, I am still searching the Moodle docs and these forums. It was just interesting to note that the issue of "performance" came up at the last developer meeting. Thanks.

          Show
          Rick Jerz added a comment - @Mary, Okay, I am still searching the Moodle docs and these forums. It was just interesting to note that the issue of "performance" came up at the last developer meeting. Thanks.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          I'm so proud...of you, many thanks!

          http://youtu.be/n64CdfDRnZY

          Closing as fixed, ciao

          Show
          Eloy Lafuente (stronk7) added a comment - I'm so proud...of you, many thanks! http://youtu.be/n64CdfDRnZY Closing as fixed, ciao

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: