Hi community,
I'm ussing Moodle 3.1.6 (Build: 20170508)
I notice a really annoyng spaces in my questions (Default) as you can see in the next photo.
And notice somewhere in internet that questions can be displayed like this:
Can you help me to understand how can I change this? I know could need code changes. But really want try this. Thank you.
This is probably a themes question but you might start looking at what additional css you have in your theme settings - chances are the problem is there...
Just to be clear: the way the quiz looks on your server is wrong. It should not look like that. It should be lined up they way you saw "somewhere in internet".
Emma gave the correct advice for where to look to work out why your site is broken.
alright, i'll check this custom theme css properties.
Can I asume it could be displayed aswell in this way?
(photoshoped image)
You could do that, but it does not look very nice to my eyes.
I the OU Moodle theme, we chagned the layout of questions to be this, which is like what you have done, but layed out a bit better.
Wow, really nice. I didn't even think about changing that part aswell.
It is modificated in the ".que .info"?
It took quite a lot of quite scary CSS to get that result without changing the HTML structure, and undoing all the usual styling in the standard Moodle theme. Not sure how reusable this is, but here is the code from our theme. You may need to adapt it a bit, and you will certainly need to change the colours.
.que .info {
background: transparent;
float: none;
width: auto;
padding: 0;
margin: 0 0 12px;
border: 0 none;
border-radius: 0;
}
#region-main .que .info h3.no {
display: inline;
font-size: 1.28571em;
line-height: 1.5;
font-weight: bold;
color: #002158;
margin: 10px 0 0 0;
}
#region-main .que .info h3.no span.qno {
font-size: 1em;
font-weight: bold;
}
.que .info > div {
display: inline-block;
margin: 0 0 0 10px;
padding: 0 0 0 10px;
border-left: 1px solid #d4d2d2;
font-size: 0.85714em;
}
.que .info > div.state + div {
margin: 0;
padding: 0;
border-left: 0 none;
}
.que .info > div.editquestion img.iconsmall {
padding: 0 0.3em 0.3em;
}
.que .info > div.state {
display: inline;
margin: 0 0 0 0.4em;
padding: 0;
border: 0 none;
font-size: 1.28571em;
font-weight: bold;
}
.que.correct .info > div.state {
color: #378726;
}
.que.partiallycorrect .info > div.state {
color: #cc6702;
}
.que.notanswered .info > div.state,
.que.incorrect .info > div.state {
color: #a51e1e;
}
.que .info > div.state:after {
content: '';
display: block;
margin: -5px 0 0;
padding: 0;
}
.que .content {
margin: 0 0 0 0;
width: auto;
}