Moderation options in groups

2017-12-01T07:20:26Z

Michal: /* Assigning Additional Group Admins */

===Assigning Additional Group Admins===

It is possible for a group to have more than one Admin. To do so, please view '''Group Members''' list - choose '''Members''' link under the group cover or '''View all''' link in members module.

[[File:7ovKW40lTRy7oS5TYJZ18w.png]]

When viewing members list select the '''User''' who you wish to promote as Group Admin and click cog icon on his/hers card. Then choose '''Set as group admin'''.

[[File:GcWkl4LYRaOGppw8da6i0w.png]]

Take note that only Group Admins and Super Users are able to assign users as Group Admins.

===Sending Email to Group Members===

A Group Admin or Joomla Super User can send emails to all Group Members by using the '''Send Email''' option. This email will be delivered after the next Cron job. Please make sure that [[Setting up Cron Job|Cron is running properly]] on your site.<br/>

::: [[File:Groupsendemail.jpg]]<br />

::: [[File:Groupsendemail2.jpg]]

File:GcWkl4LYRaOGppw8da6i0w.png

2017-12-01T07:17:34Z

Michal:

File:7ovKW40lTRy7oS5TYJZ18w.png

2017-12-01T07:14:42Z

Michal:

Import Groups From CSV

2017-11-16T07:11:51Z

Michal: /* CSV Format */

{{alert|<center>'''From JomSocial 4.1.3'''</center>|alert-danger}}

==Overview==

This is useful feature when you need to create a lot of predefined groups. In that case all you need is to create CSV file.

==CSV Format==

Your CSV files needs to be formatted in following order:

* '''name''' - group name.
* '''privacy''' - group privacy, where '''0''' is open group while '''1''' is closed group.
* '''short_description''' - short group description.
* '''full_description''' - full group description.
* '''category_id''' - category ID to which group should be assigned.

An example of CSV file can be downloaded [http://documentation.jomsocial.com/downloads/groupsimport.csv here]

==Import==

* Browse to '''JomSocial Dasboard''' in the backend then click on '''Groups''' -> '''View groups'''
* Click '''Import groups from .CSV''' button
:::[[File:Oc6hmvw.png ]]
* Click '''Browse''' button and locate file on your hard drive, confirm your choice.
:::[[File:RvmcXpz.png]]
* Click '''Import groups''' button.
:::[[File:68bksNs.png ]]<br>

File should be uploaded and groups created.

==See Also==
* [[Users Export and Import from CSV]]

JomSocial 4.4 System Requirements

2017-11-06T09:22:34Z

File:68bksNs.png

2016-03-01T12:42:41Z

Michal:

File:RvmcXpz.png

2016-03-01T12:41:51Z

Michal:

File:Oc6hmvw.png

2016-03-01T12:39:59Z

Michal:

Built-in Module Positions

2015-07-22T07:44:12Z

Michal: /* Stacked Positions */

From JomSocial 1.6 forward, you can insert Joomla modules into any part of the JomSocial template. This will allow you to have greater flexibility in customizing the look and feel of JomSocial to your own liking.

== Module Position Lists ==
We categorize module positions to 3 classes.
# '''Global''' - One position that is shown on various different pages
# '''Page specific''' - These positions will only show on certain JomSocial pages
# '''Only Mine''' - These module positions are only available on the profile page and are show to the owner of a profile

=== Global Positions ===
# '''js_side_top''' - Placed on top of the side column (sidebar) of Frontpage, Profile, Groups and Events Pages.
# '''js_side_bottom''' - Same as js_side_top except that is placed on the bottom of the sidebar.

=== Profile Positions ===
On profile page, all Global Positions are available as well as
# '''js_profile_top''' - Placed between the Toolbar and the Profile Page.
# '''js_profile_mine_top''' - Placed between the Toolbar and the Profile Page only for the profile owner
# '''js_profile_feed_top''' - Placed before the Activity Stream section of the Profile Page.
# '''js_profile_feed_bottom''' - Placed after the Activity Stream section of the Profile Page.
# '''js_profile_side_top''' - Placed before any JomSocial content on the side column of Profile Page and after js_side_top.
# '''js_profile_mine_side_top''' - Only shown to the owner of aprofile on top of the side column
# '''js_profile_mine_side_bottom''' - Shown only to the owner of a profile at the bottom of side column
# '''js_profile_side_bottom''' - Placed after any JomSocial content on the side column of the Profile Page and before js_side_bottom.
# '''js_profile_mine_bottom''' - Placed at the bottom of the profile page and visible only for profile owner
# '''js_profile_bottom''' - Placed at the bottom of Profile Page.

=== Groups Positions ===
All global positions are available on the individual group page and there are two more additional positions you can use
# '''js_groups_side_top''' - Placed before any JomSocial content on the side column of the Groups Page and after js_side_top.
# '''js_groups_side_bottom''' - Placed after any JomSocial content on the side column of the Groups Page and before js_side_bottom.

=== Events Positions ===
All Global Positions are available on Event Page as well as two more
# '''js_events_side_top''' - Shown at the top of the side column in events page
# '''js_events_side_bottom''' - Shown at the bottom of the side column in events page

=== Frontpage Positions ===
All global positions are available on this page. In addition, you can use one more position
# <span class="label label-warning">JomSocial 4</span> '''js_side_frontpage_top''' - Top frontpage position. On clean installation will show Members and Who's Online modules.
# '''js_side_frontpage''' - Middle frontpage position. On clean installation will show Photos and Videos module.
# <span class="label label-warning">JomSocial 4</span> '''js_side_frontpage_bottom''' - Bottom frontpage position. On clean installation will show Group and Event modules

=== No Access Page ===
No access page features two module positions only
# '''js_noaccess_top''' - Shown at the top of the page
# '''js_noaccess_bottom''' Shown at the bottom of the page

== Stacked Positions ==
<span class="label label-success">'''Since 4.0.2:'''</span> A new set of stacked module positions have been added. Simply add "_stacked" at the end of available position name and publish the modules in it

Example:
* '''js_sidebar_top''' - will display modules in tabs
* '''js_sidebar_top_stacked''' - will display modules stacked on top of each other

==How to Insert a Module into JomSocial?==
In the Joomla Administrator Backend, go to '''Module Manager''' (Extensions > Module Manager). On the '''Module Manager''' page, you can either create a new module or select an existing module you would like to place in JomSocial. In the '''Edit Module''' page, under the '''Details''' field set, there is a parameter called '''Position'''. '''''Manually enter''''' the name of the module position (you may refer to the list of built-in module positions above). Click '''Save''' and your module will appear in your desired area.

::: [[File:Js profile side top.png]]

==Adding Your Own Module Position==
You can add your module position name and insert it anywhere within any JomSocial template files. The '''Code Snippet''' that does this for tabbed module layout is:
<syntaxhighlight lang="php">
<div class="joms-module__wrapper"><?php $this->renderModules('PositionName'); ?></div>
</syntaxhighlight>
<br />
While for the stacked layout you would use:
<syntaxhighlight lang="php">
<div class="joms-module__wrapper--stacked"><?php $this->renderModules('PositionName_stacked'); ?></div>
</syntaxhighlight>
<br />

==Module Positions in the Templates==
<center>{{alert|'''NOTE:''' The images show the JomSocial 3.2 layout which might differ in JomSocial 4|alert-danger}}</center>
This is the overview of '''Module Positions''' within the JomSocial Component:

=== Frontpage ===
::: [[File:Frontpage.jpg]]

=== Profile ===
::: [[File:Profilepage.jpg ]]

===Group===
::: [[File:Grouppage.jpg ]]

===Event===
::: [[File:Eventpage.jpg ]]

===No Access===
::: [[File:Modulepositionnoaccess.png]]

===Module Class Suffix===
{{alert-deprecated}}
If you want your modules to look like the rest of the JomSocial boxes, you can use these '''Module Suffixes''':
* '''For jomSocial 2.6 and below''' - " cModule"
* '''For jomSocial 2.8 till JomSocial 3.2.1''' - " app-box'

{{alert|<strong>Note:</strong> Add module sufixes without quotes, but with white space in the name.|alert-info}}

::: [[File:Moduleclasssufix.png]]

====Why Module Class Suffix are Removed in JomSocial 4?====
Module class suffixes have been used in JomSocial 3.2 and lower because it was the only way for users to style additional modules exactly as other JomSocial template elements so that they blend into design like its outlined on image bellow:
:::[[File:Module suffixes.png]]

In JomSocial 4 this is not needed anymore because all modules will blend in by default

==See Also==
* [[Modules|Modules Documentation Page]]

Customizing Template

2015-06-08T13:38:23Z

2015-06-03T09:19:53Z

Michal: /* Customizing Single Template File */

<center>{{alert|'''Note:''' This article may contain obsolete data. While using the methods explained here will work in most cases, an example used may not as its been updated. Read more about it [[Change Get Connected Image|here]] |alert}}</center>

==Overview==
Our template design philosophy is to ensure tight and seamless integration with the Joomla template, where the CSS styling on the Joomla template is inherited as much as possible within the JomSocial template, e.g. headings, font colors / sizes, link hover behavior, etc.<br/>
However, there are much more areas that can not be styled with Joomla Template CSS because there is no appropriate selector for respective element, and most of the layout needs to be styled through own component CSS.<br/>
Implementing Bootstrap into Joomla 3 tends to deal with this problem, but, there is a long way to go before all component and template providers adopt it properly

==Before You Begin==
Before you begin customizing the JomSocial template, identify your overall objective of the customization work that needs to be done. If your goal is to perform light customization on certain parts of JomSocial, this tutorial is right for you. If you intend to do a complete makeover on JomSocial, we recommend that you read our [[Creating New Template|Creating JomSocial Template]] guide.

==Customize Component Using Built in Joomla Overrides==
Most users' first intuition is to edit the JomSocial template files directly. Although this will work, we generally do not recommend editing the template files directly. This is because each time you upgrade to a newer version of JomSocial, these template files '''will be''' overwritten and you '''will lose''' your modifications. The faster, safer way to customize your JomSocial template is to use the Joomla [http://docs.joomla.org/Understanding_Output_Overrides output override] feature, that our component supports.

===Setting Up the Override Folder===
Before you can start customizing, you will need to create an '''Override Folder''' for JomSocial Component.<br/>
It seems that there is a lot of confusion regarding what files will go where and how to setup the override folder properly, mostly because the folder structure differs, but if you go trough it once, you will see that this is no rocket science and not something that JomSocial invented. We are just using the things that are available in Joomla:<br />
'''The very important thing to understand''' is that Joomla Template Override can only override the current component or module output<br/>
What this means, is that if you select the '''default''' template in [[Changing Default Template|JomSocial Template Settings]] the override will override the default template. If you select any other template to be used as your JomSocial template, the override folder will override that one.<br/>
Bottom line, the override folder always override the active component output and is located here:
* '''<font color=green>JOOMLA/templates/yourTemplateName/html/com_community</font>'''
If you dont have this folder, feel free to create it manually<br/>
The override folder <font color=red>'''IS NOT'''</font>
* '''<font color=red>JOOMLA/templates/yourTemplateName/html/com_community/templates/default</font>'''
* '''<font color=red>JOOMLA/templates/yourTemplateName/html/com_community/templates/whatever</font>'''
{{alert|'''Attention:'''<br/>
If you set the override folder like those marked in red, it is the same as you would want to override the content of the '''JOOMLA/components/com_community/templates/default/templates/default''' or <br/>
'''JOOMLA/components/com_community/templates/default/templates/whatever''' folder<br/>
'''Remember,''' Joomla override can override only active output. It does not know the difference between JomSocaial Templates and at any given moment, you can have only one override that will always override the selected JomSocial template.|alert-error}}

===Customizing Single Template File===
To customize the single template file, you will first need to identify what is the proper file to modify<br/>
The most common area that users would like to modify is the "Get Connected" area of the JomSocial template.
::[[File:Getconnected.png]]
The output of this area is shown with this file
* '''JOOMLA/components/com_community/templates/jomsocial/layouts/frontpage/'''base.php
To override it properly, our override file needs to be
* '''JOOMLA/templates/yourTemplateName/html/com_community/jomsocial/layouts/frontpage/'''base.php
You can now start editing the override file and apply your changes. Once saved, the override will take effect, no matter what JomSocial template you have set JomSocial to use.

{{alert|'''Reminder:'''}}<br/>
At this point you should figure out that Joomla override folder always override the active component output. Regardless of what JomSocial template you use in JomSocial Template configuration.<br/>
Similarly as you do with files, you can also override the content of other folders within JomSocial template.<br/>
For instance, if you want to override content of <br/>
'''JOOMLA/components/com_community/templates/jomsocial/assets/css''' folder, your override path will be<br/>
'''JOOMLA/templates/yourTemplateName/html/com_community/css'''<br/>

====Example====
# Go to Joomla! backend and from Components dropdow, select JomSocial -> Templates
# Select '''default''' template to be used on your site
# With file manager, navigate to ROOT/components/com)community/templates/jomsocial/layouts/frontpage
# Find the file '''base.php'''
# Copy that file to ROOT/templates/yourTemplateName/html/com_community/layouts/frontpage
# With your favorite code editor, open the file for editing. We do not recommend you to do this with native Windows tools. Use something like [http://notepad-plus-plus.org Notepad++]
# Edit the content of file as shown on the image bellow<br/>[[File:Overridefile.png]]
# Save the file and navigate to frontend of your site
# Check the result on the frontpage <br/>[[File:Helloworldfrontpage.png]]
# To revert the change, rename the edited file to '''base.php.MODIFIED''' or whatever name you want to use as long as its not the same as original

===Customizing CSS Stylesheets===
Hopefully, you have already realized that customizing style sheet will require you to create the css folder within Joomla override because they are in their own folder at the jomsocial template<br/>
Override always follow the structure of the template that has been overriden, so our override file will e.<br/>
We will repeat it again, just in case you forgot

* Original File: JOOMLA/components/com_community/templates/jomsocial/assets/'''css/style.css'''
* Override File: JOOMLA/templates/yourTemplateName/html/com_community/'''css/style.css'''

The drawback of this override is that CSS stylesheets which originally came with this file will be lost.<br/>
In other words, if you put blank style.css file there, preparing the customization, the entire JomSocial component will lose all of the styling.<br/>
Ofcourse, you could just copy the entire '''style.css''' file from default folder and start modifying it, but then you are not doing yourself a favor, because it will be hard to maintain it later.<br/>
To prevent this from happening, create the blank '''style.css''' file and insert the following @import code to the first line of it
<syntaxhighlight lang="css">
@import url("../../../../../components/com_community/templates/jomsocial/assets/css/style.css");
/* Add overrides bellow */
</syntaxhighlight>
<br />
:::[[File:Styleimport.png]]
This will import '''all''' JomSocial styles from default style.css file and you are set to modify your override.

====Example====
# Install [http://getfirebug.com Firebug for Firefox] or any other developer tool we suggested [[Tools to help me discover conflicts|here]]
# For this example, we are going to override the blue links in the profile page <br/> [[File:Cssoverride1.png]]
# Using Firebug, identify the element you want to change styling for by right clicking on it, then pressing "Inspect Element with Firebug" <br/> [[File:Cssoverride2.png]]
# The Fierbug window will open giving you the exact selector of the element <br/> [[File:Cssoverride3.png]]
# Edit the color value to see if change will take effect. Lets change it to red color. Click on the selector shown on the image above, and change the value for color property <br/> [[File:Cssoverride4.png]]
# Success???!! No! It is only changed on the Firebug window. You need to apply it to the override.
# Copy entire selector from Firebug <br/> [[File:Cssoverride5.png]]
# Paste it into your override CSS <br/> [[File:Cssoverride6.png]]
# Save it and refresh the profile page. The links will now be red.

===Customizing Images===
With template overrides, you can also customize the images as well, and first intuition is that copying and pasting the image from source folder to override folder would be enough. This however, is not the case. Images in modern day web are loaded through CSS<br/>
Just a few moments ago, we imported the CSS from default template of JomSocial in our css, remember. Images, are still loaded from default template, even if you paste them to the override folder. That being said, if you want to override the image, you need to add it to the proper override folder and define it in override CSS

====Example====
# Determine which image you want to override. For our exercise, we will change the image in the "Get Connected" box as this is one of the top asked questions.
# Use the Firebug to see where image is located. <br/> [[File:Imageoverride1.png]]
#* Firebug will conviently show you the image location within the folder where is located. For us it is still in JOOMLA/components/com_community/templates/default/images/
#* You can also see the image size so you can easily create the new one with same dimensions.
# Create the new image named '''guest-bg.jpg''' and place it in JOOMLA/templates/yourTemplateName/html/com_community/images
# Go back to firebug and copy the entire selector for the image <br/> [[File:Imageoverride2.png]]
# Paste it into CSS override file <br/> [[File:Imageoverride3.png]]
# Save and refresh the page (If no change occurs, do a "hard refresh" with CTRL+F5) <br/> [[File:Imageoverride4.png]]
# You can clear up your CSS override and just use what you really need. In this case, It is the image. Clear up the CSS class selector as shown bellow <br/> [[File:Imageoverride5.png]] <br/>The rest of the styles in that selector will be used from default template. We only wanted to change the image right.

==Sample Override==
A sample override from example guides can be obtained from the link bellow<br/>
[http://documentation.jomsocial.com/downloads/com_community-override.zip Download Override]<br/>

To use it, extract the archive on your computer hard disk and copy the '''com_community''' folder in
* '''JOOMLA/templates/yourTemplateName/html'''

Override will automatically take place.<br/>
If you rename the '''frontpage.guests.php.MODIFIED''' back to '''frontpage.guests.php''' you will see the '''Hello World!''' message from the beginning of the tutorial.

==See Also==
* [[Creating New Template]]
* [[Replacing_Default_Avatar]]
* [[Built-in Module Positions]]
* [[Replacing the Joomla Native Login Screen With Hello Me Module]]

Customizing Template

2015-06-03T09:17:50Z

Michal: /* Customizing Single Template File */

<center>{{alert|'''Note:''' This article may contain obsolete data. While using the methods explained here will work in most cases, an example used may not as its been updated. Read more about it [[Change Get Connected Image|here]] |alert}}</center>

==Overview==
Our template design philosophy is to ensure tight and seamless integration with the Joomla template, where the CSS styling on the Joomla template is inherited as much as possible within the JomSocial template, e.g. headings, font colors / sizes, link hover behavior, etc.<br/>
However, there are much more areas that can not be styled with Joomla Template CSS because there is no appropriate selector for respective element, and most of the layout needs to be styled through own component CSS.<br/>
Implementing Bootstrap into Joomla 3 tends to deal with this problem, but, there is a long way to go before all component and template providers adopt it properly

==Before You Begin==
Before you begin customizing the JomSocial template, identify your overall objective of the customization work that needs to be done. If your goal is to perform light customization on certain parts of JomSocial, this tutorial is right for you. If you intend to do a complete makeover on JomSocial, we recommend that you read our [[Creating New Template|Creating JomSocial Template]] guide.

==Customize Component Using Built in Joomla Overrides==
Most users' first intuition is to edit the JomSocial template files directly. Although this will work, we generally do not recommend editing the template files directly. This is because each time you upgrade to a newer version of JomSocial, these template files '''will be''' overwritten and you '''will lose''' your modifications. The faster, safer way to customize your JomSocial template is to use the Joomla [http://docs.joomla.org/Understanding_Output_Overrides output override] feature, that our component supports.

===Setting Up the Override Folder===
Before you can start customizing, you will need to create an '''Override Folder''' for JomSocial Component.<br/>
It seems that there is a lot of confusion regarding what files will go where and how to setup the override folder properly, mostly because the folder structure differs, but if you go trough it once, you will see that this is no rocket science and not something that JomSocial invented. We are just using the things that are available in Joomla:<br />
'''The very important thing to understand''' is that Joomla Template Override can only override the current component or module output<br/>
What this means, is that if you select the '''default''' template in [[Changing Default Template|JomSocial Template Settings]] the override will override the default template. If you select any other template to be used as your JomSocial template, the override folder will override that one.<br/>
Bottom line, the override folder always override the active component output and is located here:
* '''<font color=green>JOOMLA/templates/yourTemplateName/html/com_community</font>'''
If you dont have this folder, feel free to create it manually<br/>
The override folder <font color=red>'''IS NOT'''</font>
* '''<font color=red>JOOMLA/templates/yourTemplateName/html/com_community/templates/default</font>'''
* '''<font color=red>JOOMLA/templates/yourTemplateName/html/com_community/templates/whatever</font>'''
{{alert|'''Attention:'''<br/>
If you set the override folder like those marked in red, it is the same as you would want to override the content of the '''JOOMLA/components/com_community/templates/default/templates/default''' or <br/>
'''JOOMLA/components/com_community/templates/default/templates/whatever''' folder<br/>
'''Remember,''' Joomla override can override only active output. It does not know the difference between JomSocaial Templates and at any given moment, you can have only one override that will always override the selected JomSocial template.|alert-error}}

===Customizing Single Template File===
To customize the single template file, you will first need to identify what is the proper file to modify<br/>
The most common area that users would like to modify is the "Get Connected" area of the JomSocial template.
::[[File:Getconnected.png]]
The output of this area is shown with this file
* '''JOOMLA/components/com_community/templates/default/'''frontpage.guests.php
To override it properly, our override file needs to be
* '''JOOMLA/templates/yourTemplateName/html/com_community/'''frontpage.guests.php
You can now start editing the override file and apply your changes. Once saved, the override will take effect, no matter what JomSocial template you have set JomSocial to use.

{{alert|'''Reminder:'''<br/>
At this point you should figure out that Joomla override folder always override the active component output. Regardless of what JomSocial template you use in JomSocial Template configuration.<br/>
Similarly as you do with files, you can also override the content of other folders within JomSocial template.<br/>
For instance, if you want to override content of <br/>
'''JOOMLA/components/com_community/templates/jomsocial/assets/css''' folder, your override path will be<br/>
'''JOOMLA/templates/yourTemplateName/html/com_community/css'''<br/>

====Example====
# Go to Joomla! backend and from Components dropdow, select JomSocial -> Templates
# Select '''default''' template to be used on your site
# With file manager, navigate to ROOT/components/com)community/templates/jomsocial/layouts/frontpage
# Find the file '''base.php'''
# Copy that file to ROOT/templates/yourTemplateName/html/com_community/layouts/frontpage
# With your favorite code editor, open the file for editing. We do not recommend you to do this with native Windows tools. Use something like [http://notepad-plus-plus.org Notepad++]
# Edit the content of file as shown on the image bellow<br/>[[File:Overridefile.png]]
# Save the file and navigate to frontend of your site
# Check the result on the frontpage <br/>[[File:Helloworldfrontpage.png]]
# To revert the change, rename the edited file to '''base.php.MODIFIED''' or whatever name you want to use as long as its not the same as original

===Customizing CSS Stylesheets===
Hopefully, you have already realized that customizing style sheet will require you to create the css folder within Joomla override because they are in their own folder at the jomsocial template<br/>
Override always follow the structure of the template that has been overriden, so our override file will e.<br/>
We will repeat it again, just in case you forgot

* Original File: JOOMLA/components/com_community/templates/jomsocial/assets/'''css/style.css'''
* Override File: JOOMLA/templates/yourTemplateName/html/com_community/'''css/style.css'''

The drawback of this override is that CSS stylesheets which originally came with this file will be lost.<br/>
In other words, if you put blank style.css file there, preparing the customization, the entire JomSocial component will lose all of the styling.<br/>
Ofcourse, you could just copy the entire '''style.css''' file from default folder and start modifying it, but then you are not doing yourself a favor, because it will be hard to maintain it later.<br/>
To prevent this from happening, create the blank '''style.css''' file and insert the following @import code to the first line of it
<syntaxhighlight lang="css">
@import url("../../../../../components/com_community/templates/jomsocial/assets/css/style.css");
/* Add overrides bellow */
</syntaxhighlight>
<br />
:::[[File:Styleimport.png]]
This will import '''all''' JomSocial styles from default style.css file and you are set to modify your override.

====Example====
# Install [http://getfirebug.com Firebug for Firefox] or any other developer tool we suggested [[Tools to help me discover conflicts|here]]
# For this example, we are going to override the blue links in the profile page <br/> [[File:Cssoverride1.png]]
# Using Firebug, identify the element you want to change styling for by right clicking on it, then pressing "Inspect Element with Firebug" <br/> [[File:Cssoverride2.png]]
# The Fierbug window will open giving you the exact selector of the element <br/> [[File:Cssoverride3.png]]
# Edit the color value to see if change will take effect. Lets change it to red color. Click on the selector shown on the image above, and change the value for color property <br/> [[File:Cssoverride4.png]]
# Success???!! No! It is only changed on the Firebug window. You need to apply it to the override.
# Copy entire selector from Firebug <br/> [[File:Cssoverride5.png]]
# Paste it into your override CSS <br/> [[File:Cssoverride6.png]]
# Save it and refresh the profile page. The links will now be red.

===Customizing Images===
With template overrides, you can also customize the images as well, and first intuition is that copying and pasting the image from source folder to override folder would be enough. This however, is not the case. Images in modern day web are loaded through CSS<br/>
Just a few moments ago, we imported the CSS from default template of JomSocial in our css, remember. Images, are still loaded from default template, even if you paste them to the override folder. That being said, if you want to override the image, you need to add it to the proper override folder and define it in override CSS

====Example====
# Determine which image you want to override. For our exercise, we will change the image in the "Get Connected" box as this is one of the top asked questions.
# Use the Firebug to see where image is located. <br/> [[File:Imageoverride1.png]]
#* Firebug will conviently show you the image location within the folder where is located. For us it is still in JOOMLA/components/com_community/templates/default/images/
#* You can also see the image size so you can easily create the new one with same dimensions.
# Create the new image named '''guest-bg.jpg''' and place it in JOOMLA/templates/yourTemplateName/html/com_community/images
# Go back to firebug and copy the entire selector for the image <br/> [[File:Imageoverride2.png]]
# Paste it into CSS override file <br/> [[File:Imageoverride3.png]]
# Save and refresh the page (If no change occurs, do a "hard refresh" with CTRL+F5) <br/> [[File:Imageoverride4.png]]
# You can clear up your CSS override and just use what you really need. In this case, It is the image. Clear up the CSS class selector as shown bellow <br/> [[File:Imageoverride5.png]] <br/>The rest of the styles in that selector will be used from default template. We only wanted to change the image right.

==Sample Override==
A sample override from example guides can be obtained from the link bellow<br/>
[http://documentation.jomsocial.com/downloads/com_community-override.zip Download Override]<br/>

To use it, extract the archive on your computer hard disk and copy the '''com_community''' folder in
* '''JOOMLA/templates/yourTemplateName/html'''

Override will automatically take place.<br/>
If you rename the '''frontpage.guests.php.MODIFIED''' back to '''frontpage.guests.php''' you will see the '''Hello World!''' message from the beginning of the tutorial.

==See Also==
* [[Creating New Template]]
* [[Replacing_Default_Avatar]]
* [[Built-in Module Positions]]
* [[Replacing the Joomla Native Login Screen With Hello Me Module]]

Customizing Template

2015-06-03T09:13:39Z

Michal: /* Customizing CSS Stylesheets */

<center>{{alert|'''Note:''' This article may contain obsolete data. While using the methods explained here will work in most cases, an example used may not as its been updated. Read more about it [[Change Get Connected Image|here]] |alert}}</center>

==Overview==
Our template design philosophy is to ensure tight and seamless integration with the Joomla template, where the CSS styling on the Joomla template is inherited as much as possible within the JomSocial template, e.g. headings, font colors / sizes, link hover behavior, etc.<br/>
However, there are much more areas that can not be styled with Joomla Template CSS because there is no appropriate selector for respective element, and most of the layout needs to be styled through own component CSS.<br/>
Implementing Bootstrap into Joomla 3 tends to deal with this problem, but, there is a long way to go before all component and template providers adopt it properly

==Before You Begin==
Before you begin customizing the JomSocial template, identify your overall objective of the customization work that needs to be done. If your goal is to perform light customization on certain parts of JomSocial, this tutorial is right for you. If you intend to do a complete makeover on JomSocial, we recommend that you read our [[Creating New Template|Creating JomSocial Template]] guide.

==Customize Component Using Built in Joomla Overrides==
Most users' first intuition is to edit the JomSocial template files directly. Although this will work, we generally do not recommend editing the template files directly. This is because each time you upgrade to a newer version of JomSocial, these template files '''will be''' overwritten and you '''will lose''' your modifications. The faster, safer way to customize your JomSocial template is to use the Joomla [http://docs.joomla.org/Understanding_Output_Overrides output override] feature, that our component supports.

===Setting Up the Override Folder===
Before you can start customizing, you will need to create an '''Override Folder''' for JomSocial Component.<br/>
It seems that there is a lot of confusion regarding what files will go where and how to setup the override folder properly, mostly because the folder structure differs, but if you go trough it once, you will see that this is no rocket science and not something that JomSocial invented. We are just using the things that are available in Joomla:<br />
'''The very important thing to understand''' is that Joomla Template Override can only override the current component or module output<br/>
What this means, is that if you select the '''default''' template in [[Changing Default Template|JomSocial Template Settings]] the override will override the default template. If you select any other template to be used as your JomSocial template, the override folder will override that one.<br/>
Bottom line, the override folder always override the active component output and is located here:
* '''<font color=green>JOOMLA/templates/yourTemplateName/html/com_community</font>'''
If you dont have this folder, feel free to create it manually<br/>
The override folder <font color=red>'''IS NOT'''</font>
* '''<font color=red>JOOMLA/templates/yourTemplateName/html/com_community/templates/default</font>'''
* '''<font color=red>JOOMLA/templates/yourTemplateName/html/com_community/templates/whatever</font>'''
{{alert|'''Attention:'''<br/>
If you set the override folder like those marked in red, it is the same as you would want to override the content of the '''JOOMLA/components/com_community/templates/default/templates/default''' or <br/>
'''JOOMLA/components/com_community/templates/default/templates/whatever''' folder<br/>
'''Remember,''' Joomla override can override only active output. It does not know the difference between JomSocaial Templates and at any given moment, you can have only one override that will always override the selected JomSocial template.|alert-error}}

===Customizing Single Template File===
To customize the single template file, you will first need to identify what is the proper file to modify<br/>
The most common area that users would like to modify is the "Get Connected" area of the JomSocial template.
::[[File:Getconnected.png]]
The output of this area is shown with this file
* '''JOOMLA/components/com_community/templates/default/'''frontpage.guests.php
To override it properly, our override file needs to be
* '''JOOMLA/templates/yourTemplateName/html/com_community/'''frontpage.guests.php
You can now start editing the override file and apply your changes. Once saved, the override will take effect, no matter what JomSocial template you have set JomSocial to use.

{{alert|'''Reminder:'''<br/>
At this point you should figure out that Joomla override folder always override the active component output. Regardless of what JomSocial template you use in JomSocial Template configuration.<br/>
Similarly as you do with files, you can also override the content of other folders within JomSocial template.<br/>
For instance, if you want to override content of <br/>
'''JOOMLA/components/com_community/templates/default/css''' folder, your override path will be<br/>
'''JOOMLA/templates/yourTemplateName/html/com_community/css'''<br/>
If you want to override content of <br/>
'''JOOMLA/components/com_community/templates/default/images''' folder, your override path will be
'''JOOMLA/templates/yourTemplateName/html/com_community/images'''
Be aware however, that overriding images, will require you to override CSS as well.|alert-info}}

====Example====
# Go to Joomla! backend and from Components dropdow, select JomSocial -> Templates
# Select '''default''' template to be used on your site
# With file manager, navigate to ROOT/components/com)community/templates/default/
# Find the file '''frontpage.guests.php'''
# Copy that file to ROOT/templates/yourTemplateName/html/com_community
# With your favorite code editor, open the file for editing. We do not recommend you to do this with native Windows tools. Use something like [http://notepad-plus-plus.org Notepad++]
# Edit the content of file as shown on the image bellow<br/>[[File:Overridefile.png]]
# Save the file and navigate to frontend of your site
# Check the result on the frontpage <br/>[[File:Helloworldfrontpage.png]]
# To revert the change, rename the edited file to '''frontpage.guests.php.MODIFIED''' or whatever name you want to use as long as its not the same as original

{{alert|'''Note:''': JomSocial also have some template files within '''modules''' folder. You can also override them but you need to follow the folder structure<br/>
If for example, you want to modify the JOOMLA/components/com_community/templates/default/'''modules/profile/userinfo.php''' then your override file will be JOOMLA/templates/yourTemplateName/html/com_community/'''modules/profile/userinfo.php'''|alert-danger}}

===Customizing CSS Stylesheets===
Hopefully, you have already realized that customizing style sheet will require you to create the css folder within Joomla override because they are in their own folder at the jomsocial template<br/>
Override always follow the structure of the template that has been overriden, so our override file will e.<br/>
We will repeat it again, just in case you forgot

* Original File: JOOMLA/components/com_community/templates/jomsocial/assets/'''css/style.css'''
* Override File: JOOMLA/templates/yourTemplateName/html/com_community/'''css/style.css'''

The drawback of this override is that CSS stylesheets which originally came with this file will be lost.<br/>
In other words, if you put blank style.css file there, preparing the customization, the entire JomSocial component will lose all of the styling.<br/>
Ofcourse, you could just copy the entire '''style.css''' file from default folder and start modifying it, but then you are not doing yourself a favor, because it will be hard to maintain it later.<br/>
To prevent this from happening, create the blank '''style.css''' file and insert the following @import code to the first line of it
<syntaxhighlight lang="css">
@import url("../../../../../components/com_community/templates/jomsocial/assets/css/style.css");
/* Add overrides bellow */
</syntaxhighlight>
<br />
:::[[File:Styleimport.png]]
This will import '''all''' JomSocial styles from default style.css file and you are set to modify your override.

====Example====
# Install [http://getfirebug.com Firebug for Firefox] or any other developer tool we suggested [[Tools to help me discover conflicts|here]]
# For this example, we are going to override the blue links in the profile page <br/> [[File:Cssoverride1.png]]
# Using Firebug, identify the element you want to change styling for by right clicking on it, then pressing "Inspect Element with Firebug" <br/> [[File:Cssoverride2.png]]
# The Fierbug window will open giving you the exact selector of the element <br/> [[File:Cssoverride3.png]]
# Edit the color value to see if change will take effect. Lets change it to red color. Click on the selector shown on the image above, and change the value for color property <br/> [[File:Cssoverride4.png]]
# Success???!! No! It is only changed on the Firebug window. You need to apply it to the override.
# Copy entire selector from Firebug <br/> [[File:Cssoverride5.png]]
# Paste it into your override CSS <br/> [[File:Cssoverride6.png]]
# Save it and refresh the profile page. The links will now be red.

===Customizing Images===
With template overrides, you can also customize the images as well, and first intuition is that copying and pasting the image from source folder to override folder would be enough. This however, is not the case. Images in modern day web are loaded through CSS<br/>
Just a few moments ago, we imported the CSS from default template of JomSocial in our css, remember. Images, are still loaded from default template, even if you paste them to the override folder. That being said, if you want to override the image, you need to add it to the proper override folder and define it in override CSS

====Example====
# Determine which image you want to override. For our exercise, we will change the image in the "Get Connected" box as this is one of the top asked questions.
# Use the Firebug to see where image is located. <br/> [[File:Imageoverride1.png]]
#* Firebug will conviently show you the image location within the folder where is located. For us it is still in JOOMLA/components/com_community/templates/default/images/
#* You can also see the image size so you can easily create the new one with same dimensions.
# Create the new image named '''guest-bg.jpg''' and place it in JOOMLA/templates/yourTemplateName/html/com_community/images
# Go back to firebug and copy the entire selector for the image <br/> [[File:Imageoverride2.png]]
# Paste it into CSS override file <br/> [[File:Imageoverride3.png]]
# Save and refresh the page (If no change occurs, do a "hard refresh" with CTRL+F5) <br/> [[File:Imageoverride4.png]]
# You can clear up your CSS override and just use what you really need. In this case, It is the image. Clear up the CSS class selector as shown bellow <br/> [[File:Imageoverride5.png]] <br/>The rest of the styles in that selector will be used from default template. We only wanted to change the image right.

==Sample Override==
A sample override from example guides can be obtained from the link bellow<br/>
[http://documentation.jomsocial.com/downloads/com_community-override.zip Download Override]<br/>

To use it, extract the archive on your computer hard disk and copy the '''com_community''' folder in
* '''JOOMLA/templates/yourTemplateName/html'''

Override will automatically take place.<br/>
If you rename the '''frontpage.guests.php.MODIFIED''' back to '''frontpage.guests.php''' you will see the '''Hello World!''' message from the beginning of the tutorial.

==See Also==
* [[Creating New Template]]
* [[Replacing_Default_Avatar]]
* [[Built-in Module Positions]]
* [[Replacing the Joomla Native Login Screen With Hello Me Module]]

Smileys in the stream

2015-06-02T09:12:14Z

Michal:

{{alert|'''Available since JomSocial 3.2'''|alert-danger}}

==Available symbols==
<syntaxhighlight lang="php">
:))
:)
:P
:(
;)
:D
B)
:(
:D
:O
:?
:|
</syntaxhighlight>
<br/>
==Images==
[[File:Smileys.png]]

Setting up Facebook Connect

2015-04-09T12:50:33Z

2015-04-09T12:44:18Z

Michal:

File:Fb16.png

2015-04-09T12:42:05Z

Michal: