Perhaps the diagram below answers my question? Is the course content is separated from the layout?
I was hoping to be able to create a blue box to contain text and provide separation between textual elements on a webpage in a course.
Cheers,
Ian
Is it possible to use CSS in course HTML pages (or even, say, labels)? I just tried and failed miserably. I put the CSS into my theme and referenced it in a course page.
Perhaps the diagram below answers my question? Is the course content is separated from the layout?
I was hoping to be able to create a blue box to contain text and provide separation between textual elements on a webpage in a course.
Cheers,
Ian
Perhaps the diagram below answers my question? Is the course content is separated from the layout?
I was hoping to be able to create a blue box to contain text and provide separation between textual elements on a webpage in a course.
Cheers,
Ian
How did you go about "referencing" it in your course page?
Why not either
a.) add the styles to one of your existing stylesheets, or
b.) include the stylesheet in your theme's config.php file?
Why not either
a.) add the styles to one of your existing stylesheets, or
b.) include the stylesheet in your theme's config.php file?
Ian,
It is certainly possible to use CSS everywhere in your Moodle courses, on top of the current visual theme.
1- When you say "course HTML pages" do you mean:
a) HTLM pages created on your local machine with an HTML editor and uploaded to your course files (this is by far my preferred method); in that case you just use inline CSS or an external CSS file just as you would do on any Web site;
b) HTML pages created in Moodle, using Add a Resource/Compose a Web page; in that case you can also resort to CSS but it's not so easy.
2- When you say "I failed miserably", we certainly sympathize
but we cannot help because you do not say exactly what happens or does not happen what exactly you did to make things happen, etc.
Please provide more exact details about your situation so we can help.
Joseph
Thanks for the replies.
Some more details:
a) I added the new CSS style to the end of my ./theme/user_styles.css file where all the CSS for our theme is kept.
b) When I say "course HTML pages" I do mean HTML pages created in a Moodle course using the Add a Resource page. I used the WYSIWYG editor in HTML-mode and the following HTML:
Thanks!
Ian
Some more details:
a) I added the new CSS style to the end of my ./theme/user_styles.css file where all the CSS for our theme is kept.
/* blue box for content */
.blue_box
{
margin:0px auto;
width:300px;
text-align:left;
padding:5px;
background-color:#B0E0E6;
border:1px solid black;
font-size:12px;
}
.blue_box
{
margin:0px auto;
width:300px;
text-align:left;
padding:5px;
background-color:#B0E0E6;
border:1px solid black;
font-size:12px;
}
b) When I say "course HTML pages" I do mean HTML pages created in a Moodle course using the Add a Resource page. I used the WYSIWYG editor in HTML-mode and the following HTML:
<div id="blue_box">Hello World!</div>
Can I add the CSS to the user_styles.css and then expect them to work like this? If so, perhaps I've made a mistake somewhere else. The user_styles.css file is working fine for all the site theme styles.Thanks!
Ian
The problem is that you've specified a class to be styled in your CSS:
.blue_box
and are using an id in your HTML.
Periods (.) identify classes in CSS.
use
div class="blue_box"
and you should be all good.
.blue_box
and are using an id in your HTML.
Periods (.) identify classes in CSS.
use
div class="blue_box"
and you should be all good.
Thanks Patrick,
After the last post I starting thinking I had made a mistake like this somewhere, just couldn't determine where. Works fine now.
Cheers,
Ian
After the last post I starting thinking I had made a mistake like this somewhere, just couldn't determine where. Works fine now.
Cheers,
Ian
To complete Patrick's answer, there are 2 ways to obtain the desired result (not strictly equivalent, though).
CSS rule:
.blue_box {
margin:0px auto;
width:300px;
text-align:left;
padding:5px;
background-color:#B0E0E6;
border:1px solid black;
font-size:12px;
}
HTML source:
<div class="blue_box">Hello blue World</div>
CSS rule:
#red_box {
margin:0px auto;
width:300px;
text-align:left;
padding:5px;
background-color: #FF6699;
border:1px solid black;
font-size:12px;
}
HTML source:
<div id="red_box">Hello red World</div>
See attached results
Joseph
CSS rule:
.blue_box {
margin:0px auto;
width:300px;
text-align:left;
padding:5px;
background-color:#B0E0E6;
border:1px solid black;
font-size:12px;
}
HTML source:
<div class="blue_box">Hello blue World</div>
CSS rule:
#red_box {
margin:0px auto;
width:300px;
text-align:left;
padding:5px;
background-color: #FF6699;
border:1px solid black;
font-size:12px;
}
HTML source:
<div id="red_box">Hello red World</div>
See attached results
Joseph
I did the above and it works by putting the user_styles.css in the theme. However, if I were to do this on the Front Page and someone uses their own user theme (which we allow) I assume it will not read that css? Is there any way to create some css to use in a label or compose a web page so it works for ALL themes? Thanks!
Assuming that your user themes are all based on Standard, you could place the styles inside one of the Standard stylesheets.
Okay, thanks!!
I just tried doing this. I added a "user_styles.css" into the standard folder. It's not working. Is there something else I have to change? I do not want to add the css to the actual standard stylesheets..
Did you add user_styles.css to your config.php file?
For example, does line 9 look like this:
$THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color', 'user_styles');
For example, does line 9 look like this:
$THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color', 'user_styles');
Dear Joseph Rézeau,
I have the same problem, plus i would like to add some javascript externaly.
I am using this case
"a) HTLM pages created on your local machine with an HTML editor and uploaded to your course files (this is by far my preferred method); in that case you just use inline CSS or an external CSS file just as you would do on any Web site;"
Could you please help me on where/how should i upload the css and js files?
Thank you in advance
Marigianna
Hi,
This is an old discussion, and relates to Moodle 1.9. So before I can answer your questions, can you tell me which version of Moodle you are refering to, as Moodle 1.9.x and Moodle 2.x.x are very different in many ways.
Thanks
Mary
In reply to Mary Evans
Απάντηση: Re: Απάντηση: Re: CSS in course HTML page
Hello and thank you for your quick answer,
Our current version is moodle 2.0.3+ .
In reply to Marigianna Skouradaki
Re: Απάντηση: Re: Απάντηση: Re: CSS in course HTML page
by Mary Evans -
Hi,
In that case you can add your Javascript/s to a new directory in your chosen theme...like so...
moodle /theme/yourtheme/javascript/ .. (add all your .js files here)
the CSS can be added to ...
moodle/theme/yourtheme/style/ ... (add all extra .css file here)
NEXT you will need to add some reference to these files in...
moodle /theme/yourtheme/config.php
1. add the names of the new stylesheet/s at this point in the config.php
$THEME->sheets = array('pagelayout','core',' new_style1 ','new_style2');
2. add all the names of the new javascript/s at this point in the config.php
there are two places you can add the scripts this determins were they are added to the page either the header or the footer this first is to add Javascript to the header
$THEME->javascripts = array('new_script.1.2.3');
and this is to add javascript to the page footer
$THEME->javascripts_footer = array('new_script.1.2.3');
You do not need to add the .js extension as the files are automatically recognised by the internal mechanisems within Moodle (don't ask me how it works...I don't know - I just know it does)
I think I have this correct...
Perhaps if you read Development: Using jQuery with Moodle 2.0 although this is about JQuery the principle is the same and you may find it enhances/explains better than what I have written above...
Mary
In reply to Mary Evans
Απάντηση: Re: Απάντηση: Re: Απάντηση: Re: CSS in course HTML page
Thanks that was what i needed !
your life saver ! :P
In reply to Marigianna Skouradaki
Re: Απάντηση: Re: Απάντηση: Re: Απάντηση: Re: CSS in course HTML page
by Mary Evans -
Wonderful! Thanks for the feedback!
