Hi all,
h5 is applied to both the headings of Narrative text boxes and also to the options in a MCQ. I want one to be big and bold and the other to be smaller so I need to apply a new header style to one of them but can't hunt it out in the files available - where/how can I apply a new style I add in the fonts.less to one of those two items please?
Thanks!
Helen
Hi Helen,
I'm not quite clear about what you've set up, but have you tried to enter your CSS class name in your component configuration? When you're configuring the component, there should be a section close to the bottom called Settings, and in it there should be a textbox for Classes.
Chuck
Hmm sorry yeah it's not easy to explain.
As standard i've found that the h5 style in fonts.less is applied to both the heading of a narrative text box and the answers that are available in an MCQ. So if i want the answers in the the MCQ interaction to be slightly smaller and I change the less for h5 then I inevitably make the headings in the narrative boxes smaller too.
So i have set up a new style - h7 which I want to apply to one of them to differentiate. I had seen the class box in the properties but don't really know what to do with it to apply it to just the heading of the narrative boxes. If I just type in h7 nothing happens. Do I need to apply it some other way?
Thanks!
Helen,
Try this experiment:
1. Type helen into the classes field in a course you have in the authoring tool.
2. Preview the course.
3. Inspect the component using something like Chrome Developer Tools (Chrome menu > More tools > Developer Tools)
4. Locate your name. It will appear as a class in the div that contains the component.
I think what you want to do is to introduce/inject the class name via the authoring tool classes field, then add some styles to one of the less files. (I don't think it will really matter which, but you might consider using theme.less)
.helen .mcq-item .component-item {
font-size: smaller;
}
Use your class (.helen) with the appropriate class/es from the element you want to style. (This is all just example code; nothing precise.)