Category Archives: Content Management

I will list all the web CMS and database management systems related articles under here. You may come across useful article also in the Computer Science category.

Introduction to Drupal modules

Drupal is the second most popular Content Management System (CMS) with the best reputation for security. It is behind WordPress CMS because for most non-programmers/geeks, the administration of Drupal can be a nightmare. Even for someone who is not new to web programming, the learning curve can be very high. But there are good reasons why Drupal can be complicated. It is the most flexible CMS that has a very good adaptability. You can built a simple blog and over time you can turn that into a highly complex cooperate website. In order to do that, you will have to go utilize Modules.

Modules

Durpal Modules are like Plugins in WordPress. What the heck is a plugin anyway? They can be use as synonyms since the primary task for both is to extend the core functions of respective programs. If you are still confused, think of it as a software for Windows OS while the Windows OS itself as the CMS. These Modules can be downloaded from a repository (most common) or they can be custom written by the web developer. Modules extend the usefulness of the CMS by addition of extra functions such as Google Custom Search.

Installation

All the official Drupal Modules can be found here. You can either download them and upload it back to your web server or you can simply copy the compressed folder URL and installed it through the Administration Modules window.

Copy the link by right click (Windows) or download.
Copy the link by right click (Windows) or download.
I recommend installing the latest stable version of the module that supports your version of Drupal.

To upload, go to the Administration Modules window and choose install new module.

Administration Modules Window with a second arrow pointing to the Module install.
Administration Modules Window with a second arrow pointing to the install new module.
This will open a section in which you have the option to either upload or copy/paste the URL directly from Drupal repository.

After installation, go back to the Modules Administration and enable the newly added Module.

Going back to Modules after install.
Going back to Modules after install. Make sure you save your configuration before exiting the Modules admin window.
Please not all modules will be able to run because some modules require other specific modules to be installed in order to run (inter dependent or dependent).
Enabling new modules.
Enabling new modules.

With any type of install in computers, the most impotent is updates. As soon as you install a new item, run Drupal updates known as cron. It is better if you run cron over manual updates but I don’t want to go into details of cron in this article.

Checking for Drupal updates.
Checking for Drupal updates.

After enabling them, they will be ready to use. The usage varies depending on what type of Module(s) you installed. Therefore it is almost impossible to provide instructions on how to use whatever you installed. At least this should get you started on Modules. If you have any specific questions, try Drupal.org or contact me.

Notes: There are bunch of core modules comes with Drupal installations such as blocks module. They are essential for the CMS to operate properly. But still some of them may be disabled or deleted. The core modules should not create any problems for the site. The add-on type of modules I discussed here may create problems / conflicts. Always test the site after installing a single module.

Optimizing print friendly version

Sometimes it is very important to provide users with access to “print friendly” (printer friendly, print file, etc) version of the web content. When publishing content focused pages, the added images / diagrams, side bars and other items that help creates a smooth surfing structures can also work against “printability” of a website. Newspapers, University and other text-content based websites are catered towards individuals who may want to have a physical copy of the materials published. But when a user try to print without a properly formatted print friendly option, it could print with; lots of black space in between, off centered, advertisements and occasionally not printing anything at all. This article is written based on WordPress CMS, but can be used as a guideline for any website with CSS driven print friendly files.

Skip Tech Jargon

What is a print friendly version?

A print friendly version is exactly what it describes. It is a version of the web page formatted specifically for printing as opposed to “looks and feels”. A good printer friendly version would reduce the ink usage and maximize the area of printing for content. Most developers like me, also reduce the unwanted texts and formatting such as in page buttons such as “Also check out these articles” list and the “Skip Teach Jargon” button.

This version can also be used for saving web pages. I use Adobe Acrobat Professional to save web pages with just the text. If you convert a web page into a PDF (Portable Document Format) file, it will also include those junk materials. By using the print friendly version, not only the PDF file would be easy to read, but also it will reduce the file size significantly. This is an advantage for web developers as well. Since the file size has been reduced, the server load for downloading text content from your site for printing and PDF formatting will be significantly reduced.

Print friendly files

