Customizing Template - Revision history

Michal: /* Customizing Single Template File */

2015-06-08T13:38:23Z

‎Customizing Single Template File

Michal at 09:21, 3 June 2015

2015-06-03T09:21:17Z

Michal: /* Customizing Single Template File */

2015-06-03T09:19:53Z

‎Customizing Single Template File

Michal: /* Customizing Single Template File */

2015-06-03T09:17:50Z

‎Customizing Single Template File

Michal: /* Customizing CSS Stylesheets */

2015-06-03T09:13:39Z

‎Customizing CSS Stylesheets

Sinisakrisan at 03:46, 13 May 2014

2014-05-13T03:46:37Z

Sinisakrisan at 03:44, 13 May 2014

2014-05-13T03:44:52Z

Sinisakrisan: /* See Also */

2014-03-31T09:31:21Z

‎See Also

Sinisakrisan: /* Sample Override */

2013-09-17T12:17:06Z

‎Sample Override

Sinisakrisan: /* Sample Override */

2013-09-17T12:16:19Z

‎Sample Override

@@ Line 35: / Line 35: @@
 * '''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
+* '''JOOMLA/templates/yourTemplateName/html/com_community/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.

@@ Line 85: / Line 85: @@
 # 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]]
+# Paste it into your override CSS <br/>
 # Save it and refresh the profile page. The links will now be red.
 ==See Also==

@@ Line 33: / Line 33: @@
 ::[[File:Getconnected.png]]
 The output of this area is shown with this file
-* '''JOOMLA/components/com_community/templates/default/'''frontpage.guests.php
+* '''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/'''frontpage.guests.php
+* '''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/>
+{{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/>

@@ Line 42: / Line 42: @@
 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/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/default/
+# With file manager, navigate to ROOT/components/com)community/templates/jomsocial/layouts/frontpage
-# Find the file '''frontpage.guests.php'''
+# Find the file '''base.php'''
-# Copy that file to ROOT/templates/yourTemplateName/html/com_community
+# 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 '''frontpage.guests.php.MODIFIED''' or whatever name you want to use as long as its not the same as original
+# 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
-−
-{{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===

@@ Line 69: / Line 69: @@
 We will repeat it again, just in case you forgot
-* Original File: JOOMLA/components/com_community/templates/default/'''css/style.css'''
+* Original File: JOOMLA/components/com_community/templates/jomsocial/assets/'''css/style.css'''
 * Override File: JOOMLA/templates/yourTemplateName/html/com_community/'''css/style.css'''
@@ Line 77: / Line 77: @@
 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/default/css/style.css");
+@import url("../../../../../components/com_community/templates/jomsocial/assets/css/style.css");
 /* Add overrides bellow */
 </syntaxhighlight>

← Older revision		Revision as of 03:46, 13 May 2014
Line 1:		Line 1:
−	<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 here \|alert}}</center>	+	<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==		==Overview==

← Older revision		Revision as of 03:44, 13 May 2014
Line 1:		Line 1:
		+	<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 here \|alert}}</center>
		+
	==Overview==		==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/>		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/>

@@ Line 120: / Line 120: @@
 ==See Also==
 * [[Creating New Template]]
 * [[Built-in Module Positions]]
 * [[Replacing the Joomla Native Login Screen With Hello Me Module]]

@@ Line 116: / Line 116: @@
 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 begging of the tutorial.
+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==

@@ Line 112: / Line 112: @@
 [http://documentation.jomsocial.com/downloads/com_community-override.zip Download Override]<br/>
-To use it, extract the archive on your computer hard disck and copy the '''com_community''' folder in
+To use it, extract the archive on your computer hard disk and copy the '''com_community''' folder in
 * '''JOOMLA/templates/yourTemplateName/html'''