Community Add HTML Buttons Alignment

[Jim McClain]

The editor for the community/add form uses settings from wp-includes/css/editor-buttons.css. I’m not sure how to correct the styling of this page without having to make new edits to that file every time there’s an update to WordPress, which tends to be fairly often. I don’t think styling should be taken from any place else except the theme, if it can’t be coded into the plugin’s own CSS.

This is what I have a problem with and don’t know how to fix:

The HTML editor in the latest version of Firefox: http://featherrivercountry.com/images/support/ce-add-button-alignment1ff.jpg

Latest version of Chrome: http://featherrivercountry.com/images/support/ce-add-button-alignment1cr.jpg

Latest version of Opera: http://featherrivercountry.com/images/support/ce-add-button-alignment1op.jpg

Latest version of IE: http://featherrivercountry.com/images/support/ce-add-button-alignment1ie.jpg

As you can see, there seems to be no problems in Chrome and Opera, but Firefox has the last button wrapping the the next row (which also causes the label title to appear to be behind the buttons). I can’t even get the buttons to show for HTML view in Internet Explorer.

I don’t usually have Visual view enabled for myself because I feel more comfortable using only HTML. But I just enabled Visual editor and it looks like Firefox has the same problem as IE, in that the buttons now won’t show at all in HTML view. In fact, you can see from the images that I can’t even highlight the HTML tab. The focus is on Visual. And when I click the Visual tab, I get this:

http://featherrivercountry.com/images/support/ce-add-visual-editor1ff.jpg

Now that isn’t to say that Chrome and Opera are trouble free. This is what the Visual editor looks like in them (this is Chrome, but Opera looks identical):

http://featherrivercountry.com/images/support/ce-add-visual-editor1cr.jpg

That’s just plain Ugly. Capital U ugly. Not only is the header part of the editor way too big, the buttons are misaligned and the editor seems to have moved to the right enough to bump into my right sidebar.

I usually try to figure things out for myself. The only things I’ve done so far is to make all my categories show by changing the selectors in a PHP file (described here: https://theeventscalendar.com/support/forums/topic/display-full-category-list/). I also used CSS to style the My Events and Submit Event buttons and I reduced the size of the title input box so my members won’t think they should have really long titles (it doesn’t prevent them from doing so, but it inhibits them). I had to add display:block; to that input too, so the label would be above the input box.

This button problem, though, is beyond what I’m willing to tackle without asking for guidance first. So, I’m asking. 🙂

Jim

[Jonah]

Hi Jim,

Your theme is applying a bunch of styling to the editor because it’s using fairly general CSS selectors like #content tr td which is targeting the buttons in the editor. The easiest thing to do would probably be to override these style applications via CSS specificity and overriding this styling with some reset CSS.

You can see what I’m talking about with your theme applying styling if you simply right click one of the buttons and select Inspect Element in Chrome and then in DOM tree click on the nearest td element and you should see something similar to this in the CSS inspector: http://cl.ly/3f1D1o230r1b401D2K1y – see how one of the first CSS rules being applied from the theme is setting the td padding? If you uncheck some of the boxes in the CSS inspector you can start to see how much of an effect this has and also get a sense of what you need to override to get everything normal again.

So, how to fix this? If we start with the #content tr td rule, we could easily override this by going up the DOM tree and seeing that the editor mainly resides in the .events-community-post-content div which is nested within #content. So a CSS rule to override the padding for example could be:

#content .events-community-post-content tr td {
padding: 0;
}

By throwing in a class you add to the specificity of this rule and you trump the other rule that had only the ID element and the raw HTML elements. Make sense? So, along these same lines you should be able to remove all of the other styling that inadvertently being applied by your theme.

I hope that helps but let me know if you have any other questions about this.

– Jonah

[Jim McClain]

Jonah,

Although that CSS you suggested did do something, it didn’t fix the problem. There is far too much CSS to override to make those buttons behave. And it doesn’t even take into account that, in IE and Firefox, the Visual and HTML selectors aren’t working at all – I doubt that’s a CSS issue.

I think the editor selectors need to be fixed before the CSS problems. As far as the editor buttons, it might even mean creating all new CSS because it might be easier than trying to override everything another CSS file is doing that was never intended to be edited by the user. I don’t know why the developers decided to import that CSS. I’m not sure I would be the only one using Weaver II theme, or if this also has some anomalies with Twenty-Eleven, which it what Weaver II is based on.

