Tag Archives: css & HTML

Google Custom Search Refinements

Google is a very popular search engine. One of the driving forces behind the popularity is the Google Inc’s generous offers such as free site based search. The Google Custom Search Engine (CSE) is a such free Webmaster tool. It allows the site owners to integrate the powerful Google search system into their website. I already discussed how to replace the default WordPress site search with your CSE. In this article, I will introduce you to creating content filters.

Filtering the web

As time progress, the amount of pages and media also increase with it. This is not just true for large scale cooperate websites, but also true for personal websites like SANUJA.COM. Someone who publish articles and other web items regularity would at least have one or two articles/items per week. If you multiply them by the number of weeks per year, that’s a lot of information. The problem with general web search on your site is that the visitor may move out of the site as a result of it. The solution is to use an integrated site search that only search your site. All Content Management System (CMS) comes with some form of built-in or modular site search. For average web owners, that’s all they need. But what if you would like to have more control over how the site content is search? The CSE will allow you to restrict your search to specific area of your site. This is how you configure your Google CSE to refine your search results.

Refining

If you have a section of your website that is more important than the rest, then refining is a good way to help the visitors narrow down their search. For example, on my site I empathize the academic exam bank. I want my visitors to filter out all the materials under Exams and Resources during a search (if desired). Here are the steps to creating a refining filter:

1. Log-in to Google Custom Search Engine (GCS) and select the search engine you would like to edit.

Selecting your Google CSE
Selecting your Google CSE

2. Choose “Search features” from the right hand menu and select the second tab “Refinements”. Now press “Add” button from the Refinements pane.

Adding a refinements.
Adding a refinements.

3. A pop-up window will appear with form for new Refinement addition. Save the item.

Add new refinement popup.
Add new refinement popup.

4. Choose “Setup” from the right hand menu and select the “Basics” tab. Under “Sites to search” you can add a limitation.

Refinement directory/link limitation.
Refinement directory/link limitation.

In this particular example I provided my visitors an option to limit their search to my exams area. Since all my exams bank questions are followed by the common URL, “http://sanuja.com/blog/exams/*”. Which is like a prefix. It will allow the Google CSE to limit all the returned search results to Exams pages.

5. Choose the Refinement option created in step 3.

Limiting the site directory and adding the Refinement
Limiting the site directory and adding the Refinement

Here is an example of a refined search…

Refined search results using the tab style.
Refined search results using the tab style.

Excluding content

You can prevent the Google Custom Search from indexing certain pages or URL (link) patterns. To do that, you can:

1. Navigate to exclude section by clicking the “Advanced” link at the bottom of “Sites to search” section.

Advanced link.
Advanced link.

2. Once in the Advanced sections, you should see “Sites to exclude”. Add either one URL at a time or use the prefix method just like in the refinement configuration.

Restricting (excluding) a prefix URL pattern.
Restricting (excluding) a prefix URL pattern.

There are few reasons to why you may exclude URLs, pages, images or other data. Pages from access restricted or membership based areas can be hidden from search results to prevent unwanted traffic to such areas. Sometimes images have copyright agreements that specifically restrict your users from searching images. You may have “junk” or temporary URLs such as http://domain.xxxx/P?7299 which often generated by some Content Management Systems or plugins/scripts.

Fixing overlapping content

We can use CSS codes to arrange containers of information in variety of ways. The vertical stacking order called z-index is used to denote which container will go on top of the other. Problems occurs when you write CSS containers without the consideration for the z-index value or use scripts from several different sources with undesirable stacking order. You can fix these problems in several ways.

z-index

The z-index tag can be placed in any CSS box. It is a relative value defined with either positive or negative integers. Higher the z-index value of a specific container, more forward it will be with respect to others. This is very useful when we need to place several different containers in a specific order. Therefore, if the z-index is set to 50 on one and 10 on another, that means the first one will be on top of the second. Yes, the z-index do take the values as it is including +/-.

Example of an issue and a fix

I do not want to go into too much tech details, so here is a great example of z-index overlapping problem.

On this website, I use two independent scripts for my main menu and the image popup. Both uses CSS and the main menu used to overlap on top of the popup image. This is undesirable because now we have this ugly menu on top of my beautiful pictures as shown here;

Menu on top of the popup image box.
Menu on top of the popup image box. Click for larger image.

To fix this, we need to know the div element id that creates the popup box. I found two; fancy_overlay and fancy_outer in the popup box CSS file that effect the behavior of the popup window.

/*fancy_overlay id*/
div#fancy_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 30;
}
/*fancy_outer id*/
div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 20px 20px 40px 20px;
    margin: 0;
    background: transparent;
    display: none;
}

