Tutorial: Custom Sidebox Widgets for the Vanilla Monaco Port

From Monaco help Wiki
Jump to: navigation, search
The sideboxes did not come default, but this tutorial aims to show you how to do this yourself within the file monaco.skin.php.
The aforementioned sideboxes above, in a larger, zoomed-in format.

I don't know if this was intentional, but the folks at ShoutWiki finally released the Messages extension code for the public for the first time. So, I was fiddling with code, and then all of a sudden I was able to find a peculiar-looking snippet of HTML:

                           
			    <div class="widget sidebox navigation_box" id="navigation_widget" role="navigation">
			    <dl id="WidgetNewsBox_wg" class="widget WidgetNewsBox">
				    <dt id="WidgetNewsBox_header" class="color1 widget_title" style="cursor: default;">
                                       Header area, or something similar, for the sake of this tutorial, this is the blue box title!
				    </dt>
                               <style>
                               .shadow .widget_contents {
                                margin-left: 10px;
                                }
                              </style>
			    <dd id="WidgetNewsBox_content" class="shadow widget_contents"><br>
				    This is the body of your custom widget, please use  s accordingly.
			    </dd><br>
		    </dl>
	    </div>
            

Explaining the Code Above[edit | edit source]

The code above prints a box similar to the "Community" or "ShoutWiki Messages" boxes you can see found on the left side of this very page. Assuming you placed the code above in the right area of the PHP file monaco.skin.php, you should be good to go. I'll be using one of the ports upgraded by DOOM Wiki, but this should typically apply at a similar breakpoint in any port of the original dantman-monaco-port.

The earlier versions of Monaco enabled on Wikia sites had the ability to create these from the ground up using a drag'n'drop interface, but was removed sometime in 2009. The remains are now here, so if someone knows how to, they can create a tool to do this once again using this tutorial as a basis for that.

Code Changes[edit | edit source]

The code for Monaco appears to change as the mists of time force it to be upgraded time and time again, and so screenshots add here will be useless. However, I do believe there is a comment section if you read far enough in that will tell you "ending the sidebar." Above this, find the last , and paste the above code in the new area.

Output[edit | edit source]

The output should be a new box that has a title of "Header area, or something similar, for the sake of this tutorial, this is the blue box title!" and in the body it should say "This is the body of your custom widget, please use  s accordingly."

If you know what I mean and could explain finding the place in the code of monaco.skin.php, please add it here or in the Discussion page. Peace!! DJ m0m0 (talk) 03:36, 6 July 2016 (UTC)