Geologist’s field checklist

The select all, none and invert functions uses JavaScript code. If your browser (like old mobile phones) cannot handle JS, you will sill be able to read the list, but may not be able to tick off the check boxes on the left most side. A word to those poor Geologists who still on IE instead of FireFox, Chrome (or webkit) or Opera, the time has come for a change. As always, the Print button at the top will remove my title images, menus and border for you to print. The check marks will also print as it is so you can use this page just like an Excel file.

This list may not be complete. Always check with your educational institution before making any arrangements. I am not responsible for you getting attack by a small rat in the woods or a bunch of engineers up to no good.

Travel Essentials

Select All | Select None | Invert








Personal and Safety Gear

Select All | Select None | Invert

























Tools and Equipment

Select All | Select None | Invert

















Electronics

Select All | Select None | Invert






If you would like to edit or add items to this list, please contact me. Improving this list may help your fellow students.

Updated: 30-July-2017

VMware Workstation setup

vm_mainNot everyone knows what is a virtual machine, let along using them. They are used by students and industry professionals to learn, program and test software operations in different platforms. I use them to learn the behaviors of multiple different flavors of operating systems (OS) without using expensive hardware.

Skip Tech Jargon

VMware

In computing there are many methods and processes used for creating these “dummy” environments. I called them “dummy” because when I installed an OS or a program in a virtual environment, I am not actually using separate hardware for my needs. You can install Windows Server 2012, Lubuntu or any version of desktop OS in you desktop computer without deleting any of your files or formatting the main hard drive.

VMware is a company specialized in virtualization software. They have a wide range of products. The VMware Workstation is one of the most basic programs used by non-advanced users. You do not have to be a programmer and/or a geek to use it as long as you can read and understand basic computer instruction!

Basally virtualization software allow any supported OS versions to installed into a folder (directory), which acts and behave as a separate computer, but it uses the exact same hardware as your current unit. VMware have developed programs to act as this middle man for processing I/O (inputs and outputs) to the virtual directory.

You have to buy a copy of VMware Workstation from here or find an evaluation copy and install it in your computer. Follow the instructions on screen, like any other software install. Please keep the default settings if you are unfamiliar with this program.

Choose the OS

VMware provide the platform for virtualization and you can choose from many different OSes to install. I recommend, Lubuntu, which is based on the Open Source OS, Ubuntu. You may download Ubuntu instead, but it requires more resources to run and good for the advanced users. In addition, you may installed any other proprietary software such as Windows 8, as long as you have a valid license.

Mounting the OS

I should have used the word, “mounting” instead of “installing”, because we don’t really install the OS in our machine with VMware. What we do is mounting it (Google it for the difference). Mounting allow to create independent Virtual Machines for each OS. Follow the instructions below for mounting. This is specific to VMware Workstation, but generally most of these instructions can be used for other virtualization programs with little modifications.

First download the preferred OS iso file and either save it in the same same computer in which VMware is installed (recommended) or burn it into a disc (not recommended, read below for why).

  • Open VMware and go to File (dropdown) –> chose New Virtual Machine…
    Adding a new virtual machine.
    Adding a new virtual machine.
  • Choose Typical –> press Next >
    Two paths to install.
    Two paths to install.
  • There are two options for the install. I strongly recommend using the iso disc image method. This will not only save you from burning CDs every time you want to install a new OS, but also give you the flexibility of OS updates. The mount media can be updated by replacing the ISO file in the future. It also provide added protection of having the media always in computer.
    Choosing the downloaded iso file.
    Choosing the downloaded iso file.
    Click on Browse… and select the downloaded iso file.
  • If you choose to mount Lubuntu, you will get this warning message;
    Warning: Could not detect the OS type.
    Warning: Could not detect the OS type.
    That is perfectly fine. Just click Next > and you will be directed to a new window (see below). Choose Linux for Guest operating system and Other Linux 2.6.x kernel or it’s 64-bit cousin.
    Guest OS and it's version.
    Guest OS and it’s version.
    If you have 32-bit ISO file, choose Linux 2.6.x kernel without 64-bit. If you have an older or a newer kernel based ISO file, choose appropriately.
  • Click Next > and choose whatever the name you want to give your Virtual Machine and the location of the install. I recommend using an SSD location if you have dual hard drives. Click Next > again for Disk Capacity Options.
    Disk capacity configuration.
    Disk capacity configuration.
    While the VMware recomonds 8.0 GB for maximum size, if you have lots of space, I recommend using a bit more like 10.0 GB. Yes, splitting is better for most computers under 500 GB hard drives. If you are on an SSD, I would not expect a typical SSD user to have more than 500 GB on their single SSD drive (at the time of this post, 2013).
  • This is the final step in which, a summery of all your configurations will be displayed. Do not open Customize Hardware… unless you are an advanced user.
    Summery of configurations before install.
    Summery of configurations before install.
    Click Finish and you are done.