I still don’t know which one will fix the issue, except fancy_overlay looks promising since z-index: 30; is in there. Through trial and error I found changing this z-index value would not fix my problem. My second suspect is fancy_outer and when I edited it with a z-index with a very high z-index value (I used 999, but it doesn’t have to be that large), it brought the popup to the front.

Note, it may be overkill to use !important but it is always a good one to use to make sure your modification take precedence over the others. CSS files always reads from top to bottom one line at a time. By making it !important we make sure our new condition is applied regardless where it appears.

/*fancy_outer id*/
div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 20px 20px 40px 20px;
    margin: 0;
    background: transparent;
    display: none;
    z-index:999 !important; /* OVERLAY ISSUE: fix */
}

This fixed the main menu overlapping issue.

Popup on top of the menu image box. Yay!
Popup on top of the menu image box. Yay! Click for larger image.

Custom CSS edits on a CMS

If you are using a CMS program like most websites out there, then please edit either your Child Theme (slave theme) CSS file or the custom CSS injection file. Do not edit the main CSS of any of the scripts, themes and files that will get updated over time. Every time you update an item in your CMS you run the risk of deleting all your custom CSS codes. This is why it is so important to edit a separate CSS file.

/*
OVERLAY ISSUE: popup image and main menu fix
*/
#fancy_outer {
z-index:999 !important;
}

Conclusion

It is not difficult to fix CSS overlapping conflicts. The most difficult part is finding the specific element causing the issue(s). I highly recommend using a program like FireBug plugin for FireFox to determine the conflicting code location. You may also use “view source” in any web browser and look for the div id of the element overlay. Have a happy CSS edit this summer!

Integrating Google Custom Search

The Google Custom Search Engine (CSE) is a server side program written in C++ for web developers to improve their individual search results. It comes in few different flavors as advanced as Google Enterprise Search servers to Google hosted search pages. I will go into deep end with Google Custom Search for personal websites, a free service provided by Google Inc (THANK YOU Google).

Advantage of CSE

