Moodle is an excellent LMS and Twitter Bootstrap an excellent page design framework so why not put them both together. Here's how.
Create a new theme location on your moodle installation by following these instructions. http://docs.moodle.org/24/en/Themes_FAQ#Why_is_the_new_theme_I_uploaded_not_showing_up_in_Theme_Selector.3F
You may suffer your new theme appearing with the name [[pluginname]]. If so, follow these instructions http://docs.moodle.org/dev/Themes#Getting_Your_Theme_to_Appear_Correctly_in_Theme_Selector
Download the Twitter Bootstrap theme from http://theming.sonsbeekmedia.nl/
Copy the contents of your downloaded theme into this directory.
Finally, you want to be in a situation where you can make your own small tweaks.
Open /theme/bootstrap/config.php
Add 'user_styles' to the end of the '$THEME->sheets' array.
Now create a file called /theme/bootstrap/style/user_styles.css. You can now put your tweaks in there such as:
p
{
font-family:Georgia,Serif;
}
Monday, 21 January 2013
Install and use LESSCSS on your ubuntu server
LESSCSS is an excellent progression in the development of stylesheets, but how do you install and use it on your ubuntu server?
The first thing we do is to install node-less. To do this through the terminal, use the command:
sudo apt-get install node-less
Right, that's the installation done. Yes, that easy.
Now let's create our LESSCSS stylesheet. Here is my simple example, which we'll put into a file named styles.less:
@blue:#00c;
@white:#FFFFFF;
body
{
background:@blue;
color:@white;
}
There are two ways of using LESSCSS.
The first way is to download, the less.js library from http://lesscss.org/, then simply refer to a LESSCSS stylesheet we created and subsequently call the library thus:.
<!DOCTYPE html>
<html lang="en">
<head>
<title>less test</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The second way is to compile our LESSCSS stylesheet into a normal CSS. To do this, again go to the terminal, change to the directory containing your page e.g.
cd /var/www/test/less
Then compile the LESSCSS stylesheet into a normal CSS like this:
lessc styles.less > mystyle.css
Now you can just call your newly created CSS in your page, but this time without the need for the less.js library thus:
<!DOCTYPE html>
<html lang="en">
<head>
<title>less test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The first thing we do is to install node-less. To do this through the terminal, use the command:
sudo apt-get install node-less
Right, that's the installation done. Yes, that easy.
Now let's create our LESSCSS stylesheet. Here is my simple example, which we'll put into a file named styles.less:
@blue:#00c;
@white:#FFFFFF;
body
{
background:@blue;
color:@white;
}
There are two ways of using LESSCSS.
The first way is to download, the less.js library from http://lesscss.org/, then simply refer to a LESSCSS stylesheet we created and subsequently call the library thus:.
<!DOCTYPE html>
<html lang="en">
<head>
<title>less test</title>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The second way is to compile our LESSCSS stylesheet into a normal CSS. To do this, again go to the terminal, change to the directory containing your page e.g.
cd /var/www/test/less
Then compile the LESSCSS stylesheet into a normal CSS like this:
lessc styles.less > mystyle.css
Now you can just call your newly created CSS in your page, but this time without the need for the less.js library thus:
<!DOCTYPE html>
<html lang="en">
<head>
<title>less test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Subscribe to:
Posts (Atom)