Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #25552
    Sysop
    Guest

    How do i add custom html while using the editor?

    I can add blocks and layouts and things like that but i can’t find a choice for custom html

    #25583
    Jesse Owens
    Keymaster

    Hi Sysop-

    You can use Custom HTML by switching to the “Text” tab at the top-right of your editor window:

    Switching to the text editor tab

    #33278
    Dan
    Guest

    Hello,

    I created a dropcap style in the custom css. When I use the text editor to add the tag to a letter, it works great. If I switch to the visual editor to do anything else on that page, it removes my dropcap tag on the first letter of the first paragraph. I used it on blog posts only. Why does your visual editor hate dropcaps? Thanks,

    Dan

    #33296
    Jesse Owens
    Keymaster

    Hi Dan-

    This is happening because whenever the visual editor is initialized, it runs a scan of all the content you entered into the Text editor and checks it for “valid” HTML markup, sanitizing elements that aren’t included in the HTML5 standards.

    Since your custom <dpc> tag isn’t a standard HTML tag, it strips them out. This is built into the TinyMCE editor in WordPress, not specifically the BoldGrid Post and Page Builder. I can think of two ways you can solve this.

    First, you could solve it with pure CSS. I checked out your blog, and it looks like you’re mainly using the drop-cap on the very first letter of each post. If that’s consistent, you could accomplish the same thing with the following Custom CSS (I copied these styles from your <dpc> element):

    body.single-post .entry-content p:first-of-type:first-letter {
        line-height: 33px;
        font-size: 50px;
        font-family: Georgia;
        color: #222222;
    }
    

    This code targets:

    • Just blog posts (not pages) with the body.single-post class
    • Just the post content with the entry-content class
    • And finally, the first letter of the first paragraph, with the p:first-of-type:first-letter pseudoclass.

    If, on the other hand, you’d like to be able to use your <dpc> tag in more places throughout your posts, you can add it to the allowed tags for TinyMCE. This will take a little bit of custom code. I recommend using the Code Snippets Plugin to manage custom code snippets.

    Once you’ve installed the plugin, you can use a filter like the one found on this StackExchange Post to add the tag:

    add_action('init', function() {
        global $allowedtags;
        $allowedtags['dpc'] = array();
    });
    add_filter('tiny_mce_before_init', function($a) {
        $a['extended_valid_elements'] = 'dpc';
        return $a;
    });
    
    #33299
    Dan
    Guest

    Thanks Jesse!

    The first option repeated on different elements such as the first letter of the first quote, then the first letter of the first paragraph immediately below it. The style was more of a tall cap than a drop cap.

    The second option works great. I’ll leave that running until they release HTML6. Thanks again for your help.

    Dan

    #33302
    Jesse Owens
    Keymaster

    Hi Dan-

    Glad to hear one of those options worked for you! Let us know if you have any more questions, we’re happy to help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Entering custom html’ is closed to new replies.