Unlike a general Google Search or website specific Google Search (chocolate site:http://sanuja.com/), CSE allows great deal of control over the behaviors of your site search. The themes, refining filters, AdSense and results page layouts are few examples of customization options. You do not have to use all them, but you can improve the user experience of your visitors utilizing these tools.

Yes it is a free service as long as you allow Google Ads in results pages. I do not have any problem with this and I think it is a good deal for me too. Why do you ask? Because if you have an AdSense account, you can use that for the must have ads. This way if someone clicks on an ad, it will also goes to your AdSense revenue. To me this is a win-win situation. If you do not want them to insert ads, Google Inc offer several different packages. They are based on the volume of search requests. Once you signup for an CSE account, you will be able to choose one under “Business” section. NGOs and registered Educational institutions such as University of Calgary, could apply for a ad-free account without any addition cost. Contact Google Inc for more details.

This will also reduce the load on your servers specially during peak search periods. For some users CSE will speed up the search results because it is run on a Google server independent of their web server.

Some claim, which I am not sure about, that the CSE quarries will increase the page racking of your web pages in Google index. However, I can not seems to find any official information on their website.

Creating a Search Engine

Google Inc constantly updating their user interface (UI) on all of their products and services. The Google CSE administration section has been changed several times now that if you “Google search” information about it, you will see slight variations in instructions. As of 31-May-2013, the following steps would work for sure. Also keep in mind, they have switched from using PHP functions and iframes to JavaScript codes. This is better for most developers working with CMS programs.

  • Signup for a Google CSE Account or use your existing Google Account (Gmail, Drive, etc) at here
  • Create a Search Engine using admin options using New search engine. After creation verity your website ownership (if you haven’t done that in the past for other Google services such as AdSense). These are very easy to do, so I am not going to explain in depth.
  • Click on the newly created CSE and go to Setup. There you will see a lot of option, which also may appear in other areas such as in the Look and feel section. Again, I am not going to touch this today. The only thing we will change right now is the layout under Look and feel.
    Layout tab in Look and feel section.
    Layout tab in Look and feel section.
    Because most website owners wants to have a search form separated from the results page (almost all default CMS search engines), choose Two page layout and click Save and Get Code.

    Note: There are several options on how the results are shown. We will just stick with one, Two page option. Play around with your account for others.

  • Before you copy the code, click on Search Results Details button. It will show you an option for your results URL and an option for query parameter.
    Search Results Details drop down window.
    Search Results Details drop down window.
    Enter the intended search results page location (second red arrow) and change the query parameter to whatever you like. I recommend keeping the query parameter in its default state, q, because most CMS programs use s and other letters for their default built in site search. I found if this parameter is exactly the same as the built in one, it could potentially create a code conflict. But you can use anything you like from one character to several. Examples of custom parameters I came across on well reputed sites, cx, ser, search, s, etc.
  • After you set up everything by following the steps above, you are ready to copy the code! Make sure you copy and paste both the search form and the search results code.
    Get the codes.
    Get the codes.
    We will make a one simple modification to the results code later…
  • Copy and paste the search form at whatever the location you like and the results code in the same per-defined location.

Search form on steroids

If you want to use all the Google default settings on a simple HTML/PHP site, then you are done. But where’s the fun in that? There are few things you can do with a custom written search form. But you have to be careful on certain tags and attributes. You must have the name is set to the per-defined query parameter. I choose to go with the Google default, q. I will walk you through several different scenarios of integration.

Integrating CSE to HTML/PHP site

The following code will create a simple HTML form.

<form id="cse-search-box" action="http://google.com/cse">
  <input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" size="31" />
  <input type="submit" name="sa" value="Search" />
</form>

But this will not send the results to your custom results page we created. In order to do that, replace the http://google.com/cse with YOUR_URL. On this site it would be /blog/gsearch/(from now on I will be using this URL in my examples) or I could also use http://sanuja.com/blog/gsearch/.

Custom form background image

The copy/paste code Google provide for your CSE has a background image, cse_watermark. But in our custom search form, have the text “Site Search (type+Enter)”. If you prefer the original Google CSE look and feel, we can add that using the the same code Google uses. The only change I would make is to load the background image from your own server as opposed to loading directly from Google. This will reduce the load time of your pages with the CSE form.

First we will extract bits of code from Google provided search box and then we will add that to our custom HTML form. Copied the following from the official Google CSE Blog.

<input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-color: rgb(255, 255, 255); background-position: 0% 50%; background-repeat: no-repeat no-repeat;" dir="ltr" spellcheck="false"/>

The part we are interested in is style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; outline: none; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-color: rgb(255, 255, 255); background-position: 0% 50%; background-repeat: no-repeat no-repeat;" You can add this exact background image code within your input tag. If you took my advice and decided to load the image from your own server, change the background-image: url(YOUR_IMAGE_URL) to the appropriate URL.

Integrating CSE to WordPress

Let’s say you want to replace the default search in your CMS with the Google CSE. You can do this by editing the file or the code that contains the default search form. In WordPress it is searchform.php and in Drupal it is search-theme-form.tpl.php.

For the WordPress(WP) and Drupal(DP) examples, I am going to strip the search form as much as possible and add items from the barebone code. The following codes are separated with comments in between them. It is very self explanatory; the first one is the most barebone (must have values) and new tags, values and attributes get added as you go down the code.

<!--1. Must haves in searchform.php-->
<form method="get" id="searchform" action="/blog/gsearch/">
<input type="text" class="field" name="q" id="q" />
</form>

<!--2. Value added attributes-->
<form method="get" id="searchform" action="/blog/gsearch/">
<input type="text" class="field" name="q" id="q" autocomplete="on" placeholder="Site Search (type+Enter)"/>
</form>

<!--3. Adding webkit speech support-->
<form method="get" id="searchform" action="/blog/gsearch/">
<input type="text" class="field" name="q" id="q" x-webkit-speech/>
</form>

<!--4. Full blown HTML form-->
<form method="get" id="searchform" action="/blog/gsearch/">
<label for="q" class="assistive-text">Search</label>
<input type="text" class="field" name="q" id="q"/>
<input type="submit" class="submit" id="searchsubmit"/>
</form>

Few new items autocomplete="on" is one of many Google CSE input tag attributes. “Google it” for more information on it. The placeholder="Site Search (type+Enter)" is a HTML/5 input tag attribute for displaying a message to the user within the search box (kind of like the background image). The x-webkit-speech or x-webkit-speech="x-webkit-speech" is an odd code. It is only utilized by webkit browsers and most specifically Google Chrome. It is speak to text framework. The nice thing about it, when it is not supported by the browser, it will simply disappear.

You can replace the default code in searchform.php with one of the three codes above in WP. DO NOT save all three sets; it may result in a PHP error. I recommend using a Child Theme with the searchform.php to implement this change to the theme file.

I prefer the second or the third one. On this site we have a combination of the second and the third one. The problem with the forth code set with full blown version is that it may mess up your theme. It will add two extra lines; one on top with “Search” and one on the bottom with the button, “submit”. However, if your search box is in a sidebar area or placed in a location with lots of room, this last option can be the best one for you. It is all coming down to the styling of the website.

Integrating CSE to Drupal

Now I have already introduced all the nuts and bolts of Google CSE, we can jump into custom Drupal module creation. According to the guidelines for Drupal modules, which is like WP plugins, you should create the following files;
– CHOOSEN_NAME.info
– CHOOSEN_NAME.module
– CHOOSEN_NAME.js

The only major difference between DP and WP implementation is that in Drupal, even the integrated search itself is actually a “module block”. Therefore, you can simply create a module and install it. All the instructions for this is already well written here. If you have any specific questions, feel free to contact me.

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.