How to center blocks inside moodle

I found the answer to this question by googling the Moodle.org forums and tracker, but thought I'd repost this specifically for Moodle 2.1

Original answer can be found here: http://tracker.moodle.org/browse/MDL-6748


1) Go to:  lib/blocklib.php

2) Around line 46, define a new block position:

define('BLOCK_POS_RIGHT', 'side-post');

define('BLOCK_POS_CENTER', 'center');

2) Go to:  theme/[your_theme]/layout/general.php
3) Around line 7, add a new line of code:

$hassidepost = $PAGE->blocks->region_has_content('side-post', $OUTPUT);
$hascenter = $PAGE->blocks->region_has_content('center', $OUTPUT);

4) In the same file, around line 90-96, add a new block of code:

<?php echo core_renderer::MAIN_CONTENT_TOKEN ?>
<?php if ($hascenter) { ?>

   <div class="block-region">

       <div> <?php echo $OUTPUT->blocks_for_region('center') ?></div>

    </div>

<?php } ?>
</div>

5) Go to:    theme/[your_theme]/config.php

6) In whichever page you want to have center blocks, add  'center' to the regions array

'frontpage' => array(
'file' => 'general.php',
'regions' => array('side-pre', 'center', 'side-post'),
'defaultregion' => 'side-post',
),

I did the same thing for:

'course' => array(..... 

Which allowed me to have center blocks within the course pages themselves.

Sweet!

Customize the navigation block and user permissions

Here I've made two changes to Moodle's navigation block. Both of these changes concern the way user courses are displayed.

• I like the way that "my courses" displays only the courses you are enrolled in
• I like how "Courses" displays categories......but it shows courses you aren't even enrolled in.

So the purpose of this blog post is mostly to hide "My Courses" and only show "Courses", while modifying the latter to only show user's courses.

First, you need to enable "Courses" to actually show up on the navigation block.

Inside your Moodle site, you need administrator access.

1)  Admin ->Appearance->Navigation

2)  Show course categories = yes

3)  Show all courses = yes

4)  save preferences

Now we also need access to our core moodle server, because we need to make changes to the code. 

Inside this file:   <yourmoodleroot>/lib/navigationlib.php

1) Go to line 1290 where you see this current code:

foreach ($this->rootnodes as $node) 

{

            // Dont remove the home node

            if ($node->key !== 'home' && !$node->has_children()) {

                $node->remove();

            }

}

2) and change it to:

foreach ($this->rootnodes as $node) 

{

            // Dont remove the home node

            if (($node->key !== 'home' && !$node->has_children()) || $node->key === 'mycourses') {

                $node->remove();

            }

}

3) This will hide the "my courses" link in the navigation block.

Now we need to modify "Courses" to only show the category/course list that the user is enrolled in.

Inside this file:

1) Go to around line 1523, inside the function called  "add_category(stdClass $category, navigation_node $parent)"   where you see this code:

if (has_capability('moodle/category:viewhiddencategories', get_system_content()))

{

                $categorynode->hidden= true;

            } else {

                $categorynode->display = false;

}

2) and change it to:

if (has_capability('moodle/category:viewhiddencategories', get_context_instance(CONTEXT_COURSECAT, $category->id)))

{

                $categorynode->display = true;

            } else {

                $categorynode->display = false;

}

NOTE: changing the "hidden" variable will make your hidden categories display with normal colored text, instead of that gray color

If you would like your hidden courses to also display with black text (this is for later in the tutorial), 

1) Go to around line 2177 and change this code:

$coursenode->hidden = (!$course->visible);

2) to this code:

$coursenode->hidden = false; 


3) Add this line next:
if(!$course->visible) { $coursenode->display = false; }

====================================================================

Okay so our core changes to the code are done. 

Now we need to have fun with roles and permissions!

An average user on my site is using the role "student", so the following example will be changing the role of student so they can only see the courses/categories they are currently enrolled in.

1. Go to Admin -> Add/Edit courses
2. Find the category you want
3. Click the "eye icon" to make this category hidden
4. Now click the category. You should see a list of courses or sub-categories......so while you are on this page, go to your settings block. You should see a link called "Assign Roles"
5. Assign your user to the role "Student"

