Note, that I am actually modifying the leatherbound theme.
In that theme>leatherbound>style file, I placed my "shadowbox.css" file and all the images in the same file, so that I am not required to modify the .css file's call for the images.
In config file of the leatherbound, I found the $THEME->sheets = array('core',); and I changed it to $THEME->sheets = array('core','shadowbox',); to include my shadowbox.css.
In theme>leatherbound>layout file, I did not modify frontpage.php and general.php, because I don't know what that exactly does. So instead, I went into my moodle website, and under Appearance>Additional HTML, I put the following code "within the HEAD":
I manually typed in the html code in the content that I wanted to display. Which is this:
<body><a rel="shadowbox" href="http://www.youtube.com/v/ElxFioGNh24" title="youtube">Hi</a></body>
Because it is youtube link, I had to click "prevent automatic linking" setting for links.
It is still not working. The problem must be either that moodle isn't seeing the shadowbox.css file, or shadowbox.js file.
IF it is seeing those two files, then the problem must be that the call within the moodle is being placed after my html code that uses the shadowbox.
Could you help me out with this? This was and is the biggest challenge that I've been facing.