{"id":34756,"date":"2019-09-25T17:36:16","date_gmt":"2019-09-25T17:36:16","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=34756"},"modified":"2021-04-05T17:52:41","modified_gmt":"2021-04-05T17:52:41","slug":"customizing-the-spoiler-shortcode-appearance","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/customizing-the-spoiler-shortcode-appearance\/","title":{"rendered":"Customizing the spoiler shortcode appearance"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n

Table of contents<\/p>\n\n

  1. Using custom CSS class<\/a><\/li>
  2. Spoiler Title<\/a>
    1. Default state<\/a><\/li>
    2. Hover state<\/a><\/li><\/ol><\/li>
    3. Spoiler Icon<\/a><\/li>
    4. Spoiler Content<\/a><\/li><\/ol><\/li><\/ol>\n\n\n

      Using custom CSS class<\/h2>\n\n\n\n

      In this article, you\u2019ll learn how to customize the appearance of the Spoiler shortcode. Follow the instructions below.<\/p>\n\n\n\n

      Add custom CSS class to your shortcode:<\/p>\n\n\n\n

      [su_spoiler class=\"my-custom-spoiler\"] ... [\/su_spoiler]<\/code><\/pre>\n\n\n\n
      Then, navigate to Dashboard \u2192 Shortcodes \u2192 Settings<\/em> and add any of the following snippets to the Custom CSS code<\/em> field. You can play with the code below to adjust colors or to add some extra styling.<\/p>\n\n\n\n
      Spoiler Title<\/h2>\n\n\n\n
      Default state<\/h3>\n\n\n\n
      .su-spoiler.my-custom-spoiler > .su-spoiler-title {\n\n\t\/* Text Size *\/\n\tfont-size: 21px;\n\n\t\/* Background Color *\/\n\tbackground: #ff00ff;\n\n\t\/* Text Color *\/\n\tcolor: #ffffff;\n\n}<\/code><\/pre>\n\n\n\n
      Hover state<\/h3>\n\n\n\n
      .su-spoiler.my-custom-spoiler > .su-spoiler-title:hover {\n\n\t\/* Text Size *\/\n\tfont-size: 21px;\n\n\t\/* Background Color *\/\n\tbackground: #ff00ff;\n\n\t\/* Text Color *\/\n\tcolor: #ffffff;\n\n}<\/code><\/pre>\n\n\n\n
      Spoiler Icon<\/h2>\n\n\n\n
      .su-spoiler.my-custom-spoiler > .su-spoiler-title > .su-spoiler-icon {\n\t\n\t\/* Icon Color *\/\n\tcolor: #00ff00;\n\t\n}<\/code><\/pre>\n\n\n\n
      Spoiler Content<\/h2>\n\n\n\n
      .su-spoiler.my-custom-spoiler > .su-spoiler-content {\n\n\t\/* Text Size *\/\n\tfont-size: 21px;\n\n\t\/* Background Color *\/\n\tbackground: #ffff00;\n\n\t\/* Text Color *\/\n\tcolor: #000000;\n\n}<\/code><\/pre>\n","protected":false},"featured_media":0,"template":"","docs_category":[23],"class_list":["post-34756","docs","type-docs","status-publish","hentry","docs_category-customization"],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs\/34756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/docs"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=34756"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/docs_category?post=34756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}