Now let's modify the role of  "Student" a little bit

1. ON THE SAME PAGE (category administration), go to the settings block -> permissions
2. Choose the role of "student"
3. "View hidden categories"  should be set to true

So deep breath:  now on the Navigation block, the "Courses" link should only display the categories in which that user has been assigned to. 

==================================================================

Currently a normal "student" user in our case, can go tot the Navigation Block, and click on "Courses" to see a drop-down list of categories they are assigned to. 

That user can also see all the courses within that category, whether they are enrolled or not.

To make a user only see their courses:

1. First enroll that student in a course via the enrollment method your prefer
2. Then go the course and click the "eye icon" to make this couses hidden.
3. On your chosen category administration page, go to settings block -> Permissions
4. Choose the role of "student"
5. "View hidden courses"  should be set to true

Second deep breath:  now on the Navigation block, the "Courses" link will show only the CATEGORIES AND COURSES the student is currently enrolled in. 

It was a lot of work, and I feel like I hacked the moodle core a little.......but now I finally have a navigation block I can use properly :)

Adding CSS3 to Moodle 2.1: Yes even for Internet Explorer

Inside of my custom theme for Moodle, I've create some nice enhancements to my design through the use of gradient backgrounds, rounded corners, shadows for text and other elements. Sounds great right?

Unfortunately, Internet Explorer 6 - 8....maybe even 9......doesn't natively support those features. So while spending some time on google, I found a great solution:  pie.
No, really.
There is a plugin created to enhance the capability of IE6+ with CSS3 features.
It is called 'PIE' : Progressive Internet Explorer.
http://css3pie.com/

It has support for the following features:

border-radius

box-shadow

border-image

CSS3 Backgrounds (-pie-background)

Gradients

RGBA Color Values

PIE Custom Properties

• -pie-watch-ancestors
• PNG alpha transparency and -pie-png-fix
• Lazy Initialization (-pie-lazy-init)
• Layout polling (-pie-poll)

It's quite simple to use as well. Simply place the script within your project, and add one line of code to your CSS like this:

#myelement
{
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius:10px;
  behavior: url(path/to/PIE.htc);
}

One thing that it is lacking right now is support for text-shadows. So here is another script that can be used for that:
http://fetchak.com/ie-css3/

Same type of concept. Inside your CSS file, declare your text-shadow like normal. Then simply provide a link to the behavior like so:

#myelement
{

       text-shadow: 1px 1px 1px #888888;
       behavior: url(path/to/ie-css3.htc);

}


As an extra precaution, I went inside the file and commented the box-shadow and radius functions (lines 281-282) -- I didn't want those to overlap with PIE, which look a little better than this wrapper.
NOTE: I don't think the above code will work with em sizes, only with px (Haven't tested this yet)

Hope this was an inspiration to others!

How to add new field to database activity - Part 2

Okay, now that we have our new field created and working within the database activity, we need to add the functionality so that any file you upload will be automatically embedded.
NOTE:  Right now I only added video support, since there is already an image field. Perhaps I will add audio support later, but it's not pertinent to my needs right now.


1) Go to:    /mod/data/field/media/field.class.php   (<-- replace the word "media" with your custom field name)
2) Around line 125, you'll find a function called:  

function display_browse_field($recordid, $template)

Now we are going to add some code to this function which will recognize the incoming file extension and create a video player based on the extension.

3) Around line 145, you'll see this code:

$str = '<img src="'.$OUTPUT->pix_url(file_mimetype_icon...

This is actually displaying a link to download the file, instead of embedding it. Therefore, you can comment this out for now.

4) On a new line, around line 146 or so, let's add our first new code:

$path_info = pathinfo($name);

$myexten = $path_info['extension'];

This is taking the actual, submitted filename and checking the extension type.

