Making Ugly Plugins Pretty in Montezuma
The Problem
Some plugins automatically make pages that don't fit into the MZ template system. For this example, we will assume that the plugin makes a page at http://yourdomain.com/ugly-page that lays out as follows (even if it doesn't use the MZ grid): Code:
header [col12] Two obvious solutions are to:
However, if you really want to use the plugin and still want some customization options, they are listed in the next few posts on this thread, from easiest to hardest. All the solutions will make a new page at http://yourdomain.com/pretty-page. |
Solution 1 - iFrame and the Montezuma Grid
Overview. This solution uses the grid layout that comes with MZ. It puts the ugly page into an iframe and adds what's missing from your ugly sidebar to a second sidebar. Advantages:
HTML Code:
<div class = "row"> From your dashboard, make a new page, "pretty-page". Assign your new template to this page. In the content area of that page, put the following: HTML Code:
<iframe src = "http://yourdomain.com/ugly-page"> *Potentially Problematic Another possibilty might be to use CSS positioning to overlay a pretty sidebar over the ugly one, but there is a problem with this approach. If you don't get the top margin correct, it could cover all of part of the right third of the header, and it may not work the same on all browsers. If you are certain of your alignment and can do this, go for it. Otherwise, try something else. |
Solution 2 - JavaScript Sidebar Overwrite
Overview. This solution puts the ugly page into an iframe and uses JavaScript to overwrite the ugly sidebar with the pretty one. Advantages:
In order to get JavaScript to overwrite the ugly sidebar, you need to get the id of the outermost <div> tag you want to overwrite. Open the the ugly page in a browser, right click, inspect with firebug, and get the id name. In order to get the code for the pretty sidebar, open a page that already contains your pretty sidebar in a browser, and copy the html source code for the pretty sidebar by using view-source. Make a new main template, with no header or footer. HTML Code:
<div class = "row col12"> HTML Code:
<iframe src = "http://yourdomain.com/ugly-page" onLoad = "document.getElementById('ugly-sidebar-id').innerHTML = 'pretty-sidabar-html';"> |
Solution 3 - Edit the Plugin
Overview. This solution edits the plugin to remove the header, footer, and sidebar, and puts the content part of the plugin page into an iframe.
Find the plugin and click edit. Find the file where it outputs the header, footer, and, ugly sidebar. Remove (or comment out) that code. From your dashboard, make a new page, "pretty-page". Assign a template with the header, footer and pretty sidebar to this page. In the content area of that page, put the following: HTML Code:
<iframe src = "http://yourdomain.com/ugly-page"> |
Solution 4 - PHP String Extraction
Overview. This solution uses two PHP plugins to extract the content from the ugly page and put it into a pretty page.
Make your ugly page, open it in a browser, and do a view source. Find code at the end of the header, right before the content part of the page that you want to keep. Copy enough text from the end of that section that is unique and won't be anywhere else on the page. Don't copy anything that will change, like a date. For our example, we'll assume it's "End of header code." Find code at the beginning of the sidebar, right after the content part of the page that you want to keep. Copy enough text from the beginning of that section that is unique and won't be anywhere else on the page. Don't copy anything that will change, like a date. For our example, we'll assume it's "Beginning of sidebar code." These two lines of code should be the same for all pages made with the plugin. Check a few to be sure. (Bear in mind that future changes you make to your header or sidebar files might impact this function.) If you have access to these files, you could insert unique strings in them within comment tags such as: HTML Code:
<!--EndOfHeader-> HTML Code:
<!--StartOfSidebar-> Make and activate the following snippet (replacing "End of header code." and "Beginning of sidebar code." with the identifying codes you used): PHP Code:
HTML Code:
[insert_php] |
All times are GMT -6. The time now is 06:48 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.