This website uses CSS3 which isn't supported by ie6,7,8... but will display with modern browsers: Firefox,Chrome,Safari... If you are using ie6,7,8 please try other browsers to expand your horizons, Internet is actually beautiful. Please also install Flashplayer for flash videos.
About
When I started to make my own website, Justhost.com has all the brand name blog server software for free like wordpress, b2evolution, mambo, joomla, Nukes... more About...
There are many blog systems out there that are more popular and supported than NucleusCMS and many hosting websites that we can choose from, but for me, I've been using Justhost.com and NucleusCMS reliably for almost a year now. This is the tutorial on how to set up a blog using NucleusCMS system on Justhost.com in less than 30 minutes with basic videos, music and pictures fully embedded.
Preparation
A blog consist of a front page, which many blog system called themes or skins. We should browse the skins page to see which one we like and download it first. Look at a few blogs and see what we want our blogs to look like and what information needed to display on our blog. There are many types of layouts, 2 columns or 3 columns, etc. We can also edit the skins to fit our blog designs but make sure the credit for the original designer is there. So well designed skins will have to comply with all the templates needed to display contents of blogs, choose the ones that are most popular (used) and customize them to our preferences.
It's a nice way to show tittles on a webpage or blog. It's simple to use except when it has jquery conflict with other jquery. I embeded the jquery file with jquery noconflict in the FancyBox plugin. The css I include in my l2s.css. If you want to use tooltip, you need the "jquery.tools.min.js" from the flowplayer.org website and the css file from the tooltip page also. You need to put the javascripts on the html head page or your skin head.inc or head.php page. If you have the FancyBox plugin installed, all you need is the <%FancyBox%> placed on the head page.
inside the css file that has the url of the tooltip image and this need to be correct to display.
How to use
All we need to do is to place
before any tags that has "title" description that you want to display and close the div like this. The tooltip will display what's in the tittle only. Example, put the mouseover the image below, the title = "div tooltip close with javascript document.ready". Anyhow, you can put these divs on the top of the page and close it on the bottom of the body, then EVERY title will...
Flowplayer can play flv,mov,mp4 with fullscreen option, and NOT youtube videos. If you already installed FancyBox plugin, then all we need to do is to place the scripts with a splash image and the link to the video file and make sure the "flowplayer-3.1.5.swf" url is correct on your website. If you want to play flowplayer on an html page, you need to load the "jquery.tools.min.js" (this includes tooltip), if you just want the flowplayer js then download the "flowplayer-3.1.4.min.js" file to the head of your page like this, anyhow, it's either or and not both. I added the jquery noconflict for the tooltip there.
NonverBlaster Flash (flv,mov) Player with fullscreen option, I don't see support for youtube videos.
This is a totally free flash player for any website, easy to set up although the instruction is not very clear on its website. If you already installed my fancybox plugin then you're already to go. All you need is to use the same script here for each flv or mov videos and its picture. If you just want the player for an html page, then load the requirement files "swfobject" & "nonverblaster.js" to the head page like this. If your head page also contains the swfobject 1.5 for jwplayer already then you don't need to put this swfobject (2.0) on there. You only need one swfobject for all players.
<div style="text-align: center;" id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> and Firefox,Chrome,Safari,ie8 to see this video!</div> <script type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ var s1 = new SWFObject("/l2plugins/nucleus/plugins/fancybox/NonverBlaster.swf","single","500","300","9"); s1.addParam("allowfullscreen","true"); s1.addVariable("mediaURL","/testvideos/nice-flowers-hd.mov"); s1.addVariable("teaserURL","/testvideos/flower.jpg"); s1.addVariable("autostart","true"); s1.useExpressInstall('/l2plugins/nucleus/plugins/fancybox/expressinstall.swf'); s1.write("player1"); // ]]></script>
If we search the net, we would find tons of pop-ups scripts, most of them based on the lightbox. After looking at many of these pop-ups scripts, we like these 3 best: Fancybox1.3.1, shadowbox 3.0.1rc (new version 3.0.3 doesn't display pdf file), and mediaboxadv. We like them so much, we created the plugins for Nucleuscms system. BTW, all these scripts can be customized to do more, but our plugins were designed for simple web pop-ups. NP_FancyBox.zip, NP_MediaboxAdv.zip, NP_ShadowBox.zip.
Scrollmouse scrollable for images/videos galleries.
Totally Free.
Minuses:
Not much documentation, need jquery knowledge to use. 2. Not automatically detects the types of file and assigns the correct players. 3. Doesn't have slideshow built-in.
4. Jquery noconflicts need to be implemented, if not, will not work with other jquery scripts or mootools.
Browsers Compatibility
Safari works perfectly with Fancybox
Opera has some formatting problem with QT & MP4 players
Opera works fine with youtube
IE8 has formatting problem with Quicktime in Fancybox
This page now is implemented with the new mediaboxAdv1.3.1b.js and use Quicktime to play .mov files (for MAC users using Safari) and JWplayer as default for Flash, MP4, and FLV.
For those who has the older version V1.0 or V1.0.1, just download this modified 131bjs.zip and the new NP_MediaboxAdv.php.zip. Rename the old NP_MediaboxAdv.php to NP_MediaboxAdv121.php, extract these 2 zip files and you're ready to go. Please feed back if you have any problems.
Please replace "mediaboxAdv1.2.0.js" with the new "131b.js" while editing.
Please edit the "mediaboxAdv1.2.0.js" "131b.js" with notepad++ and give the nonverblaster player the path of your domain "http://yourdomain.com/yournucleus/nucleus/plugins/mediaboxadv/Nonverblaster.swf" for Nonverblaster player to work
Or if you want to use JWPlayer instead, then change the "true" to "false" in NB, give the "player.swf" the correct path then JWplayer will be a default player for flash.
To change ".mov" default player to flash player (nonverblaster or jwplayer) instead of quicktime if you want fullscreen option, just add the ".mov" to the "videos" container in the "mediaboxAdv-1.2.0.js" "131b.js" file.
There are instances that some people can't get the plugin...
We like to put some fancy displays for all the dates on our blogs and we tried the plugins from NucleusCMS site and we could never get it to work. After reading and searching, we found a simple way using CSS to have our ways with the dates For the programming pros, please don't laugh, but it does work for our blogs. Anyhow, this is for people who knows nothing about web design or web programming. Again, it doesn't work with almighty troublesome IE.
First, we need to create some fancy images for the background of our dates, the size we use is 60x60 pixels. We will show how we did ours.
Second, we need to create the CSS for our blog, if you like, you can use ours and change your urls and images. In our css, we use 2 images, 1 for index page, and 1 for item page (just want to make life more complicated), therefore, the class fancydate can display any image we want just put our images accordingly. We have 6 blogs, so we only need to use 1 fancydate.css for all skins' head.inc. Anyhow, if you just use 1 image for your blog, just select...
After tested with our website for a while, we pretty much feel comfortable to release the NP_FancyBox.zip. This plugin will automatically set noconflict for Fancybox jquery and load all 3 flash players for usage. This plugin also includes our collected jquery scripts that will this display most of the popular media types. If you installed all three plugins, you will have all the nice pop-ups ready to use for your nucleuscms blogs. We will post the usage in details next.
Our scripts will cover these types of displays and each type will have 4 colors of overlay:
1. Iframe, class="ir" (red), class="ib" (black), class="ibl" (blue), class="iw" (white), this class will display all href="text", "pdf","html","googlemaps"
2. Youtube videos, class="youtuber" (red), class="youtubeb (black), class="youtubew" (white), class="youtubebl" (blue), this class will display all href="full url of youtube video"
3. Youtube playlist, class="youtubeplr" (red), class="youtubeplb" (black), class="youtubeplw" (white), class="youtubeplbl" (blue), this class will display all href="full url of youtube playlist vides".
4. Movie (mp4,wmv,flv,mov,avi), class="movier" (red), class="movieb" (black), class="moview" (white), class="moviebl" (blue), this class will display all href="moviefile". Each type of "moviefile" will be defined with a player and the file to be played. There will be 3 standard files for...
On our blogs, if we want the readers to subcribe to be notified for new posts, NP_NotifyMe plugin is the one we use. It's very easy to use. Just install the plugin and edit a few lines in the options: caption label = Subscribe, email address = our email address.
Now go to the skin in the admin area and place the <%NotifyMe%> in there.
For comments, we can place <%NotifyMe(itemsub)%> in the item comments area of the skin
These days we see the icon bookmark on most of the webpages, and the bookmark button comes from Addthis.com all we need to do is the get the code for the button and paste it in our skin part, either main or item. We did both, main index and item pages along with our NotifyMe plugin codes.
These 2 are simple to use, but extremely useful for Nucleuscms blogs.
Sometimes we have some powerpoint presentations we received or made that we want to place it on our blogs. There is a program called Authorpoint lite that will convert a powerpoint presentation to flash so we can place them on our blogs. To us, if the presentation are just pictures, then we can just use jalbum to display the images with music embeded. If the presentation has animation, then authorpoint is the best. If we just want to convert powerpoint to swf flash files, then we use OpenOffice. We use authorpoint for our powerpoint conversion.
We must have MS powerpoint 2000 or newer for the authorpoint to work (97 doesn't work), install the authorpoint and it will be embeded in the powerpoint software interface. Open a presentation .pps file with music. Some presentation, authorpoint could embed the music to the flash, but some, we need to extract the music file and embed into the html file later. In this presentation, we had to extract the music from the presentation. To extract the music file from the pps file, we just need to save the presentation to html format from powerpoint.
save all files in a folder, in this folder, there will be...
Due to "Shadowbox license expressly prohibits such redistribution" the plugin download is no longer available. Sorry. The only way to have this plugin is for you to create one for yourself and I'll write up the procedure when I have time...
Create your own ShadowBox plugin
Since the shadowbox has been updated frequently in the last few weeks, this one is for version 3.0.3, please go there to download all the files, make sure you select the base stand alone version and all the options available (check all)
Unzip this zip file, you will get a folder "shadowbox3.0.3/shadowbox3.0.3", get the inside folder (the folder that has all the files) and rename it to "shadowbox", move this whole folder to your nucleus plugins folder (http://yourdomain.com/yournucleus/nucleus/plugins/). Now we need the NP_ShadowBox.php.zip, download and unzip the file to the same plugin folder (NOT inside shadowbox), for the thumbnail, you need this thumbnail.php.zip, download and unzip it to the "shadowbox" folder (INSIDE shadowbox).
Now go to admin page, you will see the NP_ShadowBox plugin, and install it like normal. This version 3.0.3 seems to have the JWplayer in it already. Go back to the ShadowBox plugin for usage. For all the CSS3 glowing outline, I don't know how...
1. Conventional ways like other CMS software is to install a separate directory for each blog on our server. The only difference is that we have to install plugins for each blog separately also.
2. Taking advantage of the Nucleus CMS system, we can create blogs within the original blog. Using 1 set of plugins for all blogs, 1 skin directory and media... to be short, 1 single directory for the system.
Assuming we installed our first blog successfully and can login to the admin area.
There are 2 ways to create the new weblog.
1. From the Nucleus management
2. From the shortcut "New Weblog" on the side bar. Both will come up with the same screen.
Enter everything and click create, we will have the confirmation 2 blogs in the admin home.
If we use the default skin-based we should see our blog displays 2 blogs
If we want to add another blog, then again back to admin, click New Weblog
Repeat all the steps then we now have 3 blogs.
Again, we will see 3 blogs on our final website.
With this type of set up, we need to customize our RSS also. All blogs should be set up and...
What does FancierURL2 do? It converts the url like this
to this. It actually make it easier to reference a url within a blog and it does look nicer and cleaner.
In our blog that has many blogs built in, we can just type "http://ltooz.com/ltooz341/blog/NUCLEUSCMS" and it would go straight to the blog, which is nice because we don't have to remember all the characters if we don't have FancierULR2.
First we need to download the FancierURL2_v06.zip file and extract it, it contains 2 files, ".htaccess" and "NP_FancierURL2.php"
Upload the ".htaccess" to the root directory = nucleus directory = l2spage
Upload the "NP_FancierURL2.php" to the plugin directory like all other plugins.
Install the plugin
Since the plugin must be on the top page of all plugins, the best is to install this plugin as soon as we set up our blog with NucleusCMS. Now, since it's on the bottom, we have to move it all the way to the top, by clicking "move up" . Another way is to uninstall all plugins except this one and re-install them, which ever is faster for you.
When it's totally to the top, then we need to edit options. We don't want to display time/hour/days and we use UTF-8 in case...
We do need to back up our blogs once in a while if we don't want to loose all the article we wrote if somehow our website is gone and we need to restore our blogs. Nucleus CMS does provide Block Backup, but this one has database and the name of the absolute path must be the same as the backed up one. NP_BlogIE backs up blogs, but only the contents which are portable to any other blogs. We can back up the contents of blog A and import it to blog B, all categories and items will be transferable.
Click Admin or blogie on the side panel, select the blog to be backed up (export), check all the boxes with comments and click export. A pop up window will come up with a generic blogbackup.xml file to save.
Save the file and if we use the firefox then open the content to find the file to rename to a specific name since all blogie will have the same name blogbackup.xml
The good thing about this blogie is that we can import (restore) to any blog we want and it will automatically restore all items in all categories. We have a trial Nucleus...
Click insert/embeded media icon, select the type "windows Media" and enter the url for the wma file, the size of the player.
Click advanced tab to select autoplay or NOT
Now we have the wmplayer size 200x100 pixel. Although the autostart is unchecked but tinymce actually put the value="false" which doesn't actually turn off the autostart. The correct one that we found to actually turn off the autostart is value="0", so we need to go to html mode to edit the code.
This is a ver nice plugin for playing mp3 format files which most people would use these days. The installation is pretty straight forward and extremely easy to use. Follow the instruction on the plugin page which requires the dewplayer. Download the dewplayer for future use with playlist. All the options to play mp3 is in the plugin page, We haven't use all except single mp3 player. Make sure the NP_FlashMP3 is installed.
dewplayers scripts inside the media folder.
Load an mp3 song
(@)<%FlashMP3(1/20091224-Princess Princess.mp3)%> This one doesn't work
(@)<%flashMP3(1/20091224-Princess Princess.mp3)%> Neither does this one.
So, either our system setup is wrong or the instructions on the plugin page is wrong. Our system only play if the code is "flashMP3(full url)" and NOT "FlashMP3(relative url)" and the "f"lashMP3 is lower case.
We tried the folder of mp3 songs, it doesn't play either. There must be something we did wrong with our system.
(@)<%flashMP3(http://ltooz.com/music/xmasmp309)%>
Anyhow, we only use this plugin for single song of mp3. For the playlist, we use DewPlayer xml player.
PLAYLIST for NucleusCMS
To generate a playlist automatically, we need this script xpsf_playlister.vbs and just follow the instruction, it's very easy. Again, we need notepad++ to edit the xml file. We create...
I played with the shadowbox 3.0.1RC a few weeks ago and I really liked it. I modified the NP_LightBox2 to NP_ShadowBox and I got it to work for my blogs. I don't know much about codes, but I modified so I can use it efficiently. Anywho, after trials and errors and gathered information on the Internet on how to "shadowbox", I ironed out all the bugs and here it is and it does even work with ie6 (the most popular but extremely hard to please browser). For those who wants to use it in an html webpage, go here .
Can't display text file with black text with black background. Can't figure out how to change the background color on the fly yet.
Modified Scripts to eliminate conflicts with LightBox2 plugins (rel="lightbox" used to work in shadowbox), without modifications, the shadowbox displays on top of the lightbox2 display.
NP_ShadowBox Usage
This plugin needs to include all the Shadowbox files & JW player5 files necessary to use, you need to download and configure since they can't be included in the plugin due to redistribution rights. Everyone needs to download the files him/herself.
We have both 2 columns and 3 columns skin types, we like to show 10 latest entries when a blog is loaded and when a category is selected, the list of latest 10 items will show for that category. Frank had shown us how to do it and we write it up so we don't forget how to do it later.
Latest Entries
Current Category Items List
In order to do this, we need to create 2 new templates in the templates section: catshowsidebar and headlines.
Edit Templates
Codes that need to be placed in the sidebar or the 2nd bar in the 3 columns skins.
Update/save everything and we should have the display as shown above. The pop ups in this item is shadowbox which we really like now.
I had no idea how the NP_CatShow works until I understand the template of a skin, I tried to put in on the sidebar.inc and it didn't work, on the skin templates, there's index & item which we put the vars and they both seem to work. Anyhow, NP_CatShow is to show the list of the items in the current selected category. If we put the var on the index/item footer, then it will show at the bottom of each item at the display page. As the instruction on the plugin page the author recommended to put at the "item template/item footer". We want to see how it display when the var is placed at the "index template/item footer".
Now we need to place the <%CatShow%> at the item footer of the index template of every skin that we want to use, where is the item footer of index/item templates?
Edit the index template of the skin
Update the template and look at the blog, everything should show up at the bottom of each item (item footer)
Well, we looked at the index page , every page shows up to 10 titles after the end of each item, which are too busy looking, although...
Nucleus plugin has flashvideo player that uses JWplayer that works very well, but it doesn't support full screen and playlist option or we don't know how. Assuming we followed the instruction on the plugin page and installed the plugin correctly, all we need to do is to copy a youtube link and place the code in tinymce editor.
"(@)<%flashvideo(http://www.youtube.com/watch/v/MvgN5gCuLac)%>" must have the @ in front of "<"
JWPLAYER
We use jwplayer playlists a lot, therefore we need to use the code generator from longtailvideo.com. We just place the vars and it produces the embeded code for our page. We placed all down loaded files to a folder in the root directory for accessing everytime we use the code generator. After we did it once, we can just copy the codes and paste to other pages with the new*.xml name.
We need to make a playlist file in xml extension, put it in a folder and direct the player to that file. Here it's youtube.xml, the playlist names/icons are placed to the LEFT, we want the player to play through all the videos, we must select repeat always, volume initial set to 50%, when everything is done, click preview and select embedded codes for NucluesCMS...
For the programming pros, please don't laugh, but it does work for our blogs. Anyhow, this is for people who knows nothing about web design or web programming. Again, it doesn't work with almighty troublesome IE.
