CSS overriding entire site appearance [#903608]

The Bible.css file has a bug which breaks useability depending on which theme you are using. The issue I ran into was with the following code:

em {
 color: #808080; /* gray */
 background-color: #FAFAD2; /* Optional */
}

Because this is not class-specific, it makes several other things (such as tokens in my status messages) become unreadable on my site. I recommend using an alternative approach with an additional selector.

somediv em {

em.someclass {

I'm not sure where it's actually used by the Bible module so I don't have a specific recommendation. In the meanwhile, I've deleted that piece of code from my site. I'd rather have some broken on the new module rather than my whole site being affected.

Comments

Comment #1

benlotter commented 30 December 2010 at 02:32

Version:

6.x-1.3-alpha1

» 6.x-1.2-rc12

I recently upgraded to the newest version of this module and I ran into the same CSS issue. Here are some more details which I hope will help you to resolve this issue.

The CSS is bible.css is breaking the entire site. Specifically as an example, I offered the above code. At the time, I simply deleted the code form the css and added a comment into my own bible_overrides.css. Unfortunately, when I upgraded to the latest code I had it overwrite every file and the code which broke my site got back into bible.css.

Workaround:
As a workaround and so a future upgrade doesn't break my entire site again, I have placed the following code into bible_overrides.css.

em {
  color: inherit;
  background-color: inherit;
}

Additional information in case anyone is stuck with this same issue:
In case you're not familiar with using css overrides, here is the code I put into my themes template.php file. Note I place them in reserve order so that the last one is applied while override everything above it.

/* custom css */
$theme_path = drupal_get_path('theme', 'corolla');
drupal_add_css($theme_path . '/guided_tour/guided_tour.css');
drupal_add_css($theme_path . '/css_module_overrides/bible_overrides.css');
drupal_add_css($theme_path . '/base_overrides.css');
drupal_add_css($theme_path . '/style_overrides.css');

So far this is what my entire bible_overrides.css file looks like.

#header-region .block-bible {
  border: 4px outset #F9E582;
  padding: 5px;
  min-width: 300px; max-height: 200px; overflow-y: hidden; /* 2010-12-27 BL added to prevent lengthy passages from ruining the display */
}


#header-region .bible-more-link {
	display: none;
}

#sntext {
	/*color:	#533523;
	background-color: #371912;*/
	margin:	0px;
	font-family: "Trebuchet MS", sans-serif; /*default font for entire site*/
	font-size: 90%;
}

/* removed the following code from bible.css as it was breaking readbility of status messages
em {
 color: #808080;
 background-color: #FAFAD2;
}
*/
em {
  color: inherit;
  background-color: inherit;
}