A week ago I posted this in the Lessons forum but have received 0 responses/0 reads, hopefully someone will reply with a useful answer in this forum.
Can someone please shed some light on this for me - how do I use my own custom css styles in my lessons? I have tried adding my css to the existing scss files for the theme I'm using (Boost) but no matter where I put the code it does not affect my lessons pages. I also added a .scss file to the /moodle directory with all the other .scss files, then added an import line to the moodle.scss file (again, the one if the Boost directory), but nothing works. This is the 21st century and there has to be a way to use our own custom css styles in lessons, right? Isn't that the point of open source, so we can do what we want to do, and not be restrained by someone else's ideas of what we want. Well, seems to me to be that. But anyway, how can I use my own custom .css in my lessons? (BTW, this is a brand new install of the latest version of Moodle, and I am a new user)
Charles, I don't know exactly what you are trying to do, but I might be able to provide some help... maybe.
I gave a presentation at MoodleMoot US in the summer about how I customize Boost. Here is a link to my Resources webpage for this presentation. Maybe something on it will help you.
Yep, open source does mean that you can program anything into moodle to change its behavior and appearance, given that you know how to do it. Or you can probably pay someone else to do it (not me, I am not a programmer,) but maybe a moodle partner.
Hi Charles
I customise our lessons look by using browser inspect element and custom css in theme settings.
This way when you update your theme you dont lose your css.
I use Adaptable them but here is an example of custom css from lesssons
body#page-mod-lesson-view input#id_submitbutton {
padding: 20px;
width: 50%;
background: #35578C;
border-radius: 10px;
border: solid 2px;
color: #fff;
text-shadow: 1px 1px 1px #000;
}
body#page-mod-lesson-view input#id_submitbutton a:hover {
padding: 20px;
width: 50%;
background: #ffffff;
border-radius: 10px;
border: solid 2px;
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.body#page-mod-lesson-view img.iconhelp {
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.path-mod-lesson .answeroption .felement label p:last-child, .path-mod-lesson .answeroptiongroup .felement label p:last-child {
margin-left: 10%;
}
body#page-mod-lesson-view section#region-main h3 {
color: #fff;
text-shadow: 1px 1px 1px #000;
background-color:#35578C;
padding:1%;
border: solid 3px;
border-color: #fff;
border-radius: 10px;
}
body#page-mod-lesson-view section#region-main h2 {
color: #fff;
text-shadow: 1px 1px 1px #000;
background-color:#35578C;
padding: 1%;
border: solid 3px;
border-color: #fff;
border-radius: 10px;
}
.path-mod-lesson .contents, .path-mod-lesson .standardtable, .path-mod-lesson .mform .box.contents, .path-mod-lesson .invisiblefieldset.fieldsetfix tr {
margin-left: 3%;
background-color:#eaeef3;
}
body#page-mod-lesson-view section#region-main {
background: #eaeef3;
padding-right: 20px;
padding-left: 20px;
color: #000;
padding-bottom: 50px;
}
Hopefully that will start you on the road
Gary
If my post helps consider rating it
So, correct me if I'm wrong, please - I can't take my existing lessons, in html (which look great in Chamilo) and put them into Moodle and see them the same way? I have to rewrite all those lessons so they will display the same in Moodle as in the other? Seriously? I don't want to go back to Chamilo with it's almost zero support. But this is ridiculous. There must be a way to get my individual lessons to look the same in Moodle as I designed them offline. It's just a lot of css and html, nothing special. But I don't see how it can be done without rewriting everything. I hope someone has a workable answer, I'm losing a huge amount of time and days messing with this. It's very discouraging. Oh, BTW, I am using the Aardvark theme which I have modified to give all the boxes a 16pixel radius, and this works great in the course, but apparently isn't shared with all the lesson pages that are in the course.
Here is some info about my lesson pages: I have to make them contain anywhere from 4 to 10 divs (boxes). Each one is a different color with a left-bar of a contrasting color. Such as a light-blue box with a dark-blue left bar. These boxes use the left 2/3s of the window, the right 1/3 is simple a white background that contains small inages/pictures, from the top of the first box down to the footer. Those are simply to help a new English learner understand the meaning of whatever vocabulary word they are learning, or they support the text they are studying. Pretty much all images/pics have some little bit of mouse over text or the vocabulary lists words have a mouse over image. And there are some pop-ups that use tooltips or very minimal javascript. To do all this I have been using the w3.css framework, and it all works great.
[code]
<style>
/* right-side column for images and graphics */
.whiteSection {
float:left;
width: 33.3333%;
padding:0 8px;
text-align:center!important;
background-color:#fff!important; }
.section1 { /* the dark blue section 1 */
content:"";
float:left;
width: 66.6666%;
display:table;
clear:both;
padding:0.01em 16px;
border-radius:8px;
color:#fff !important;
background-color:#000066 !important; /* dark blue */
border-left:6px solid #0000ff !important; } /* blue */
</style>
<div class="w3-row">
<div class="section1">
<p>stuff here</p>
</div>
<div class="whiteSection">
images here
</div>
</div>
[/code]
I'm too late to add this to the previous reply - I was looking at the resulting lessons in the FF developers tools Inspector and it appears Moodle is removing much of my css and replacing it with it's own yui stuff. I don't know what that is all about.
For example, I have a header box with a title in it, using this css code:
[code]
.sectionheader {
background: #5a7081; /* Old browsers */
background: -moz-linear-gradient(top, #5a7081 1%, #364753 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#5a7081), color-stop(100%,#364753)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5a7081 1%,#364753 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5a7081 1%,#364753 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5a7081 1%,#364753 100%); /* IE10+ */
background: linear-gradient(to bottom, #5a7081 1%,#364753 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a7081', endColorstr='#364753',GradientType=0 ); /* IE6-9 */
border-color: #5A7081;
width: 100%;
padding:0.01em 16px;
border-radius:8px;
color:#fff !important; }
[/code]
And this is what I see in the inspector:
[code]
<div class="sectionheader" id="yui_3_17_2_1_1511373883858_80">
<!-- For a header banner at the top of the lesson page -->
<div class="w3-container w3-center" id="yui_3_17_2_1_1511373883858_79">
<h3 id="yui_3_17_2_1_1511373883858_78">~<br> The Letter Aa <br> ~</h3>
</div>
</div>
[/code]
And this is the original code I put in the html source box when I made the lesson:
[code]
<div class="w3-row">
<div class="sectionheader">
<!-- For a header banner at the top of the lesson page -->
<div class="w3-container w3-center">
<h3>
~<br />
The Alphabet
<br>
~</h3>
</div>
</div>
</div>
[/code]
So, is this the problem - the yui stuff is replacing my own code? If so, what can I do the stop this from happening?
Note: What really seems strange to me is this - if I paste the entire source code for a lesson, which includes all the header info loading the external w3.css code and several google fonts, the resulting lesson will have some, not all, of the styles applied. Very strange, I think.
Ok, I have it working in the theme "Adaptable", I haven't yet tried it in the theme that I would prefer to use - "Aardvark". But anyway, what I have to do is create a css file and copy/paste into the box for custome css in the Adaptable theme, but that is not enough, because apparently, that code in that box is not saved in the custom.css file. Therefore, I also upload the custom.css file by ftp. That is two copies of the same code. But it now works as I would expect it to - all my lessons are conforming to my own css. Now it's just a matter of tweaking a few more parameters, and trying it in Aardvark. I will post those results when I have them.
Charles, this is a half answer, and may turn out to be useless. Among other things, you are facing the problem of migrating content.
There is an option to upload a zip file of HTML pages to Moodle.
https://docs.moodle.org/23/en/File_resource_settings#Displaying_a_website_index_page
https://moodle.org/mod/forum/discuss.php?d=315056
https://kb.wisc.edu/moodle/page.php?id=46272
https://moodle.org/mod/forum/discuss.php?d=335804
Good luck
-Derek
Gary,
You say this is custom CSS you use in Lessons.
I have just touched on this in my little thread I have got going and would like to explore this more too.
Are you putting this in to a custom CSS file or loading it directly in to:
Add the CSS to your Site administration Appearance\Themes\YOUR THEME\Custom\CSS & JSI was asking in my thread was about this custom CSS file.
Is it writing to a separate file or to a standard Moodle file contained with in the Theme section?
I will like to have a bit more control on this as I seem to be building a list of custom CSS\HTML I would like to have in a tidy file.
Edits: Reading Chips reply, seems there is a file that can be added..
Any pointers to this and some reading on it.. thanks in advance.
Hi Daniell
I use the Adaptable them and put this into the custom box/field in the admin.
I personally do this because when you update your theme version it will overwrite the additions you have made to the theme css.
This way i can copy and paste the css when i update in seconds rather than ftp to server etc
the less you mess with core code/theme code directly the less chance of mesing things up by overwriting in an update
Regards
Gary