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.

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!

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.