Virtual Machine

After installation is done, you will see your new VM under My Computer tab. You may install several VMs on a single computer. All your VMs will be listed under My Computer tab. The status of the newly installed VM should read “Powered off” and double click to open it.

VM open tab.
VM open tab.
You will be directed to a new tab with operational information (see above).

There are few important things in this tab. Please refer to the figure above;

1. VM Details: Useful when troubleshooting errors.

2. Window: Indicates the current state of the VM.

3. Devices: Provide a lot of valuable information on the entire VM. You can double click on any of the items to modify the machine settings.

You can now use the Power on (green “Play”) button to turn on the VM.

My Lubuntu VM.
My Lubuntu VM on a Windows unit.

Termination Options

Do not get confused by the power down options when leaving a VM. These options are there to help you.

Power down options popup window.
Power down options popup window.

Suspend: VM will keep track of your last operation but will terminate all the processes. It is similar to hibernation or sleep function on Windows computers. You will not lose your data and yet the allocated memory for the VM will be free for other processes (no background runs).

Power Off: Completely shut down the VM. If you have any opened files, all the modifications will be lost. This is equivalent to normal shutdown of a physical computer.

Run in Background: VM will continue to it’s operations in the background. Use this options for installing updates in the VM OS but it will consume memory in your main computer.

Improving spatial visualization skills

There are thousands of research reports written on 2D and 3D thinking skills on the internet. You can read them all, but I do not believe absorbing those highly academic reports would make any difference for improving your ability in spatial visualization. The main message in all those reports is; the ability to understand 3D structures are very important to Science and Engineering students.

Skip the Jargon

If you were exposed to activities which force you to think in 3D, such as building blocks/Lego®, then you already have the basic knowledge on spatial visualization. Even if you were not familiar with such activities, as a Science undergraduate student, I am sure you have felt the pressure to think in 3D in some of your classes. I was extremely unconformable in my Structural Geology labs not because I do not understand the concepts in Geology, but I could not get my head wrap around the idea of having different views (interpretations) on a single structure. If you feel that you are “stuck” at thinking in 2D or 3D, do not give up because spatial visualization skills can be improved through 3D and 2D activities. One thing I have to make clear; I DO believe that spatial skills can be improved with experience, so it takes time.

Why university students may find it hard…

There are million reasons why, but some of the most common issues would be;

  • Prejudice negative attitude towards any subject that involves Math and Physics.
  • Coming in to Geology and assume it is more of an Art than a Science.
  • Underdeveloped critical thinking skills.
  • Preconceived notion about teaching styles of academic institutions.
  • Not putting enough time into the subject outside of the regular classes and labs.
  • Get it done attitude with no interest in learning the concepts.
  • Inability or inexperience in breaking down complex problems into smaller sections.
  • Learning or physical disabilities which hinders the ability to demonstrate full potential on exams.
  • Lack of guidance on how to improve critical thinking and spatial visualization skills.

I am not going to address them all. I am not qualified to do so and it takes a lot of my time to do research using academic databases (they are so unlike simple Google Search!). Today I am going to take on the last point, the guidance on how improve critical thinking and spatial visualization skills.

Math helps, but it depends…

I had talked to a lot of students at University of Calgary who had enrolled for Winter 2013 academic session. They think the Structural Geology class is hard even before the labs were started. The overwhelming response was the fear of 3D spatial visualization. Some students just do not even want to give it a try while others, including myself, gave up after the first few tries.

It should not be that hard considering some of us were able to score extremely high averages in Physics, Chemistry and Biology in high school (and the University). The problem I think is that we lacks the ability to translate our theoretical thinking into more practical visualization. For example, in the figure below, a current I flow through a straight wire has a magnetic field, B wrapped around the wire. But the magnetic field itself has a direction.

Right Hand Rule in Physics
Right Hand Rule in Electrics and Waves

