I can't get information to look right when published.
Content will look okay when I am working on it, but when I update there are spacing errors throughout. For ex- I have left spaces between lines of text or have aligned text with a photo, but when I click update, the spacing does not show. When I go to edit it again, it shows several spaces/lines between the text, but this is not showing once published. Does this make sense? I am extremely frustrated 
I am using a template and mostly cutting and pasting content into the text editor using Control C and V as suggested. I think I am doing something wrong with entering spaces or paragraphs....I am not familiar with HTML.
I have searched through the help and videos but can't find anything addressing this.
Answers
-
@Rachel Clements
Firstly, WAY TO GO RACHEL!
For someone who isn't familiar with HTML, using HTML templates is a really big deal!!
Here's what our Courseware Developers often recommend in this situation:
1) If you're copying and pasting from a word doc into the template try to paste as plain text Ctrl+Shift+V (Cmd+Shift+V on Mac). This can help prevent hidden formatting from your word doc from interfering with your HTML template.
2) Don't use the space bar to try to adjust things inside of the html template. Use the indent function in the HTML editor to help you centre or move images or blocks of text
3) Try to stick to some of the simpler page layouts- especially those with an image at the top or bottom (as opposed to one in the middle or side of the page) this will help to keep the formatting simpler as well
4) Try copying and pasting smaller blocks of text into the html template. The templates will try to strip out some of the formatting you may have put into the original document ex. if you have two paragraphs in a word doc and you spaced them out a bit by hitting enter a few times- this type of formatting something the template will purposely try to cut out.
We're always trying to make our html templates better and easier to use, so thank you for helping us to get better too by sharing your feedback with us!
-
Hi @Stefanie Baldwin We have an instructor user who is experiencing the same issues with the Daylight HTML template, where we provided them with the tips above but the line spacing that the user has implemented in the HTML text editor (which displays as expected - 1) disappears in regular view/preview (2):
They're wondering what method to suggest for them to use to indent the first line of a paragraph to create more visual structure/whitespace (without indenting the whole paragraph, which is what the indent button does)?
Thanks in advance!
Jamie
-
Hi @Jamie Ducusin My apologies for the delay in responding here. I wanted to review my suggestion with some of our Courseware Developers before posting, to check on something.
In my earlier post I'd recommended pasting plain text to prevent word formatting from interfering with the HTML Document if you're copying and pasting from a word document.
For the issue you're describing where the Instructor wants to add spacing between paragraphs, they would actually want to retain the word doc formatting. So a simple Ctrl+V (Cmd+V on Mac) will hep to insert the spacing between paragraphs the Instructor is after.
Here's background on why this works, and why the delay in response (aka the long story)
The HTML Templates are designed to enforce a page style in code (html and css) without the course creator having to write this code. This impacts everything from the font to the line spacing.
While styles are set in the css files that act on the html (each page that is created) there are ways of inserting code inline with the html. When this style code appears inline, it is often more specifically referring to a part of the HTML content and has the effect of overriding the global style defined in the style sheets.
There are reasons why in development this is not encouraged. One reason is that the choice to include global styles (through css) is intended to unify the material. When you make changes inline it's much harder to remember where you've made those specific changes, and to update them at a later point.
When you do not paste material as plain text from word into the template, it brings word formatting into the html, inserting this type of inline style. It has the effect the instructor is after- but I wanted to make sure it wouldn't impact the accessibility of the content.
When I and other Courseware Developers have tested doing this, we have not detected an accessibility issue- but I would encourage you and others to use the embedded accessibility checker as a general rule of practice. It will help to call out colour contrast issues that could come up as a result of this type of copy and paste practice.
I hope this helps Friend, and my apologies again for the delay in response.
-Stef
-
Hi @Stefanie Baldwin , can you tell me where I would adjust the paragraph setting in the CSS document for the Daylight HTML template? I've been customizing the colors to reflect our institution, ect. The paragraph setting in the template as does not create enough white space, which is causing many faculty to try add in a space, but as you know that doesn't show when published. I'd like to address this in the CSS file so that can resolve this issue universally moving forward. Can you recommend a course of action?
I attempted to add "margin-bottom: 2.2em;" to this area of the CSS:
/*** Typography ***/
/** Typography - Global **/
/* Fonts Set in course */
html,
body {
color: #000000;
font-size: 16px;
font-weight: 400;
}
When that didn't work, I added the same code to both the Typography - extra small, small and Typography - Medium, Large, Extra Large areas as:
}
.body-one {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.6rem;
letter-spacing: 0;
margin-bottom: 2.2em;
}
It still didn't work. Other ideas on how I could address this?
-
Hi @sarah dampier,
I think this might be a bit of trial and error.
I am the first to admit that truly I'm not a developer by background- but I am super curious and chatty.
Here's what I've been able to discover on my own and in conversation with some folks I know to know better than me 😃
In the main.min.css file I noticed there wasn't a style called out specifically for all paragraphs. That could actually be really useful in your case. You might try creating your own paragraph style as an element that you might add to your own elements page. Defining this paragraph style with more space at the bottom of the paragraph, before the next element appears could look something like
p{
margin-bottom: 20px;
}
You could also search for "line-height" and play a bit with that- but it will impact the spacing of all lines, including those internal to the paragraph
The only other thing that I can think of that's pretty lightweight to add is a </br> between lines
Hope this helps Friend.
-Stef
-
Thanks, @Stefanie Baldwin . I actually found the code related to general <p> styling and was able to add the margin-bottom code!
-
I should have mentioned where!
Under /*====== Typography =========*/
}
p,
ol,
ul,
cite {
font-size: 16px;
line-height: 24px;
margin-bottom: 15px;
}
-
@sarah dampier = Brightspace Super Hero!
🎉Thanks for helping me learn more and chatting with me here on the Community!🎉
admin