Is there another part of my site that editor-buttons.css would be used, so I can see in what context the styling works? I also want to see if the styling looks the same in the 4 browsers I use. It certainly doesn’t with community/add/.

Thanks,

Jim

[Jim McClain]

I’ve been doing some testing and discovered this problem I am having also occurs using the Twenty-Ten and Twenty-Eleven themes. The HTML tab is not selectable and no editor buttons show on the default Visual tab. When clicking the Visual tab, the editor itself disappears, except for the Visual/HTML tabs. This is using the 2 most popular browsers in the world, IE and Firefox.

Thanks,

Jim

[Jim McClain]

Further tests reveal there is a conflict with my contact form plugin, cforms II. I have deactivated it and removed all the files for it. The Visual/HTML tabs now work, but the community/add form is still Ugly.

Jim

[Jim McClain]

Okay, I have a new contact form now (Fast Secure Contact). It works fine and has no apparent conflict with CE. There are still considerable styling issues that I don’t think should be as ugly as they are.

Jim

[Jonah]

Hey Jim,

The overall styling of the front end form is kept fairly plain and neutral so as to not introduce much styling and conflict with too many themes. You’re theme is somewhat unique in the sense that you don’t use a white background behind much of the sites content – so this is partly a reason why it doesn’t look very good. We can’t possibly style the form to fit in all themes. You are free to and are encouraged to style the form as much as you want to get it to fit in your theme.

I hope that helps,
Jonah

[Jim McClain]

I have a huge amount of respect and gratitude for you, Jonah, and the rest of the Modern Tribe team, but I have to disagree on this issue. Please take a look at the following 2 screen shots. This is what the community/add form looks like in twenty-ten theme, the most basic of all included themes in WP. Before taking those screen shots, I also disabled every plugin except The Events Calendar, The Events Calendar Pro and Community Events.

The Visual editor: http://featherrivercountry.com/images/support/ce-add-visual-editor2ff.jpg
The HTML editor: http://featherrivercountry.com/images/support/ce-add-html-editor2ff.jpg

Granted, the HTML editor doesn’t look as bad as the Visual editor, but there is some serious problem here when that “Path: p” thing shows up and that part, as well as the button bar goes all the way into the sidebar and the textarea doesn’t.

I’m sure you can see from my short participation here, that I am not afraid to delve into modifying the CSS, HTML or PHP. I do as much testing and research as anyone should, maybe more. I ask for guidance, not for anyone to do it all for me. But this is beyond the scope of my expertise.

I don’t mind customizing, but I think this falls into the repairs category. When the interface is wonky like that using the WP default theme and no other plugins but Modern Tribe’s, then I hope that you can see this might be a bug. It looks exactly the same in every browser I have, which are all the latest versions and on an up-to-date Windows7 machine.

Thanks,

Jim

[Jonah]

Hey Jim,

I appreciate your response but I can assure you that this is not an issue with our plugin. We test thoroughly in Twenty Eleven and this is not an issue for anyone here and has not been reported by anyone else on the forums running the Community Events plugin. I’m certain if the problems you are experiencing we’re happening for everyone else we would have heard about it weeks ago.

Since it doesn’t appear to be the theme any more, my first thought is that it’s another plugin doing this. Make sure you deactivate all other plugins and check it again. If that doesn’t do it, make sure you are running the latest version of WordPress, The Events Calendar, Events Calendar PRO and Community Events. If that doesn’t do it, try refreshing your permalinks by visiting Settings > Permalinks. Also make sure you clear your browser cache.

I hope that helps!

– Jonah

[Michelle]

Hi Jim & Jonah,
I have had exactly the same problems as Jim with the visual editor in Firefox (haven’t yet tested too many others). Eventually I gave up trying to fix it and have reverted to using the HTML version (which isn’t perfect but is better than the visual editor (mine looks the same as Jim’s screenshots). I am using the Twentyten theme, and none of my plugins have any impact on the Visual Editor appearance. I agree with Jim that it’s a bug and also would be great if this Editor could have a specific css that would override the theme’s CSS to avoid these problems.
Thanks!

[Rob]

Hey there Michelle. Thanks for the heads up. Are you in a position where you can test on the 2011 theme? We stopped supporting and testing on 2010 after 2011 had been out a few months, and when I use Firefox on my end the visual editor box (and HTML tab) both appear fine:

* Visual editor: http://d.pr/i/MHbB
* HTML: http://d.pr/i/jgxH

Am I doing something different than you are, or have I misunderstood the issue here?

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts