irislines web design
irislines web design

WordPress 3.9 TinyMCE4 Custom Styles

WP 3.9 TINYMCE4   modifications:

I added this:

function mce_mod( $init ) {

   $init[‘block_formats’] = ‘Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4’;

   $style_formats = array (

       array( ‘title’ => ‘testimonial’, ‘block’ => ‘blockquote’, ‘classes’ => ‘testimonial’ ),

       array( ‘title’ => ‘bold but not LOUD text’, ‘inline’ => ‘span’, ‘styles’ => array( ‘font-weight’ => ‘bold’ ) ),



   $init[‘style_formats’] = json_encode( $style_formats );

   $init[‘style_formats_merge’] = false;

   return $init;


add_filter(‘tiny_mce_before_init’, ‘mce_mod’);

function mce_add_buttons( $buttons ){

   array_splice( $buttons, 1, 0, ‘styleselect’ );

   return $buttons;


add_filter( ‘mce_buttons_2’, ‘mce_add_buttons’ );

to yoo_master/functions.php

I also added my styles to   wp-content.css   at


Optimizing for mobile (and everybody else)

I just attended a day-long workshop on Responsive Web Design at the User Interface Engineering (  UX Immersion Mobile conference in Seattle.

A comment by the presenter, Jason Grigsby (of caught my attention.    It was his opinion that if you had to choose between optimizing a site for speed in loading and making it responsive, that he’d go for the speed.    A site that might FIT on a small screen, but that still takes too long to load, will lose more viewers than one that loads quickly, even if they have to do some pinching and zooming to see the content.

For Joomla! sites a plugin can help with the speed thing:   JCH Optimize.  Here’s a blog entry about that:


Internal Service Error — can’t save certain Joomla! article

This turned out to be a mod_security issue because the article in question included the word “update”.   

Troubleshooting:   create and save a new article.  Fine.  

Copy and paste html from “guilty” article —  Internal Service Error message.

Copy and paste 1/2 of the html —  Internal Service Error Message.

Copy and paste the OTHER 1/2 of the html — Fine!

Add bit by bit until the Error raised it’s ugly head again —

Examine that bit  and change word “update”  to “up-date” — Fine!

I remember this from A LONG TIME AGO – where the guilty word was “select”.

I’ve asked by hosting provider to help — will post again about the procedure to whitelist certain words.


Love Fireworks CS6 preparation of CSS code snippets, but….

the code for gradients is not correct!

When I observed that my gradients were going right to left instead of top to bottom, I went in and changed rotation  -90deg to 180deg and things looked fine in Firefox — but I wasn’t REALLY understanding the problem —  Doing that made the gradients misbehave in Safari, which my client was using — He thought I’d gone batty putting a gradient band on the right side of  some home page widgets.

This morning I found this article:

with a wonderful explanation of why / how fireworks gets it wrong and a better approach to fixing it.   It turns out I only need to modify the last rule that the smartest browsers will employ.  By modifying all of them, I just confused myself!

WordPress BigMailChimp pluggin caused conflict with Contact forms

I tried multiple Contact forms and none of them would display Thank You message or redirect to a Thank You page.   Forms were submitting data just fine as I got all the emails  (sender and admin emails).

So… I began to disable other plugins to see if the conflict would be solved.   Lucky me!   The first plugin I disabled was BigMailChimp  – a signup form plugin and with it gone,  everything was fine.

New JCE and No Number plugins not happy with each other

Beginning to work on an updated ScreenShots manual for a client, and my No Number plugin buttons would only work if I toggled the editor OFF.

Not Acceptable!

I found I had to set the JCE Profile “Editor Parameters” setting for Validate HTML to “No”.

All is back as I expected.

IE Compatibility Mode triggered by :first-line selector.

A certain page on a website was causing IE8 to switch into “compatibility” mode — and to display as if it weren’t paying attention to any media queries, which it otherwise could handle.

I found a meta tag to add to force it to stay out of compatibility mode — and then it would just display NOTHING!  View source,  the content was all there,  but just a big white screen!

Other pages with similar elements were displaying OK.   A few pesky validation errors could not be eliminated, but they weren’t breaking other pages.

Before beginning to attack the long content of the page, I decided to try making a new menu item for this page.  I did, but before trying the menu link, I copied the  Joomla link and tested viewing just the article (no menu id, no modules)  in IE8.   It worked  fine, but was missing a few styles.

Turns out I had styled a few things on this page with a  .menu-### selector, so of course those styles weren’t in play.

I went back and edited the article with a wrapping div with an ID  and replaced the .menu-### selector with the #new-id for these 8 rules.  

Now the page was broken again!  

Narrowing in, I disabled 4 of the 8 rules.  — OK.  I kept narrowing until only the rule with a :first-line selector was left.   Commenting this style out, the page was fine.  turn it on,  the page displays NOTHING!

I was able to use a :first-child selector to  achieve the same appearance  — without having to alter the html,  because the two line list items had been turned into links.

The JCE editor coded it as two separate links with the between them.

I was able to select     li  a:first-child  and apply the font-styles I wanted.

If any list items are NOT converted to links, they’ll lose the styling, but I’ll deal with that if I must.





JCE editor woes.. icons missing, toggle editor button won’t work…

Today I was working on a Joomla 2.5.7 site with a responsive template.   Some image dimensions got saved in an article, so they wouldn’t behave responsively.    As I went looking for a setting I remembered seeing  to set “Always include dimensions”  to “NO”  I discovered that this is an option for the standard Image Manager that is not available in the Image Manager Extended.  I uninstalled the JCE pluggin  and all of my editor icons disappeared.  The “toggle editor” link displayed, but wouldn’t work.

Off to google and the JCE forums —   some people had success with other browsers — indeed, Chrome and Safari were fine with JCE.   Someone suggested clearing the browser cache — I did, but still no go in Firefox.

I uninstalled JCE,  reinstalled  and the File Manager but NOT the Image Manager Extended.  Still no go in Firefox.   Finally I  1.  Quit Firefox,  2.   Restarted Firefox,  3.  Cleared the Cache (again) and all was well.

Not sure what the bug is,  but Firefox takes some extra TLC. 

Happy to have found a sequence that solved it for this site.   Now I’m off to a Joomla 1.5.27 site  where I had given up on JCE for similar symptoms.   Maybe I can get it back again!

Extensions/Languages/Language Overrides

Just posting this here to remind myself that when Joomla components are giving you things you don’t want, you might be able to solve it with an override of the component’s language file.

Recently a colleague Mark Madison was struggling to kill the display of the word Category:  in as site that uses SobiPro.   A language override was a quick and efficient way to deal with this,  vs a full-blown template override.

Thanks to Andy Tarr for pointing this out.

IrisLines LLC
101 Washington Street
Brattleboro, VT 05301

802 257 7391