5) Now all we have to do is take the file extension and load a different video player for each special case. You can do this by creating a 'switch' or 'if / else' statement. I prefer the latter - so here is an example for one video type:

        // *       
      // Load the html5 player - for mp4 videos
      // *
      if($myexten === 'mp4' || $myexten === 'm4v')
      {
      $width = 600;
$height = 300;

      $str = '<p><span class="mediaplugin mediaplugin_html5video">
<video controls="true" width="700" preload="metadata" title="'.$name.'">
<source src="'.$src.'" type="video/mp4"></source>
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'.$width.'" height="'.$height.'">
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<param name="src" value="'.$src.'" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--[if !IE]>-->
 <object data="'.$src.'" type="video/mp4" width="'.$width.'" height="'.$height.'">
  <param name="src" value='.$src.' />
  <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
  <param name="controller" value="true" />
  <param name="loop" value="false" />
  <param name="autoplay" value="false" />
  <param name="autostart" value="false" />
  <param name="scale" value="aspect" />
 </object>
<!--<![endif]-->
</object>
</video>
</span></p>';

return $str;
      }


The $name and $src variables are already existing in code, and you can see that I declare my own $width and $height variables. Also notice this param inside the player:

<param name="scale" value="aspect" />

Even though I set my own width and height, the "aspect" value will clamp the video to it's original aspect ratio. Meaning:  the video will NOT stretch to fit. 

If you want the video to stretch to your own custom dimensions, replace:

<param name="scale" value="aspect" />

with

<param name="scale" value="tofit" />

Lastly, please notice the variable that we are returning --> $str.

We are creating a string that contains the video player and we are returning that string as actual html code. This allows the player to be directly embedded inside the page.

6) Now notice we only checked for 2 video types, and only loaded an html5 video player. To continue this script, you also need to check for the remaining video types: 

webm, ogv, flv, f4v, mov, m4a, mpg, wma, avi

NOTE: wma and avi files will only play with embedded Windows Media Player ON Internet Explorer only.
_______________________________________________________________________________

EDIT:  I also want to point out that the quicktime player can handle most video files, including .mp4. This might be the best solution to using an html5 video player.

----------------------------------------------------------------------------------------------------------

It's a wise choice to use .mp4 as your video standard.

Here is a screenshot of the code at work:

How to add new field to database activity - Part 1

There are many changes that I'd like to make to the Moodle 2.1 database activity - I would mostly LOVE to embed images and video directly through the html editor.....like you can do on every other page. For some reason, this is disabled on the database activity. Oh well.

For now I've come up with a temporary solution: add a new field that allows you to upload a media file and it will be embedded in your page. First thing we are going to do is create the new field structure:

1. On your moodle server, go to /mod/data/field/
2. Copy the "file" folder and rename this (I chose to rename the folder as "media")
3. Open up the "field.class.php" file - go to the first line of class definition (line 25). 
1. Change this:    data_field_file
2. To this:           data_field_media   (<-- or whatever you named your new folder)
4. Inside the same file, the very next line (line 26), change this:
1. Change this:      var $type = 'file';
2. To this:             var $type = 'media';   (<-- your chosen name)
5. On your moodle server, go to /mod/data/lang/en/data.php
6. Here is where we define the name of our new field, so ALL of moodle can find it. If you like to keep things in alphabetical order, go to line 202 and add this:
1. $string['media'] = 'Media';           (<-- again, replace "media" with whatever name you chose)
7. In the same file, around line 220, add this:
1. $string['namemedia'] = 'Media field';           (<-- replace this with your name)

Hopefully your new field should be added to the database acitvity now.

To test if it works:   go to your database activity, to the "Fields" tab, and navigate to the drop-down box where you can choose a new field.  If all goes well, you should see your new field appear in the list!

Starting the blog...duhn duhn dahh

Since this is the first post, I'll explain a little more about the purpose of this blog. I've been learning the Moodle LMS for about 6 months now and I'm particularly familiar with verison 2.1. There have been many changes that I wished to have, so I've set out to create those changes myself. I have a fair understanding of most programming languages involving server and client code, but I'm pretty new to CSS and allllll the techniques possible within.

What I've done so far on my testing Moodle website:

• created separate themes
• changed some code around so I can control my themes per user
• changed the front page to my own html page
• created a block simply for the user's profile page (contains image links to personal pages)

My next entry will be about adding Javascript libraries to moodle, so you can use your own scripts and Jquery whereever you like! Let's make an awesome website with Moodle!