Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Making Ugly Plugins Pretty in Montezuma


  #1  
Old Mar 23, 2013, 02:54 PM
jerryc
 
367 posts · Oct 2012
Florida
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]
_________________________________

content [col8]         | ugly
                       | sidebar 
                       | [col 4]
_________________________________

footer [col12]
and that you want to show your pretty sidebar. (If your plugin makes different ugliness, adjust the solutions accordingly.)

Two obvious solutions are to:
  1. Live with what the plugin makes as is; or
  2. Find a different plugin.

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.
  #2  
Old Mar 23, 2013, 02:58 PM
jerryc
 
367 posts · Oct 2012
Florida
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:
  • Easiest to do.
  • Uses no JavaScript or custom PHP.
Disadvantages:
  • Ugly sidebar stays.
  • Header and footer only cover left 3/4 of page.
  • Pretty sidebar vertical alignment is only a guess.
  • Uses an iframe, which is indexed by Google, but not all search engines.
Make a new main template, with no header or footer.

HTML Code:
<div class = "row">
  <div class = "col9"><?php the_content(); ?></div>
  <div class = "col3"><?php dynamic_sidebar( 'pretty-sidebar' ); ?></div>
</div>
In your widgets, put what's missing from the ugly sidebar into pretty-sidebar. You'll have to put a top margin or padding into pretty-sidebar so it starts lower than the header. How high you set that will be somewhat of a guess.

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">
Solution 1a - CSS Sidebar Overlay
*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.

Last edited by jerryc; Mar 23, 2013 at 04:00 PM.
  #3  
Old Mar 23, 2013, 03:02 PM
jerryc
 
367 posts · Oct 2012
Florida
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:
  • Rather easy to do.
  • Uses no custom PHP.
  • Ugly sidebar gets overwritten.
  • Header and footer fill whole page.
  • Pretty sidebar is properly aligned vertically.
Disadvantages:
  • Ugly sidebar will load, then be changed to pretty sidebar after all images are loaded.
  • Pretty sidebar is copied from static html at some point in time, and will not be updated automatically. (Theoretically, you could use some custom JavaScript to make the pretty sidebar more dynamic, but if you're that good of a coder, you might as well go to a better solution.)
  • Uses and iframe, which is indexed by Google, but not all search engines.
This solution will work on about 99% of the browsers, those that have javascript enabled. Since the look of MZ already depends upon javascript, you don't need to worry about the 1% that don't have it, because none of your other pages look as nice to those users, either.

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">
  <?php the_content(); ?>
</div>
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, (substituting the correct id and html code):

HTML Code:
<iframe src = "http://yourdomain.com/ugly-page" onLoad = "document.getElementById('ugly-sidebar-id').innerHTML = 'pretty-sidabar-html';">
  #4  
Old Mar 23, 2013, 03:06 PM
jerryc
 
367 posts · Oct 2012
Florida
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.
  • Somewhat easy to do (depending upon the plugin).
  • Uses no custom PHP.
  • Ugly sidebar gets removed.
  • Header and footer fill whole page.
  • Pretty sidebar is properly aligned vertically.
Disadvantages:
  • You need to read through somebody else's PHP code to find and block the output of the ugly sidebar.
  • You will need to edit the plugin again when plugin it gets updated.
  • Uses iframe, which is indexed by Google, but not all search engines.
Go to Dashboard > Plugins > Installed Plugins

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">
  #5  
Old Mar 23, 2013, 03:41 PM
jerryc
 
367 posts · Oct 2012
Florida
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.
  • Ugly sidebar gets removed.
  • Header and footer fill whole page.
  • Pretty sidebar is properly aligned vertically.
  • Uses no iframe. All content indexed by all search engines.
Disadvantages:
  • Harder to do.
  • Requires two PHP plugins.
Install and activate the Code Snippets and the Insert PHP plugins. Refer to this thread for more about the PHP plugins used.

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->
or

HTML Code:
<!--StartOfSidebar->
If you use such comment tags, include the tags in the snippet variables, so they don't get included in your extracted content.

Make and activate the following snippet (replacing "End of header code." and "Beginning of sidebar code." with the identifying codes you used):

PHP Code:
/**
 * Extracts content of a page automatically generated
 * by a plugin, removing unwanted parts.
 * @param string $ugly_page_url url of page to be parsed
 * @return string html code for extracted content
 */
function custom_extract_plugin_content($ugly_page_url)
{
$ugly_code file_get_contents($ugly_page_url);
$header_ending_code "End of header code.";
$sidebar_beginning_code "Beginning of sidebar code.";

/* get starting and ending extraction points */
$start_point strpos($ugly_code$header_ending_code) + strlen($header_ending_code);
$end_point strpos($ugly_code$sidebar_beginning_code);

/* get length of string to be extracted */
$snip_length $end_point $start_point;

/* extract and return desired code */
$plugin_content substr($ugly_code$start_point$snip_length);
return 
$plugin_content;

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:
[insert_php] 
echo custom_extract_plugin_content("http://yourdomain.com/ugly-page");
[/insert_php] 

Last edited by jerryc; Mar 23, 2013 at 05:49 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
BWS plugins and Montezuma Theme jlee0409 Montezuma Theme 9 Mar 24, 2013 04:52 PM
Place Custom Menu Code with CSS & Javascript Looks Ugly GRF Sidebars & Widgets 7 Jul 22, 2012 10:00 AM
need danish translation pretty please!! johnboypitt Languages & Translations 2 Mar 3, 2011 05:58 AM
[SOLVED] Montezuma 2.0 for WP 3.x delware99 Other BFA WordPress Themes 2 Jan 20, 2011 02:33 PM
Widget style causing ugly display of widget list, breaks at special characters wfzimmerman Sidebars & Widgets 1 Mar 20, 2009 03:31 PM


All times are GMT -6. The time now is 06:27 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.