Nov 262014
 

Suffusion Theme Custom Emphasis Elements show you how to add some custom elements like warnings, comments and more to your website and blog.

Last Updated: March 1, 2018

Latest News: I have updated the documentation below.

There are many times you might want to add some warnings. For example, special notes or extra messages to your site. Suffusion provides the following elements for you to use. You can either choose the theme format or you can customize it yourself. Then all you have to do is add the HTML code and that is it.

Suffusion Theme Custom Emphasis Elements

Step 1 ) Go to Appearance -> Suffusion Options -> Skinning -> Custom Emphasis Elements menu to set up the custom emphasis elements for your website or blog. See image below.

suffustion-theme-custom-emphasis-elements-menu

Step 2 ) The following information is (Quoted from Suffusion Theme).

Suffusion comes with predefined elements that you can use for emphasizing sections of your blog. There are four types defined

  • Download – class=’download’
  • Announcement – class=’announcement’
  • Note – class=’note’
  • Warning – class=’warning’

To use any of these elements you can enclose text on your blog within <p> and </p> tags or <div> and </div> tags with the class name:

  • <p class=’download’> Some stuff to download </p> or <div class=’download’>Some other stuff to download</div>
  • <p class=’announcement’> Some announcements </p> or <div class=’announcement’>Some more announcements</div>
  • <p class=’note’> Notes </p> or <div class=’note’>More notes</div>
  • <p class=’warning’> Warnings </p> or <div class=’warning’>Other warnings</div>

The following image Default styles for emphasis elements? allows you to select from the following options.

  • Theme styles
  • Custom styles

suffustion-theme-custom-emphasis-elements-default

Step 3 ) The following image Download allows you to configure the following options.

  • Download Block Font Color
  • Download Block Background Color
  • Download Block Border Color

suffustion-theme-custom-emphasis-elements-download

Step 4 ) The following image Announcement allows you to configure the following options.

  • Announcement Block Font Color
  • Announcement Block Background Color
  • Announcement Block Border Color

suffustion-theme-custom-emphasis-elements-announcement

Step 5 ) The following image Note allows you to configure the following options.

  • Note Block Font Color
  • Note Block Background Color
  • Note Block Border Color

suffustion-theme-custom-emphasis-elements-note

Step 6 ) The following image Warning allows you to configure the following options.

  • Warning Block Font Color
  • Warning Block Background Color
  • Warning Block Border Color

suffustion-theme-custom-emphasis-elements-warning

That is how simple it is to add some elements to your site without too much formatting. It makes your job quicker and more efficient.

Click on the following URL Skinning Tutorials for more skinning tutorials.

If you have any questions please let me know. I will be updating this from time to time. So keep coming back for the latest.

Enjoy.

More Suffusion Tutorials:

Manuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

The following GDPR rules must be read and accepted:
This form collects your name, email and content so that we can keep track of the comments placed on the website. For more info check our privacy policy where you will get more info on where, how and why we store your data.