Shortcode & related options to show dropcaps

please send me a screenshot for further checking.

Regards,
Dominic

Screenshot? Really? It’s your demo site …… on this page:

http://demo.designwall.com/dw-focus/2012/12/article-demo-showcase-what-markup-you-can-use-in-your-news-article/

The article starts with a dropcap which suggests that the theme might include shortcodes for such things – I was just asking (a) if these is correct and (b) where can I find info about therm?

I am a new Focus user, so this may be a bit off the mark, but: I am not sure that you can set drop caps in the visual editor. (It doesn’t even display it while editing.? But go to “Text” and add the following tag: “<p class=”dropcap>”  and then an “</p>” end tag at the end of the paragraph. Omit the quotes in both cases. Then you can search for “drop cap” (again without quotes) in the template.css to edit its appearance (font, size and margins.)

Hope this works.

Geir 🙂

Thanks Geir for your good suggestion!

Oki. So I have spent some time testing this. Turns out there is a problem with TinyMCE Advanced and similar importing techniques, in that it doesn’t work with complex class names with delimiters and qualifiers. In our case “.dropcase:first-letter”. (It works if I drop the “:first-letter” qualifier, but then it doesn’t do what it should, of course.)

My attempts at finding why it doesnt work have so far failed. But I have found another plugin that does work: TinyMCE and TinyMCE Advanced Professsional Formats and Styles. Here you have to list the entries for the style drop down manually, but at least it works. It will also create an editor-style.css file in your theme (or you can create it yourself) where you can add the same styles if you want them to display in the editor as well as the finished article. (Which of course you do, or your end users will not understand why they add a style and they cannot see it.) There is even a shared css file that is supposed to work in both, but I haven’t tried this yet.

Maybe DesignWall can create a list of style classes and what they do for us, so we know which  ones we to choose from…

Hope this helps!

Geir 🙂

Thanks Geir Fjærli for your solution and we tried your suggestion for Michael Waugaman’s problems.

Please follow the instruction below:

Step 1: Add the following code at the end of functions.php file from theme’s root.

add_action( 'init', 'dw_focus_editor_buttons' );
function dw_focus_editor_buttons() {
add_filter("mce_external_plugins", "dw_focus_editor_add_buttons");
add_filter('mce_buttons', 'dw_focus_editor_register_buttons');
}
function dw_focus_editor_add_buttons($plugin_array) {
$plugin_array['dw_focus_editor'] = get_template_directory_uri() . '/custom-tinymce/custom-tinymce.js';
return $plugin_array;
}
function dw_focus_editor_register_buttons($buttons) {
array_push( $buttons, 'dropcap' );
return $buttons;
}

Step 2: Copy two files below and paste them into custom-tinymce/ folder

+ custom-tinymce.js
+ dropcap.png

You can download two files here: https://www.dropbox.com/s/lq5n69wh3765tj6/custom-tinymce.zip