There are several ways of creating print friendly version of a web page. But with ten years of experience I can safely say there are only two categories of doing things in computing; the dumb way and the smart way.

The “dumb” method of doing it is actually was not always dumb. In the old days (back in 1995 and such) we used pure HTML with graphics for web development. We did not have access to web based programming languages like PHP (Hypertext Preprocessor) or CSS (Cascading Style Sheets). Most developers decided to create two separate files of the same material; one with margins, side bars, menus, etc and another with just the context. Then the Adobe came up with their PDF platform. By utilizing PDF now people created separate files, but this time as PDF files instead of HTML files. Still this is redundant and consumes a lot of time and energy.

Then several server operating system developers like Microsoft (.NET/ASP) came up with automated solutions to get rid of the unwanted clutter from printing. As long a web developer uses their framework, one can build a site with no redundant files. It was still expensive and not an effective method for small scale websites that still may be on pure HTML.

In 1980s a web based styling language was created called CSS. However, it didn’t get popular until recently when PHP was introduced in 1994. Not only major web sites like IBM.com extensively began to use CSS and PHP, but the CMS (Content Management Systems) have picked up their phase with it. Long story short, thanks to CMS programs and open source nature of CSS and PHP has revolutionized how we create print friendly versions.

In CSS, div and /div tags are like boxes that holds your code. You can label every div box using arbitrary identification (id) values which can be letter or numbers of both (no white space). Using these ids you can make changes to specific set of content (as long as you do not have two divs with same id).

CSS class vs id

Either class or id attribute can be used with elements such as p and div. Their functions are actually the same/similar. There is a confusion even among professional web developers on which one to use. If you go by the book, then id is used when the behavior occurs only once per page. The class is used when the behavior is applied multiple times on a single page. For our discussion, I am going to use ids to keep it simple.

Creating a print friendly file

ERRORS
If you make an error during modifications and could not log back into your WP Dashboard, use the backend access of your server to delete the newly added code and fix the problem.

Please use CSS because this is the best way to reduce server load on your computer. It is a very flexible language. CMS programs like Drupal and WordPress use div elements to indicate where different types of information begins and where they ends. They are like anchors or identification hooks. By manipulating the behaviours of these, we can produce very well developed print friendly files. In fact, they are dynamic and never create the file in advance (except if you have cache enabled). Every time you make a change to your page, it will also affect the printer friendly version since it also uses the exact same database as the one you just edited.

Another important thing with CSS is that you can edit a CSS file without changing anything in the original file. Here is an example of print friendly setup on the HTTP end. In the CSS code below, I use an external CSS file to give the instructions for print friendly version. The actual print friendly version is not directly modified.

<div id=”header”>
<img scr=”boo.jpg” width=”900” height=”60”>
</div>
<div id=”content”>
Hay Sanuja, <br> I think you are cool!<br> Do you think SiO<sub>2</sub> is <u>super-hot</u>?
<p id=”like”>But I remember you said you like <i>kyanite</i>. That is not cool and I hate you.</p> 
</div>
<div id=”myads”>
Google Ads are awesome. Do you like the following ads?
<p>Go crazy with minerals! Buy our microscope today. It comes with Germans for your convenient.</p>
</div>

Optimizing printed materials

By controlling what gets printed, we can optimize the print friendly format. Do you want your users to print with advanced styles such as large text headings? Do you want your users to print unwanted texts such as related posts? How about the title image of your site?

On this website, I have disabled title image, Google Ads, unwanted texts and clumsy formatting. If you decided to add scripts from different sources, you can still manage them as long as the scripts you used are well written. I use FireBug plugin for FireFox browser (it is also available for Chrome) to determine what div container is used for each section of the script. By using this knowledge, you can say {display: none;} for any and all elements you do not want your users to get print.

For example, by using .tag-cloud {display: none;} in the CSS file for printing, will remove the tag-cloud (if it uses “tag-cloud” as it’s div id) from printing.

Remove title image

Now by writing into the external CSS file with the id for the title image (it is header in my particular site), I can produce a file for printing without the large image.

/*
REMOVE TITLE IMAGE FROM PRINT
*/
@media print
{
  .header {display: none;}
}

