Toad Blog

Louisville KY Web Design, Graphic Design, Marketing, Advertising Blog

HOW TO: Common content formatting issues with MODx

August13

This article is really about TinyMCE, or as one client of mine calls it, “Tiny Mice.” TinyMCE is the Rich Text Editor most commonly used with MODx. There are other editors available and if you have a lot of problems with TinyMCE, then let us know, we can try one of the others to see if it is a better fit for you. But hopefully with a little training you’ll be zooming along. There is always a learning curve.

The first issue I hear about a lot deals with extra space between paragraphs. We can set a style to completely take this out, and we can also program this completely away, but that is not always best for you. The offending tag is the paragraph tag or “p” tag. If you hit “return” at the end of a paragraph it is automatically added. This is good for you actually, because it is valid mark-up. It is bad because the space added sometimes is more than you want. We prefer to teach you, rather than program this feature out.

The solution is “Shift-return.” This key combo will make a simple line break rather than a paragraph and the space between lines will be diminished. While not strictly valid, it isn’t a huge faux pas either, and is okay to use. Hitting shift-return produces a “br” tag and not a “p.”

Say you hit “Return” instead of “Shift-return.” Accidentally. After you finish cursing, leave your cursor at the beginning of the new paragraph you just inserted, hit “delete” or “backspace” and then hit “shift-return.” Voila. Space gone.

The other huge HUGE key to handling your Rich Text Editor is the “Path” menu.

“What’s that?” you say.

Most people have no idea this particular item exists.

It’s at the bottom of your textarea box. Usually gray, if you put your cursor in the textarea in the middle of a sentence, you will see something like this in it:
“Path: table » tbody » tr » td » p » a”

The magic key is, if you select one of those elements? Say the “p”? then you actually select the paragraph inside it.

I’ll show you. Showing is easier. This first screen shot shows the Rich Text editor, TinyMCE. At the bottom, I’ve circled the “Path” menu in red. If you do not have a “Path” menu, call me and I’ll change your settings so you do have one. Or you can bug your current webmaster to do it if you don’t use me. It takes just a few minutes to change in MODx.

TinyMCE path

Practice clicking a few of the items in the list there. Yours might look different. As you do, you should notice content up in the textarea box turning blue. That’s because you are actually selecting that content with the Path menu.

Screenshot below:
Selecting elements with the Path menu in TinyMCE and MODx

So, when you hit the wrong button and suddenly weird boxes appear where they shouldn’t, you can now click into them with your cursor, click each tag in the Path menu until the intruder turns blue. And hit delete. And it will go away. Amazing.

Say there is a style applied to an element but you don’t know which one and can’t get rid of it? Simple, you look at the path menu till you see something with a dot in the name. It will look like this: “p.style1″ or this: “span.small”

If it has a dot in it? then the part before the dot is the element type (a paragraph or span or table) and then the part after the dot is the name of the style. There is a style dropdown menu and you can undo the style by selecting the element in the path menu and then clicking the eraser tool (remove formatting). You can apply another style by choosing one from the “styles” dropdown menu.

Screenshot:
removing Styles in TinyMCE and MODx
It’s really helpful to know about that Path Menu.

If you have different buttons or want different buttons in your TinyMCE configuration, let us know and we’ll change it up for you, again, it is easy to customize in a few minutes.

Okay, so if you have questions, feel free to ask and happy blogging!

Delicious

Yawn Design – Website Evaluation

August10

Had a client ask me to check out a site yesterday, evaluate it.

It’s a good site, well done, well coded, they’re doing all the right stuff as far as inbound marketing. Seriously. They have a Twitter account, they are using it, they have a blog, they’re blogging regularly. Looks like SEO is well done. I was really pleased with what I saw.

But it had a couple issues.

1. First issue, no phone number anywhere. People hate ordering when they don’t know they can talk to a human.

2. Second issue. The design, while clean, looked like every other site in that particular market. Snore. Totally forgettable. Color palette is important. Their palette was bland and the whole thing just screamed template. They have “design” in their NAME and then do that? UM?

3. They’re trying to position on price alone. Bad idea. Someone will always outprice you. You need to be REALLY GOOD at something and then push that.

4. If you’re going to do social media, you need a clearly defined plan and voice. Just putting content out there, while okay, and better than nothing, is not enough. Right now the Guru Squad is harping on social media. Guess what? if a lot of people are talking about something, you’re already behind the curve. You need to up your game. So do social media with a little imagination and heart. Make the voice one that people connect with. Grow a personality. Make it match your new, un-boring smooth website design.

5. Flash on the home page is bad for the mobile audience.

6. Their url is exactly like a direct competitor, off by two letters. That to me feels deceptive and I think it’s a bad idea. To me it makes them the bad knock-off.

7. One of their vendors has strict rules about online sales and this site has products on there that violate those rules. You need to keep your vendors happy, not try to do things they won’t like and hope to get away with it.

So my response was, this site is Fine. And if fine is okay with you, then by all means, keep heading down the road you’re on. If you want greatness though, make some changes.

Delicious