# Application for EasySocial

Product page: [NorrCompetition Application for EasySocial](https://norrnext.com/joomla-extensions/norrcompetition-addons-pack#easysocial)\
The add-on comes as an Application and Activity Stream plugin. The Application controls activity stream and displays the list of entries and number of received votes in user's profile.\
The plugin adds actions performed in NorrCompetition voting contest extension to EasySocial stream (social network extension).

### Installation

The package comes with two extensions.

**easysocial\_norrcompetition\_x.x.x.zip** - the Application should be installed via EasySocial. Proceed to **Extensions > EasySocial > Applications** and click on **Install** in left sidebar.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/plugins/norrcompetition-application-for-easysocial3.png" alt="Installing EasySocial Application"><figcaption><p>Installing EasySocial Application</p></figcaption></figure>

**plg\_competition\_estream\_x.x.x.zip** - the plugin can be installed as typical Jooomla extension. Go to **Extensions > Manage > Install** and **Upload Package File**.

After the installation, you can find a new Application in EasySocial settings and a new plugin (type: competition).

### Configuring EasySocial Application

Go to **Extensions > EasySocial > Applications** and proceed to **NorrCompetition**. There are **Stream** and **Profile** tabs.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/plugins/norrcompetition-application-for-easysocial1.png" alt="NorrCompetition Application for EasySocial - settings"><figcaption><p>NorrCompetition Application for EasySocial - settings</p></figcaption></figure>

#### Stream tab

Configure the stream related settings for this application here.

* **Stream Filter** - determines whether this item will appear as a stream filter or not.
* **Create Contest** - determines if the stream should be generated when a user creates a new competition.
* **Submit Entry** - determines if the stream should be generated when a user submits a new entry to competition.
* **Vote** - determines if the stream should be generated when a user votes for entry.
* **Grand Prix** - determines if the stream should be generated when participant gets Grand Prix status.

#### Profile tab

Configure the behavior of this application for the user's profile view.

<figure><img src="https://norrnext.com/images/docs/norrcompetition/plugins/norrcompetition-application-for-easysocial2.png" alt="NorrCompetition Application for EasySocial - Profile settings"><figcaption><p>Profile settings</p></figcaption></figure>

* **Total Entries to Display** - set the total number of submitted competition entries to appear on a person's profile. **0 = no limits**.
* **Show Photo** - show or hide the image of participant.

### Plugin for EasySocial

**Competition - Activity Stream** plugin just adds actions to EasySocial stream and has the only tab to set up **Download Key** which is required for [one-click updates](https://docs.norrnext.com/joomla-tutorials/how-to-enable-one-click-update-for-norrnext-commercial-extensions) (it works for the plugin only. The Application doesn't have one-click update)

All settings should be configured via the Application.

### Customisation

The images which are displayed in the timeline are NorrCompetition's small images. In case if you want to make pictures in the timeline smaller, there is `es-stream-content-avatar` class in `<img>` tag. Just use it in your custom CSS code to set the right width.&#x20;

<figure><img src="https://norrnext.com/images/docs/norrcompetition/plugins/easysocial-front1.png" alt="User&#x27;s actions in the timeline. Small image taken from NorrCompetition"><figcaption><p>Picture 1. User's actions in the timeline. Small image taken from NorrCompetition</p></figcaption></figure>

And let's see how the custom CSS rule changes the result:

`.es-stream-content-avatar {width:60%}`

<figure><img src="https://norrnext.com/images/docs/norrcompetition/plugins/easysocial-front2.png" alt="Images with customized width via CSS rule"><figcaption><p>Picture 2. Images with customized width via CSS rule</p></figcaption></figure>