REMINDER
The identification values for div containers may varies from site to site since they are arbitrary values.

Remove advertisements

I have the ads div container with identification “myads”. To prevent it from printing, I added the following to my external CSS.

/*
REMOVE ADS IMAGE FROM PRINT
*/
@media print
{
  .myads {display: none;}
}

In the above example, we keep all the styling elements such as breaks, underlines and so on. But we get rid of the unwanted containers such as ads and header.

Remove Print icon from a specific page

On my Welcome page, you do not find an option for Print. The icon has “disappeared” because I specifically removed (hide) the print friendly version from the front page. To do this you have to specify the page id and the div container id, In this particular example, the page/post id is 888 and the div id is print.

REMINDER
Regardless of what we edit, these codes are added to the main CSS file (NOT to the print CSS file). However, the @print will inject the CSS modification into the print.css file.

/*
REMOVE PRINT ICON FORM SPECIFIC POSTS
*/
body.page-id-888 .print {
    display: none !important;
}

The tag, !important is a used to promote the condition to priority. We do this because by default servers read CSS files one line at a time going from top to bottom. During this read, whatever the first condition given to an element will be applied or some cases what ever the last one. By adding !important at the end we force that particular styling condition regardless of where it appears in the style sheet.

If you want to do this to several specific pages, you can add each area with the same display: none condition using a comma between them.

/*
REMOVE PRINT ICON FORM WELCOME, CONTACT AND DONATE PAGES
*/
body.page-id-888 .print, body.page-id-80 .print, body.page-id-5694 .print {
    display: none !important;
}

This reduces the CSS file size (and remove clutter) hence improving the load on your server.

For sites on CMS programs

If you are on a CMS program like Drupal or WordPress, please create a Child Theme (“sub-Theme). Edit the CSS file(s) in this Child Theme because it optimize the load time (since it will only be loaded once) and it will prevent your custom edits from deletion during theme updates.

Advanced Modifications

Please be advised that if you are going to perform the following edits on a live website, you take the risk of bringing down the entire site if you make an error during the following edits. This segment is specifically for those of you who are advanced PHP and CSS users.

Overriding the default print.css style page with another in WordPress CMS. You can use the following code (copy and paste) to create your custom print CSS file.

add_action ('wp_head', 'printstyle' );
function printstyle() {
echo "<link rel='stylesheet'  href='LOCATION_OF_CSS/YOUR_NEW_print.css' type='text/css' media='print' />";
 }

I would like to thank Kenneth John Odle for teaching me CSS codes over the last few months. The above code also from his great work. Please visit his blog for more fun stuff.

Replace the LOCATION_OF_CSS/YOUR_NEW_print.css with the location of the new CSS file and the file name.

Summery

Click on any print icon on the top right hand side of my posts or pages for a live preview on some of these conditions. I recommend using Google Chrome for this because it will generate a preview before printing. If you do this on FireFox or IE, it may directly send the file to your printer. If you have a PDF program, try it out by printing my Print Friendly versions to PDFs.

Following is a set of all the code with general inputs. Replace tags and ids appropriately.

/*
REMOVE XXXX FROM PRINT
*/
@media print
{
  .XXXX_ID {display: none;}
}
/*
REMOVE XXXX FORM SPECIFIC POSTS
(not specific to print friendly)
*/
LOCATION_HERE.page-id-ID_NUMBER_HERE .XXXX {
    display: none !important;
}
/*
REMOVE XXXX FORM SPECIFIC MULTIPLE PAGES/POSTS
(not specific to print friendly)
*/
LOCATION_HERE.page-id-ID_NUM_01 .print, LOCATION_HERE.page-id-ID_NUM_02 .print {
    display: none !important;
}

  • Sanuja recommended using FireFox browser with FireBug plugin for identification.
  • He also recommended using Notepad++ for editing and/or FTP live editors (when the site is not on a CMS).
  • Create a separate CSS file for print friendly version. Most CMS programs comes with independent print friendly CSS file(s).
  • Use div and other element ids to denote specific segments of your data.
  • Main content should have it’s own div/element id.
  • While you can just print out the content only, it is recommended to have ids on all major elements such as ads, extra texts, etc.
  • Always perform edits in increments and create backups in between.
  • Reduce CSS file size by reducing clutter when same modifications is applied to several different pages/areas.

Resolving CSS conflicts

When we use multiple sources for scripts to create a website, the possibility of conflicts between codes increase significantly. It should not deter you from using multiple vendors/programmers for your website because the advantages that comes with them are too large to be ignored.

Skip Tech Jargon

We can resolve such conflicts in several different ways depending on what is causing the problem. Today, I am going to talk about CSS (Cascading Style Sheets) specific conflict resolution methods. It is a widely used language for styling of web based text and media. It is so popular, I cannot think of a single major website that is completely CSS free. The CSS conflicts are easy to resolve because CSS web standards are very flexible. For example, if you would like to change a condition in a styles sheet, you may not have to edit the original file. Instead, you may be able to inject the change from outside. I am going to show you how to change a behavior defined in a CSS file without changing the entire file.

WordPress Theme Conflict with GravityForms

My desktop theme, Graphene conflicts with an element in GravityForms that controls the alignment of buttons. The theme uses the same tag for the buttons which are aligned to the right. However, I wanted my Contact Form’s “Submit” button to be aligned to the left.

Generally, "Submit" should be on the left side.
Generally, “Submit” should be on the left side.
How do you do this?

– First installed a Child Theme (WP).
– Find the specific code that causes the problem. I use the FireBug plug-in for Firefox browser to determine the specific code/code set.
– Test the code by changing it in FireBug
– Open the styles.css file in the Child Theme in your WordPress Editor
– Enter (copy/paste) the CSS code in question and change the alignment value

/*
GRAVITYFORMS : Correction to Graphene button
*/
.block-button, .block-button:visited, .Button, .button, #commentform #submit, .wpsc_buy_button {
  float:left;
}

But if you just did that, it will align all the buttons to the right. I don’t want that! To fix this, I can edit the CSS again, but this time with the post identification in which the change should be applied.

/*
GRAVITYFORMS : Correction to Graphene button
*/
.postid-80 .block-button, .block-button:visited, .Button, .button, #commentform #submit, .wpsc_buy_button {
  float:left;
}

Now all the other buttons will be alinged to the right, except in post with the ID 80. This will keep the theme specific styling and yet allow the second developer’s code to run as intended without any conflicts between them!

Now the "Submit" is on the left side!
Now the “Submit” is on the left side!

Yet, all the other buttons are on the right side!
Yet, all the other buttons are on the right side!

Word of Advice

When you working with programming languages, it is impotent to READ the basics of the language. Any CSS manual will provide you with the information needed for the task above. If you would like to be proficient at web based coding, please try out the FireBug. It can even make the learning the CSS language fun. For example, this is a very general CSS outline for this type of modification;

/*
YOUR COMMENTS (HUMAN READABLE)
*/
.POST_ID-HERE .WHAT_EVER_ELEMENT_TO_BE_MOD {
  VARIABLE:ACTION;
}

Yes, I said this over and over, but still I find my readers seems to forget. Please make good backups not only before you edit a file, but during incremental edits to avoid major code conflicts.

Export and import SQL databases

Migrating SQL/MySQL databases from one location to another is not something most of you will do. There are circumstances where migrating a database from the administration side of a server is easier than trying to manually copy data. If you change your web host (or server) after creating databases in the current location or if you wanted to back up your database files manually, then it is essential to know the fundamentals of migration.

Skip Tech Jargon

Background

SQL/MySQL databases are like MS Excel spreadsheets or MS Access files. The only difference is these databases run on a web (or internal) server as oppose to running on a local computer. Fundamentally they are similar in operation, but differ in how they process and store data. The MS Excel is one of many low level database program. The MS Access is step up from Excel with much more advanced functions. The SQL/MySQL databases are much more advanced and extremely flexible than the previous products.

The flexibility of SQL/MySQL can be summarized…

  • They will run most (as far as I know, all) operating systems.
  • The deployment and distribution management is very flexible.
  • They have the ability to run several databases while communicating between them.
  • Easy universal database migration options (no proprietary files).

Migration

For this example, I used phpMyAdmin program installed on a Linux server. This particular example involves in transferring databases of mTouch WP plugin data from one location to another. You can use the exact same steps to migrate SQL/MySQL databases in phpMyAdmin. If you you a different program for database management, it should be similar to phpMyAdmin, but be careful of how you export it.

This is for advanced users ONLY. A mistake can take down your entire website. Use the guide at your own discretion.

1. Make sure your program/plugin/add-on is upto date.

2. Log into your server and then phpMyAdmin.

3. Choose the database location from the left pane of the phpMyAdmin window.

Choose the database location from left pane.
Choose the database location from left pane.

3. Select the database related to your program. It is better if you export and import all databases used by the program. Then go to Export.

Select specific files for export.
Select specific files for export.

4. Choose the export settings appropriately. As long as you will be using the same phpMyAdmin at the new location, it should not matter which format you save export the files.

Choose the configuration for import.
Choose the configuration for import.

5. Log into the new server/location and install the save exact software. It is highly recommended using the exact same software version as the one you are migrating from.

6. Long into the phpMyAdmin (new location) and find the location of the databases on the left pane of phpMyAdmin window.

7. Backup the new databases created by the program by exporting them (same as above). Then upload and install the old files using import pane.

8. Validate the install by going into the front end. If you have done everything right, you should be able to now have the database up and running.

It is as simple as that. Backups are very important so never ever skip backups before and during modifications.

Creating a skin from Graphene theme

Please note this article is specifically written using Graphene Theme. The concepts can be implemented on others themes with slight modifications.

Yes, WP is a very flexible CMS with wide range of third party extensions. Another reason for it’s flexibility is that the developers of WordPress CMS are pushing for multipurpose program. Within few years of launch, it went from a casual and easy to use blogging platform to a large scale web management system. To me it is a good thing for average user. Like I always believe, jack of all trades is better than mater of none.

Skip Tech Jargon

Mix and match

When we have so many open source free software to choose from, why not use them all? Most of the time, it is better to use specific software for particular task than to use one for all. WordPress (WP) for blogging and small scale websites, Drupal for large scale websites with large user base, phpBB for forums, phpList for newsletters, etc are few specialized software out of many. If you are designer then you would have to theme each and every one of the independent system to match each other. This can be done in two ways; by creating themes or through skinning.

What is skinning?

Both skins and themes creates “holistic and integrated spatial organization” of materials in their own ways. Skinning is different from theming because what skin keep all the elements of one platform and embed into the looks and feels of another. It neither changes any theme files nor create a valid theme. Themes directly change the structure of the front end interface and they are limited to the conditions of the program. For example, if I want to create a phpBB theme (a well written one), I have to comply with the guidelines for phpBB. Skinning takes all those conformities out of the equation because it is just a “wrap around” for “eye candy”. Once a skin is extracted from one program and installed on another, it just apply the same/similar style across different platforms.

Graphene theme skin

I will guide you on how to skin a WP theme using Graphene for WordPress. Some parts of this site uses phpBB and phpList with this exact skin. First take a back up of all your files and data. I would take up a task like this at nadir hours. You don’t want to mess with any code when your website is full of visitors. If you are launching a new site, consider things like forums before hand.

Copying the code

Log in to your website and choose appropriate Column Option. It is better to choose an option with no side bars because the screen real estate is very important. You can do do this by two ways in the Graphene Theme. One is using the Graphene Options.
Log in –> Dashboard –> Appearance –> Graphene Options –> Display(tab)

This will make the entire website (each and every page) default to whatever you choose. Another way to do this is under each post/page, you should find an option to choose Column configurations specifically for the current post/page. I used the later since I don’t want the entire website to have no columns during the setup.

After you setup the page/post, visit the page and go to the source code from your browser. Copy the code from div id="container" to div id="content-main" class="clearfix grid_16". Do NOT copy the following code. It will break your site since this is specific to my site.

The following code is used as an example. DO NOT copy the code and paste to your system even if you are using this theme. I am NOT responsible for any issues arise out of editing the core files of phpBB and/or WordPress.

