Customizing Buttons

Skip to end of metadata
Go to start of metadata

The Reaction buttons design can be customized using:

 

Changing Buttons Design using Method Parameters

The Default Design

This reaction object includes text and an icon:

var textReactions=[
{
    text: 'Love it',
    ID: 'love',
    iconImgUp:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Up.png',
    iconImgDown:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Down.png', // Optional, image for icon when pressed
    iconImgOver:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Over.png' // Optional, image for icon when mouse is over it
}
]; 

 

With Counter on Top

To design a button with a counter on top, add the showCounts parameter with the value 'top' to the reaction object:

var textReactions=[
{
    text: 'Love it',
    ID: 'love',
    iconImgUp:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Up.png',
    showCounts:'top'
}
]; 

 

With Counter on Right

To design a button with a counter on the right, add the showCounts parameter with the value 'right' to the reaction object:

var textReactions=[

{

    text: 'Love it',

    ID: 'love',

    iconImgUp:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Up.png',

    showCounts:'right'

}

]; 

 

With Counter as Percentage

To design a button with a counter representing a percentage on top, add the showCounts parameter with the value 'top' and the countType parameter with the value 'percentage' to the reaction object:

var textReactions=[

{

    text: 'Love it',

    ID: 'love',

    iconImgUp:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Up.png',

    countType:'percentage'

}

]; 

 

Text Only

To design a text-only button, remove the icon from the reaction object:

var textReactions=[

{

    text: 'Love it',

    ID: 'love'

}

]; 

 

Icon Only

To design an icon-only button, remove the text parameter from the reaction object:

var textReactions=[

{

    ID: 'love',

    iconImgUp:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Up.png',

    iconImgDown:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Down.png', // Optional, image for icon when pressed

    iconImgOver:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Over.png' // Optional, image for icon when mouse is over it

}

]; 

 In this example the optional iconImgDown and iconImgOver parameters are defined too, to show the differences between the icon states.

Button without Borders

To design a button without borders, set the noButtonBorders to 'true' in the reaction object:

var textReactions=[

{

    text: 'Love it',

    ID: 'love',

    iconImgUp:'http://cdn.gigya.com/gs/i/reactions/icons/Love_it_Icon_Up.png',

    noButtonBorders:'true'

}

]; 

 

Applying a New Button Design

If you wish to apply your own design to the reaction buttons, override the default design by using buttonImages parameter of the socialize.showReactionsBarUI method. The buttonImages parameter expects a JSON object with a set of fields (all optional). Each field defines a button image part. Following are the basic fields:

  • buttonLeftImgUp - An image for the left part of the button
  • buttonCenterBGImgUp - An image for the center part of the button
  • buttonRightImgUp - An image for the right part of the button

To replace the default button images with your alternative images, set these fields with URLs to the corresponding images.

Add the buttonImages parameter to the reactionParams with your own button images:

var reactionParams ={ 

        containerID:'reactionsDiv',   

        reactions:textReactions,  

        userAction:defaultUserAction, 

        itemID: 'today-story', 

        buttonImages:{buttonLeftImgUp:'Button_Left.png',buttonCenterBGImgUp:'Button_Middle.png',buttonRightImgUp:'Button_Right.png'}

    }; 

You may also define images to the 'Disabled' 'Mouse over' and 'Down' states of the button, using the corresponding fields of the buttonImages parameter:

  • buttonLeftImgDisabled, buttonCenterBGImgDisabled, buttonRightImgDisabled -  Images for Disabled button (left, center and right).
  • buttonLeftImgOver, buttonCenterBGImgOver, buttonRightImgOver - Images for Mouse Over state (left, center and right).
  • buttonLeftImgDown, buttonCenterBGImgDown, buttonRightImgDown - Images for Down state (left, center and right).

For example:

buttonImages:{buttonLeftImgUp:'Button_Left.png',buttonCenterBGImgUp:'Button_Middle.png',buttonRightImgUp:'Button_Right.png', 

      buttonLeftImgDown:'Button_Left_Down.png',buttonCenterBGImgDown:'Button_Middle_Down.png',buttonRightImgDown:'Button_Right_Down.png',

      buttonLeftImgDisabled:'Button_Left_Disabled.png',buttonCenterBGImgDisabled:'Button_Middle_Disabled.png',buttonRightImgDisabled:'Button_Right_Disabled.png',

      buttonLeftImgOver:'Button_Left_Over.png',buttonCenterBGImgOver:'Button_Middle_Over.png',buttonRightImgOver:'Button_Right_Over.png'

}

 

No Button

To design a reaction with no button (icon only), override the default design of the reaction button by using buttonImages, an optional parameters of the socialize.showReactionsBarUI method.

Add the buttonImages parameter to the reactionParams with an empty field:

var reactionParams ={ 

        containerID:'reactionsDiv',   

        reactions:textReactions,  

        userAction:defaultUserAction, 

        itemID: 'today-story', 

        buttonImages:{}

    }; 

 

HTML Elements Style (CSS) Classes

Any elements on the add-on that has an ID can be overridden with supported style attributes. You may use Firebug to identify an HTML element on the add-on and assign a new style to it. Please make sure to use the add-on's container

ID when assigning style, so it will not affect other elements on the page.
For example:

 

<style> #textReactionsDiv .gig-reaction-button-container {background-color:yellow;} </style>

There are five classes that you can use to customize your buttons, overriding the default design:

  • gig-reaction-button-container - Overrides the default design of a single button and counter.
  • gig-reaction-button - Overrides the default design of a single button.
  • gig-reaction-button-text - Overrides the default design of a button's label.
  • gig-reaction-counter - Overrides the default design of a single counter.
  • gig-reaction-counter-text - Overrides the default design of a counter's value.

The following examples demonstrate how to change the default background color of each class specified here. You may change the font size, font color, border, etc.

Single Button and Counter

To design a button and counter with a yellow background , add the following to the section of your page:

<style> #textReactionsDiv .gig-reaction-button-container {background-color:yellow;} </style>

 

Single Button

To design a button with a green background , add the following to the section of your page:

<style> #textReactionsDiv .gig-reaction-button {background-color:green;}</style>

In this example, the button is without borders to allow the green background to be more visible.

Button Label

To design a button label with a red background , add the following to the section of your page:

<style>#textReactionsDiv .gig-reaction-button-text {background-color:red;} </style>

 

Single Counter

To design a button counter with a purple background , add the following to the section of your page:

<style> #textReactionsDiv .gig-reaction-counter {background-color:purple;} </style>

 

Counter Value

To design a counter value with a blue background , add the following to the section of your page:

<style> #textReactionsDiv .gig-reaction-counter-text {background-color:blue;} </style>

 

Additional Classes

In addition, you can further customize your reaction buttons using the following classes:

  • gig-button-up
  • gig-button-down
  • gig-button-over
  • gig-button-disabled

For example, add the following to the section of your page to change the button text to yellow when the button is disabled:

 

<style>#divReactions .gig-button-disabled .gig-reaction-button-text {color:yellow} </style>

 

 

Templates

The 'buttonTemplate' parameter of the socialize.showReactionsBarUI method is an HTML template representing the design of a single button, supporting the following placeholders:

  • $iconImg
  • $text
  • $onClick
  • $count

You may override the default design by placing new values in these placeholders.