Drupal: Remove Unwanted HTML Markup

icon_htmlWhen working with Drupal (dare I say any CMS) there comes a point where you’re 99% there but there is some piece of the system fighting you — and you don’t have an easy solution (that you know of).

Often times designers complain about Views output, or other default HTML generated by Drupal. In a general sense learning to work with what Drupal gives you — rather than trying to radically change some PHP or template file in Drupal is the easier way to go.

Recently I was asked how to remove a div, or remove a form-group class from the following snippet because the visual formatting was off on the screen using the Bootstrap theme:

    <div class="form-type-bef-checkbox form-item-edit-field-list-crit-tags-tid-591 form-item form-group">
 <input type="checkbox" name="field_list_crit_tags_tid[]" id="edit-field-list-crit-tags-tid-591" value="591"  multiple="multiple" class="form-control" /> <label class='option' for='edit-field-list-crit-tags-tid-591'>WAAC</label>
</div>

In Drupal there are a few ways to do this from PHP:

  • use hook_form_alter to add/remove classes to the element.
  • override a template file to include/exclude the necessary HTML
  • use hook_process_page to use a Regex and remove the offending snippet (please don’t ever do this)

But, all of these ways take (coding) time. A bad code commit could affect your site uptime — module updates could affect your tweak, etc, the list goes on.

So take a step back from the problem, is PHP the only way to fix this error?! No! Use CSS and the cascading nature of CSS to fix the visual problem of an un-wanted margin applied via CSS previously up the page rendering process. So for the client in question we target the DIV in question and remove margin set by a previous drupal module/theme:

div.from-type-bef-checkbox.form-group {
  /* then "undo" whatever .form-group is doing -- you can see whatever it's
     doing by using Firebug or Google Chrome and inspecting the Element
     on the page.

     for example:
  */
  margin: 0 0 0 0;
}

This is not a PHP solution. Most Drupal themes come with a custom css file you can modify to your needs. This likely would not have any dangers of bringing down your website and since it’s easy to change CSS if the module updates you simply check these CSS tweaks at a later date.

Looking for quality Drupal Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 4 = 11

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>