Muse Widgets

Inster: How to customize the text style for Detailed hover

Customizing texts in hovers requires knowledge of the basics of CSS. In the widget, it is possible to customize each type of information displayed in the hover.

Each data type has its own class:

  • Date:  class=”inster_date”
  • Time:  class=”inster_time”
  • Title: class=”inster_title”
  • Comments: class=”inster_comments”
  • Likes: class=”inster_likes”
  • Photo filter: class=”inster_filter”
  • Tags: class=”inster_tags”
  • Location: class=”inster_location”
  • Post type(image/video): class=”inster_type”
Step 1

Right click on the page, and select Page properties

Page properties
Page properties
Step 2

Select the Metadata tab, and insert the code for customization in the field HTML for <head>

Metadata - HTML for <head><figcaption id=” width=”473″ height=”540″> Metadata – HTML for
Step 3

For example, change the color of the the post title, increase the font, and make it bold. Sample customization code:

<style>
    .inster_title{
        font-size: 2em;
        font-weight: bold;
        color: #ff0000;
    }
</style>

More about CSS properties w3schools.com/css/

Was this article helpful to you?