<div id="container">
<div class="bg-gradient">
<div id="container" class="container_16">    
<div id="top-bar">

<!--Top Social Profiles bar-->
  <div id="profiles" class="clearfix gutter-left">
      <a href="https://G+_URL" title="Sanuja on Google+" id="social-id-1" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on Google+" /></a>
      <a href="http://FB_URL" title="Link sanuja.com on FB" id="social-id-2" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Link sanuja.com on FB" /></a>
      <a href="LI_URL" title="Sanuja on LinkedIn" id="social-id-3" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Sanuja on LinkedIn" /></a>
      <a href="TW_URL" title="Follow on Sanuja Twitter" id="social-id-4" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Follow on Sanuja Twitter" /></a>
      <a href="http://FULL_FEED_URL" title="Subscribe to sanuja.com RSS feed" id="social-id-5" class="mysocial social-custom" target="_blank"><img src="http://FULL_URL.png" alt="Custom" title="Subscribe to sanuja.com RSS feed" /></a>
  </div>

  <!--Search form-->
  <div id="top_search" class="grid_4">
      <form id="searchform" class="searchform" method="get" action="http://MAIN_URL">
      <p class="clearfix default_searchform">
      <input type="text" name="s" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value="Search" />
      <button type="submit"><span>Search</span></button>
      </p>
      </form>
   </div>
 </div>

<!--Banner image->
<div id="header">
<img src="http://BANNER_URL.jpg" alt="" class="header-img" />        	       
<h2 class="header_title push_1 grid_15"><a href="http://MAIN_URL" title="Go back to the front page">Sanuja Senanayake</a><h3 class="header_desc push_1 grid_15">noreply@sanuja.com may end up in spam. Check your spam box.</h3>                
</div>
    <!--Main navigation menus-->
    <div id="nav">
                <div id="header-menu-wrap" class="clearfix">
			<ul id="header-menu" class="menu clearfix"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://MAIN_URL"><strong>Home</strong><span>Index Pages</span></a>
<ul class="sub-menu">
	<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://sanuja.com">Front Page</a></li>
</ul>
</li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-ancestor"><a href="http://FULL_URL/about"><strong>About</strong><span>Site Information</span></a>
<ul class="sub-menu">
	<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about">About this Site</a></li>
	<li id="menu-item-2297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/about/biography/">Biography</a>
	<ul class="sub-menu">
		<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/cv">Résumé (Senanayake)</a></li>
	</ul>
</li>
	<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/system">Home Network and Servers</a></li>
	<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/faq">Frequently Asked Questions</a></li>
	<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/about/copyright">Copyright &#038; Privacy</a></li>
	<li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/about/sitemap/">Site Map</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-ancestor"><a href="http://FULL_URL/category/uncategorized/"><strong>Categories</strong><span>Article by Category</span></a>
<ul class="sub-menu">
	<li id="menu-item-1769" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/computer-science/">Computer Science</a></li>
	<li id="menu-item-2635" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/ce/">Consumer Electronics</a></li>
	<li id="menu-item-1716" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/earth-science/">Earth Science</a></li>
	<li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/documentary/">Documentary</a></li>
	<li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/opinion/">Opinion</a></li>
	<li id="menu-item-1142" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://FULL_URL/category/philosophy/">Philosophy</a></li>
</ul>
</li>
<li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/"><strong>Resources</strong><span>Exam Bank/Links</span></a>
<ul class="sub-menu">
	<li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/exams/">Exams and Quizzes</a>
	<ul class="sub-menu">
		<li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/anth201/">Anthropology 201</a></li>
		<li id="menu-item-1512" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/cpsc217/">Computer Science 217</a></li>
		<li id="menu-item-999" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy201/">Geology 201 GLGY/GOPH I</a></li>
		<li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy311/">Geology 311 Mineralogy</a></li>
		<li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy323/">Geology 323 Geochemistry</a></li>
		<li id="menu-item-2489" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy341/">Geology 341 Structure</a></li>
		<li id="menu-item-2499" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/goph355/">Geophysics 355 Exploration</a></li>
		<li id="menu-item-1754" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381/">Geology 381 Strat &#038; Sed</a></li>
		<li id="menu-item-2064" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/glgy381-final/">Geology 381 Strat &#038; Sed Final</a></li>
		<li id="menu-item-1426" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/alberta-class-5-gdl-quiz/">Alberta Class-5/7 GDL Quiz</a></li>
		<li id="menu-item-1472" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/canadian-citizenship-test/">Canadian Citizenship Test</a></li>
		<li id="menu-item-1069" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/exams/other/">Other Types of Quizzes</a></li>
	</ul>
