1

Hi we all know by default tiny MCE's blockquote generates this

<blockquote> content here </blockquote>

I am styling this via CSS :

enter image description here

the css im using :

blockquote { border: none; font-family: 'Georgia', serif; color: #444; font-size: 1.2em;
           font-weight: bold; font-style: italic; font-weight: normal;
           padding: 0; text-indent: 1.2em; color: #222;
           border-bottom: 1px solid #888; 
           position: relative; bottom: 12px;  }

.no-js blockquote { position: static; bottom: auto; border: none; }

blockquote span { position: relative; top: 12px; background-color: white; padding: 0 15px; }

for the trailing line to appear without adding unneccesary unsemantic markup i need to generate a span inside the blockquote :

<blockquote>
     <span>
        content here
    </span>
</blockquote>

preferably without making a separate shortcode for this and just use the native blockquote button.

can anybody help?

Improve this question
2
  • would resolving to a JS solution be easier?
    – George Ananda Eman
    Commented Sep 23, 2012 at 4:48
  • A CSS based solution would be most preferable if any of you can think of one
    – George Ananda Eman
    Commented Sep 23, 2012 at 16:37

3 Answers 3

Reset to default
-1

If it's for styling purpose, the fastest solution I could think of is by using Javascript. As far as I know, modifying the output of TinyMCE tag would require editing of Wordpress core files, so it's more practical to append a <span> with Javascript. Something like this would do:

<script type="text/javascript>
   $('.post blockquote').wrapInner('<span />');
</script>

Where .post is the class for your single post container.

Improve this answer
5
  • great, but i just noticed tinyMCE added a new <p> inside my blockquote... do you know how to prevent this? i tried doing unwrap but was having trouble getting the inner content
    – George Ananda Eman
    Commented Sep 23, 2012 at 5:03
  • Solved it by making my own unwrapInner function via jquery { solution updated on question }
    – George Ananda Eman
    Commented Sep 23, 2012 at 5:19
  • Was going to post something similar. Glad it helps. :)
    – deathlock
    Commented Sep 23, 2012 at 5:28
  • 1
    @GeorgeAnandaEman Please add your solution as edit to this ↑ answer (we will approve it), or as separate solution - and not as edit to the question. Thanks.
    – kaiser
    Commented Sep 23, 2012 at 8:47
  • @kaiser fixed, sorry about that
    – George Ananda Eman
    Commented Sep 23, 2012 at 16:07
0

Please use the default handling for WordPress: Editor styles - read in Codex about it. This means, that you can add any styling, that is attached to your main site, to your editor too.

// functions.php » hooked to `after_setup_theme`
add_editor_style( 'style.css' );
Improve this answer
5
  • styling is not a problem, i needed to modify markup, i believe thats not possible through loading css.And i think i've read somewhere adding markup with :before :after selectors is not advisable.
    – George Ananda Eman
    Commented Sep 23, 2012 at 16:06
  • @GeorgeAnandaEman What exactly are you trying, that isn't possible with CSS?
    – kaiser
    Commented Sep 23, 2012 at 16:12
  • the ideal solution would be to hook a function for adding the span to the tinyMCE blockquote function. but i dont think such a hook exists... obviously editing core is not an option. adding a shortcode would add confusion to the user. Do share if you have any insights
    – George Ananda Eman
    Commented Sep 23, 2012 at 16:12
  • @GeorgeAnandaEman I just have taken a brief look at the tag tinymce archive. I guess there're quite some solutions out there, where you can see A) how to remove a built in button B) add your own button and C) format it the way you like. Your current solution is pretty hacky and can break quite easily. But again: What exactly do you need to style that isn't possible with CSS? Please edit your question and add your expected outcome.
    – kaiser
    Commented Sep 23, 2012 at 16:15
  • yes i agree, mine is very hacky. Only reason im justifying this is this would only fail if the user had JS disabled. I've set up fallbacks with modernizr so users without JS would just see the blockquote without the trailing line. which is acceptable. Edited my question and looking into the archives.
    – George Ananda Eman
    Commented Sep 23, 2012 at 16:31
0

SOLVED thanks to Deathlock :

// unwrap inner
var blockquotes = $('.post blockquote');
blockquotes.html(blockquotes.find('p').text());

// rewrap with span
blockquotes.wrapInner('<span />');
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.