The term “Right Hand Rule” is used in numerous applications of science. In Geology, we use our Right Hand Rule (of different kind) to find the strike and dip directions of a feature.

Right Hand Rule in Geology
Right Hand Rule in Geology

Here is the surprise! Even with some difficulty, most students would be able to understand the Right Hand Rule in Physics, but a large portion of the same group would struggle to understand the Right Hand Rule in Geology. The poor performance in our advance/intermediate Geology classes does not always reflect our abilities. Some Professors and TAs (Teachers Assistants; Graduate Students) told me that they cannot explain why we seems to be getting dumber as we progressed in our degree.

I believe Mathematics and Physics are the foundation for any type of science. Regardless which specialization you choose, the skills you learn in those two subjects can make the difference between being a good Geology student and being a great one. If you are a high school student, please seriously consider taking all three sciences all the way to Grade 12.

Pundits on childhood learning

New studies shows that these type of skills are not improved due to student’s ability to do well in math and science, but rather the opposite. Children who are exposed to critical 3D and 2D thinking will most likely excel in Science and Engineering than those who did not 1. Scientists agree that special thinking, specially orientation, is a skill which obviously can be improved. But like languages, once the mold has been created it will be bit difficult to retrain the brain. This is I think it is so impotent for Kindergarten and Elementary school educational system to include 3D and 2D activities. Not only these activities could help the future instructors of these children, but also can spur their interest in science.

In 2012, a company had created (by Debbie Sterling, an Engineer herself) a toy set for girls called Goldie Blox2. The primary goal was to introduce 3D spatial visualization skills to children so that when they grow up, these young women will be interested in Engineering. I do not have evidence on the effectiveness of the Goldie Blox, but considering all the other “pundits” observations on early development of spatial skills, I am sure it is (probably) would be a success.

3D thinking for Geologists

Each and every person have their own way of improving skills. What is common to all of us is the final goal; robust interpenetration of subsurface Geologic features using deductive reasoning. There are three major components to spatial visualization;

Relations, Manipulation and Penetration
Relations, Manipulation and Penetration 4

  • Spatial Relations; is the ability to mentally rotate an object on an axis3. Almost all Geologic features have undergone some form of rotation, even if it is as small as few degrees. I found most of the natural features have more than one rotational axis.
  • Spatial Manipulation; is the ability to mentally manipulate an image into variety of arrangements. The deformation history and mechanisms in Structural Geology is based on the deductive reasoning of spatial manipulation. A Geologist should be able to determine the unreformed state of materials based on the stress and strain indicators of the present state4.
  • Visual Penetrative Ability; is building a mental image of what is inside of an object using educated guesses and visible relationships. This is very important for Field Geologists. During my first field school I was forced to think inside the box when we analyzed the major folding event in Grotto Canyon in Canmore, AB. It is highly impractical for a Geologist to physically dig kilometers of hard rock and sediments to collect direct data even in small scale Geologic events5.

Big picture

All of the following figures (diagrams) were created using the web application developed by a University of Calgary Graduate Student6. Click on the image to view the original high resolution file.

You can improve your 3D spatial visualization skills by breaking down the large Geologic problems in to small pieces. I used the following approach. You may modify it to fit your learning styles.

1. Read and understand: The time you take to read the background of the Geologic feature / area in question depends on your current abilities in 3D thinking. Take your time to read as many materials as it needed even if it seems a waste of time (trust me, it is not a waste).

2. Starting out: Do not jump into complex problems with multiple Geologic features. Instead choose a simple concept. Just because something is simple, it does not mean you won’t be exposed to the major components of spatial visualization. The following figures show a flat plain cutting across a 3D block.

A plane (demonstrate a plainer feature)
A plane (demonstrate a plainer feature)
The perspective of the first figure (above) shows most of the plane that cut through the block. You should be able to see that, it is at an angle (045-degrees to the horizontal) even though you do not know the exact measure of it.

A plane (demonstrate a plainer feature) in a different view
A plane (demonstrate a plainer feature) in a different view
This one is another perspective of the exact same figure. Now you can see the North arrow is pointing away from the screen. You should be able to notice that the North arrow, which is a straight line, is not parallel to any of the edges of the plain (assume the plain is a perfect undeformed square). What does / doesn’t that tell you?

It tells you that the plain is not intersecting the block parallel to the North-South direction. In other words, it has a strike! To be exact, the strike is 160-degrees, but regardless of the exact value, you should be able to deduce it has a non-zero strike by just looking at it.

What did we cover so far in this simple example? We covered spacial relation and penetration.

3. Add Geologic layers: We can now replace the plain 3D block above with something more practice; a layered rock unit. For this example, it is still a perfect cube with perfectly horizontal layers. Can you visualize the layers in different orientations?

Normal fault with layers (side view)
Normal fault with layers (side view)
Did you realize that this is a normal fault? How long it took you to deduce the conclusion (without reading the figure caption)? At least if you have realized that this is a type of fault, that means your brain had recognized the layers as flat and continuous and associated the “odd” change on the South face of the block as a fault! That is what I call robust interpenetration. Most of us should be able to know what this figure is showing in less than 30 seconds. This robust ability to interpret diagrams and associate it with theoretical Geology is actually a skill that you developed through your training. STOP and think about it. This is pretty cool right?

4. Dipping with a fault: The Geologic layers are no longer horizontal. Yes, they are dipping, but do you notice anything special about them?

Right lateral fault with dipping layers (side view)
Right lateral fault with dipping layers (side view)
Left lateral fault with layers (side view)
Left lateral fault with layers (side view)
In both figures above, you should be able to recognize the sense of movement. In addition, all the layers are dipping at the exact same angle in our 3D block (that’s what so special about them).

5. Geologic manipulation: Finally now we have figures with somewhat complex deformations. They are all examples of anticlines, so to me they are not that complex at all.

An anticline with layers (top view)
An anticline with layers (top view)
If you are in the first year Geology class, first look at this block diagram from top perspective. From the top (or map view), you can only get limited information on the Geology. We can deduce that there are different layers. We could not tell which way they are dipping nor assume the relative thicknesses. But if I was to guess, I would say the beds have different thicknesses (this is incorrect).

This highlights a very important difficulty in 3D thinking. How do you know, your version of the story is right? The fact is, you do not. In the real world Geology, we use “quality of data assessments” to determine the probability of error. There are many different software like GeoScout, Golden Surfer, IHS Kingdom and many more to analyze the quality of data. While I love to talk about Computer Science side of Geology, I would leave that for another article (hint: it’s coming up!). The take home message is that quality of data is more impotent in Geology than the quantity of data.

The layer thickness is almost the same, if not at least the volume of each layer had not changed. The following side view of the exact same block shows an anticline. The block had been subjected to differential stress. Can you deduce the hinge-line? Is it plunging in any direction?

An anticline with layers (side view)
An anticline with layers (side view)
The answer is yes and no. We can safely say (not prefect) the hinge line is probably in the North-South direction. We can also say it is not plunging since we do not see the beds dipping along the North – South direction (assume there is no unnoticeable small plunge).

The following figure is an example of a plunging anticline. It is recognizable from the North-ward dipping beds parallel to the hinge line (or zone).

A plunging anticline with layers (side view)
A plunging anticline with layers (side view)

By simply manipulating the spatial relations, we were able to significantly improve our quality of data (hence improving the spatial visualization as well).

FOLDS IN DEPTH
I wrote a separate article on the 3D Geometry of Folds with much more vigorous details on fold anatomy. I recommend reading it for all Geology students.

6. Putting all three together: This is an advanced example that will test your abilities in all three major components to spatial visualization. The following image has two views combined as a single figure. On the left hand side, the 3D block image and on the right hand side, a map view of the same area. It is in a valley (but no contour lines are shown), it has two major folding events, two faults and non-zero strikes and dips for all the Geologic features.

Complex structures; a valley with a coal seam and fault. Borehole is indicated with the vertical tube.
Complex structures; a valley with a coal seam and fault. Borehole is indicated with the vertical tube.
The black layer is a coal seam and the tube on the left image indicates a proposed borehole for coal exploration. Now if you add vital elevation contour lines and may be structural contour lines, we are in heaven! Geology Rocks!

ADDITIONAL TIP
Now you have the background knowledge, do not forget to try out Visible Geology. There is a lot more to spatial visualization in Geology than what I talked about there. For example, how about cross sections?

Cross section of a ridge.
Cross section of a ridge.

References

1. Toddler Spatial Knowledge Boosts Understanding of Numbers

2. Goldie Blox

3. Shepard and Cooper, 1982 AND Shepard and Metzler, 1970

4. Guay (1976) and Ekstrom et al. (1976)

5. Kali and Orion, 1996

6. Visible Geology

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.