</li>
	<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/links">External Links</a></li>
	<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://secure.sanuja.com/"><img src="http://sanuja.com/lock_24.png" height="12"> Secure Access</a></li>
</ul>
</li>
<li id="menu-item-990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-ancestor"><a href="http://FULL_URL/science/"><strong>Science</strong><span>Geology/Computer</span></a>
<ul class="sub-menu">
	<li id="menu-item-991" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/">Introduction</a></li>
	<li id="menu-item-3038" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/computer-science/">Computer Science</a></li>
	<li id="menu-item-3026" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/earth-science/">Earth Science</a></li>
	<li id="menu-item-1722" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/field-geology/">Field Geology</a></li>
	<li id="menu-item-987" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://FULL_URL/science/funny/">Funny Science</a></li>
</ul>
</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-ancestor"><a href="http://FULL_URL/contact"><strong>Contact &#038; Feedback</strong><span>Please Leave a Comment</span></a>
<ul class="sub-menu">
<li id="menu-item-2965" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-577 current_page_item"><a href="http://FULL_URL">Subscribe to Newsletter</a></li>
	<li id="menu-item-1286" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://FULL_URL/forum/">Forum</a></li>
</ul>
</li>
</ul>            
    <div class="clear"></div>
</div>
<div class="menu-bottom-shadow">&nbsp;</div>
</div>
<div id="content" class="clearfix hfeed">
<div id="content-main" class="clearfix grid_16">

You have to use the exact location of each file and replace FULL_URL plus whatever comes after that. For example, I have http://sanuja.com/blog/about/ instead of http://FULL_URL/about/ in the file I use.

Editing phpBB

After a successful install of phpBB, open overall_header.html and overall_footer.html file using cPanel, FTP or other back-end file access method in the following location:
…YOUR_INSTALLED_FOLDER / styles / prosilver / template /

The prosilver is a default theme that comes in the phpBB software bundle. You may edit any other theme and/or copy the theme for backup before editing it. Which ever the theme you decide to skin, find the template folder because that’s where we will find,

    → overall_header.html
    → overall_footer.html

In the overall_header.html locate the the area in which the phpBB begins it’s theme and paste the code just above it. I entered it in the first line after the body of the header file;

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

For the overall_footer.html repeat the same process except make sure all your div tags are closed properly. I found two divs not closing at the end causing the entire foot menu to get stretch. Of course, you add the footer code from WP at the appropriate place in the footer file. I added after the following code in the footer file;

<div>
     <a id="bottom" name="bottom" accesskey="z"></a>
     <!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

Copy the information for the skin head as instructed above. If you have a different theme, then go to the source code of a loaded page and find the CSS containers for header and footer.

Summery

For those of you who tying to implement skins across WP and phpBB follow the following guidelines (with any theme):

  1. Install WordPress and phpBB on your server (recommend using two different folders).
  2. Make a backup of each system before editing the code.
  3. Create a page with no side bars (recommended, but may use side bars).
  4. Load the page/post on a browser and view the source code.
  5. Look for any div elements; where do they start, where do they end and what do they contain.
  6. Only copy the header data from WP to import into overall_header, vise versa. When copying, copy the information within div elements with full URLs to prevent 404 errors.
  7. Use the documentation for the new system (in this case phpBB) for it’s outline files.
  8. Paste the data copies in step 5 into the appropriate location in the new system and save.
  9. Clear cache; on server/system, browser and any others that would store cache files. I would clear the cache after completing on each and very single step. I recommend updating large scripts in segments, which will reduce the possibility of a major code error.

References