My Blog: Banishing Bugbears

09 October 2016

There are things that I hate seeing when editing HTML code. So how do I stop website editors from using rouge tags and obsolete code? With CSS.

Paragraphs inside tables, underline, bold and italic tags. They are little annoyances that get in the way of semantic HTML web pages. However, how can you deal with them with a style-sheet that's only available inside the CMS's Visual Editor. This CSS will also flag tag attributes that aren't needed.

B,
I,
U,
IFRAME,
DIR,
MENU,
ISINDEX,
CENTER,
APPLET,
FONT,
BASEFONT,
P[align],
A[name],
LI P,
LI[style]
TABLE P,
TABLE H1,
TABLE H2,
TABLE H3,
TABLE H4,
TABLE H5,
TABLE H6,
TABLE BLOCKQUOTE,
TABLE[style],
TABLE[border],
TABLE[width],
TABLE[height],
TABLE[background],
TABLE[bgcolor],
TABLE[bordercolorlight],
TABLE[bordercolordark],
TABLE[cellspacing],
TABLE[rowspacing], 
TH P,
TH H1,
TH H2,
TH H3,
TH H4,
TH H5,
TH H6,
TH BLOCKQUOTE,
TH[style],
TH[border],
TH[width],
TH[height],
TH[background],
TH[bgcolor],
TH[bordercolorlight],
TH[bordercolordark],
TH[valign],
TD P,
TD H1,
TD H2,
TD H3,
TD H4,
TD H5,
TD H6,
TD BLOCKQUOTE,
TD[style],
TD[border],
TD[width],
TD[height],
TD[background],
TD[bgcolor],
TD[bordercolorlight],
TD[bordercolordark],
TD[valign]
	{
	color : #ff00ff !important ;
	background-color : #ff00ff !important ;
	}

If you are using MicroFormats, you'll need to add the exception rules below:

DIV.vcard SPAN,
DIV.vevent SPAN,
DIV.hreview SPAN
	{
	color : inherit !important ;
	background-color : inherit !important ;
	}

This is all saved as a single file at: ~/Frontend/Styles/pink.css.

To set this style-sheet in motion, you need to change the Visual Editor settings inside the CMS, so we open ~/Frontend/Config/VisualEditor/common.xml for editing and add a line:

<?xml version="1.0" encoding="UTF-8"?>
<visualeditor>

  <!-- stylesheets to import (tip: you can also use @import inside the CSS) -->
  <styles>
    <style file="Styles/core.css" />
    <style file="../../Libraries/Bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <style file="../../Styles/pink.css" />
  </styles>

[...]

</visualeditor>

The Result

With this in place, you will now see this when you edit your and use poor code (or paste from MS Word):


comments powered by Disqus