Hello David,

Please find the answers to your inquiries below:

1. In the top section of the default /community page so that it looks exactly the same as the community/login page looks now on the attached image

This can be done by editing the file /components/com_easysocial/themes/wireframe/login/default.php

2. In the Login dropdown (with different styling of course)

This can be done by editing the file /components/com_easysocial/themes/wireframe/toolbar/default.login.php

3. In Komento Login (again with different styling)

This can be done by editing the file /components/com_komento/themes/kuro/comment/form/login.php

Hi David,

I had raised a similar and slightly different query in this Stackideas thread but the solution (to my question 1) you have come up with is a far superior location for the social buttons, would it be possible for you to post the changes you made in the file?

It would be much appreciated if you could do so.

Mark, Alex from Sourcecoast was interested in integrating the buttons more deeply with EasySocial (as per my thread), I will post a link to this one in their forum and he can follow up as required.

Sure, please do

Hi Richard - sure, no problem. Txt file attached - I included a block so that you can see where I inserted and what I changed in the Stack Ideas code. It starts on line 65 in /components/com_easysocial/themes/wireframe/login/default.php. Some CSS changes as well need to be made to get it to look right.

Nice to be able to help someone else instead of just asking for help for once!

Mark - the file that you mentioned for the answer to question 1. is the file that I have already modified (and attached the changes to this post) however it doesn't change the output on the default /community (unity) page for some reason, only on the community/login page. What am I missing?

You can see what I mean below:

http://rentalcarreviews.com/community - no changes seen on the Unity page, the JFB tag is not there.

http://rentalcarreviews.com/community/login - the tag is there, this is how I would like the top of the Unity page to look.

Don't worry Mark - I found it - Duh!

For anyone else interested, /components/com_easysocial/themes/wireframe/unity/default.php

Richard - forgot to mention, I also added this line:

COM_EASYSOCIAL_LOGIN_JFB="Or login with"

to /language/en-GB/en-GB.com_easysocial.ini

Hi David,

Thank you, the help is appreciated, going through changes now.

Hi David,

I know I am being really dozy here, changes made but how do I move everything up in the right hand box to align with the left as in your image?

You have to make a CSS change - I use a custom file for this so that updates to Easysocial don't overwrite the changes. There is a top border of 100px set you have to change it to 0px.

div#es-wrap .es-unity .es-login-box .register-column .register-wrap {
margin-top: 0 !important;
}

I also made some changes to put a small gap between the social buttons and to center them in the column instead of having them all pull to the left.

Hope this helps.

The CSS in the previous post was for the Unity page.

For the login page:


div#es-wrap .es-login-box .modal-es-register {
padding-top: 0 !important;
}

Nice to see this conversation going on. It's a community effort, not just us helping one another! EasySocial needs to be installed on our site

Indeed Mark, not a bad idea at all! I'm always happy to post help/advice in the forum as you know and appreciate the help David is giving me here.

@David,

Your last post fixed it, added to my custom.css file in Purity III and the layout is perfect, thank you.

I have 2 test menus at the moment, one with the login layout (now corrected) and one with unity, so will take a look at the code in /components/com_easysocial/themes/wireframe/unity/default.php and adjust it is well (I assume it should not be too different from the login changes), before moving on to the login drop down in /components/com_easysocial/themes/wireframe/toolbar/default.login.php and Komento login in /components/com_komento/themes/kuro/comment/form/login.php

I keep a note of changes in Word and backup any amended files before component updates as well as using custom.css so hopefully I will not need to do the changes again!

It will also be good when LinkedIn is added into JFBConnect in the next release as all 4 buttons will fit in easily.

Appreciate the help David and nice site by the way, very neat and user friendly.

Hi Richard. Attached are the changes I made for Komento and the Login dropdown php files.

CSS changes are also needed - lots of trial and error - Komento is not perfect yet but it's OK, dropdown looks good though I think.

Now Easydiscuss and JReviews!

Thanks for your comments on my site. It has been A LOT of work....... there are over 23,000 individual car rental locations set up in there with up to 360 individual fields for each one. Now I really need it to be populated with reviews from consumers which was always going to be the hard part. Ever rented a car you could review?

Be warned, I am a complete Noob at this stuff including php, html and css so everything is trial and error for me and I am 100% certain that my coding is not clean.......so basically, use it at your own risk

Thank you for the other codes, appreciated as always David.

Not a problem about knowledge of php, html and css, you are part of a large group of us who picked up how to code with Joomla from scratch and none of us are experts, trial and error is part of the journey! Stackideas great support is always there in the background to help as well to make our journey easier.

23,000 individual car rental locations set up in there with up to 360 individual fields for each one

All i can say is wow, that is a lot of effort, I hope it goes well for you.

It has been a number of years since I rented a car, but have made a note of your site and will make sure I point anyone who rents or is planning to rent in your direction.

Thanks for sharing guys

David,

A suggestion ref this:

Richard - forgot to mention, I also added this line:

COM_EASYSOCIAL_LOGIN_JFB="Or login with"

to /language/en-GB/en-GB.com_easysocial.ini

A user can Register or Login with the social buttons, so I have used the Language Override to change this to:

COM_EASYSOCIAL_LOGIN_JFB="Register or Login with"

I haven't centered the buttons as JFBConnect v6.0 is out with LinkedIn and it will fit in at at the end but you can see the result in the attached image.

Nice, thanks for sharing

David,

I updated to version 6.0.1 of JFBConnect which has the LinkedIn button included and followed your steps, the only change being the language override in my post above and also changing the margin from 5px to 6px to centre the buttons.

The full process, including your steps is below for the Login Menu with final image attached:

EasySocial Login Menu

The following changes should be made at line 65 of the file /components/com_easysocial/themes/wireframe/login/default.php

Original Code

<?php if( $this->config->get( 'registrations.enabled' ) ){ ?>

<div class="span6">

<div class="pl-20 pr-20 modal-es-register">

<h3><?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_NO_ACCOUNT' );?></h3>

<p class="center mb-20">

<?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_REGISTER_NOW' );?>

</p>

<a class="btn btn-es-primary btn-large btn-block" href="<?php echo FRoute::registration();?>">

<?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_REGISTER_NOW_BUTTON' );?>

</a>

</div>

</div>

<?php } ?>

</div>

</div>

<div class="row-fluid"> 

<div class="span12" style="margin: 10px 0 0 0"> 

{JFBCLogin text=Or, Login with}

</div>

</div>

New Code

<?php if( $this->config->get( 'registrations.enabled' ) ){ ?>

<div class="span6">

<div class="pl-20 pr-20 modal-es-register">

<legend class="mt-20"><?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_NO_ACCOUNT' );?></legend>

<p class="center mb-20">

<?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_REGISTER_NOW' );?>

</p>

<a class="btn btn-es-primary btn-large btn-block" href="<?php echo FRoute::registration();?>">

<?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_REGISTER_NOW_BUTTON' );?>

</a>

<div class="span12" style="margin: 0 0 20px 0"><legend class="mt-20"  style="margin: 10px 0 0 0"><?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_JFB' );?></legend></div>



<div class="row-fluid"> 

<div class="span12"> 

{JFBCLogin}

</div>

</div>

</div>

</div>

<?php } ?>

The following code should be added to the template custom.css file to get the correct margin at the top of the login/register box:

div#es-wrap .es-login-box .modal-es-register {

padding-top: 0 !important;

}

The following code should be added to the file /language/en-GB/en-GB.com_easysocial.ini:

COM_EASYSOCIAL_LOGIN_JFB=”Or login with”

The following addition should be included in the language override section in administration:

COM_EASYSOCIAL_LOGIN_JFB=”Register or Login with”

The following code should be added to the template custom.css file to centre the buttons and also leave a bit of space between them:

.jfbclogin .pull-left {

margin-left: 6px;

}

Thanks for sharing Richard

Hi Richard and Mark,

Richard - thanks for posting the details. Apologies for not being back here for a few days.......very busy.

Nice suggestion with the language override - I will make that change and look to add the LinkedIn button as well.

I also managed to get the dropdown login to look nice as well as the standard login page, Komento login and Easydiscuss login as well as JReviews in case anyone is interested. I think it looks pretty consistent across all login entry points now, I've attached a pic of the different sections in case anyone wants to see the final result. If anyone wants more details about the code changes let me know and I will look to add them to this when I have some more time.

Thanks again Richard and thanks for the comments on my site. It is getting there.

Dave

David,

Very nice work indeed, they all look neat and user friendly! I am using EasyDiscuss and JReviews, so if you have time to post the changes required, it would certainly be appreciated.

The full process including your steps (for anyone else who needs it) is below for the Unity Menu with the same final image as Login (see post above) achieved:

EasySocial Unity Menu

The following changes should be made at line 68 of the file /components/com_easysocial/themes/wireframe/unity/default.php

Original Code

<?php if( $this->config->get( 'registrations.enabled' ) ){ ?>

					<div class="span6 register-column">

						<div class="register-wrap">

							<h3><?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_NO_ACCOUNT' );?></h3>

							<p class="center mb-20">

								<?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_REGISTER_NOW' );?>

							</p>

							<a class="btn btn-es-primary btn-large btn-block" href="<?php echo FRoute::registration();?>">

								<?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_REGISTER_NOW_BUTTON' );?>

							</a>

						</div>

					</div>

					<?php } ?>

				</div>

			</div>

			<?php } ?>

New Code

<?php if( $this->config->get( 'registrations.enabled' ) ){ ?>

					<div class="span6 register-column">

						<div class="register-wrap">

							<legend class="mt-20"><?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_NO_ACCOUNT' );?></legend>

							<p class="center mb-20">

								<?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_REGISTER_NOW' );?>

							</p>

							<a class="btn btn-es-primary btn-large btn-block" href="<?php echo FRoute::registration();?>">

								<?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_REGISTER_NOW_BUTTON' );?>

							</a>

							<div class="span12" style="margin: 0 0 20px 0"><legend class="mt-20"  style="margin: 10px 0 0 0"><?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_JFB' );?></legend></div>



<div class="row-fluid"> 

<div class="span12"> 

{JFBCLogin}

</div>

</div>

						</div>

					</div>

					<?php } ?>

				</div>

			</div>

			<?php } ?>

Delete the following original JFBConnect code from the bottom of the file:

<div class="row-fluid"> 

  <div class="span12" style="margin: 10px 0 0 0"> 

      {JFBCLogin text=Or, Login with}

  </div>

</div>

The following code should be added to the template custom.css file to get the correct margin at the top of the login/register box:

div#es-wrap .es-unity .es-login-box .register-column .register-wrap {

margin-top: 0 !important;

}

If not already done, the following code should be added to the file /language/en-GB/en-GB.com_easysocial.ini:

COM_EASYSOCIAL_LOGIN_JFB=”Or login with”

If not already done, the following addition should be included in the language override section in administration:

COM_EASYSOCIAL_LOGIN_JFB=”Register or Login with”

If not already done, the following code should be added to the template custom.css file to centre the buttons and also leave a bit of space between them:

.jfbclogin .pull-left {

margin-left: 6px;

}

Hi Richard,

No problem. Here you go.........

Easydiscuss: Edit file /components/com_easydiscuss/themes/simplistic/form.reply.login.php

Beginning at line 19, old code with new additions looks like this (note - there is a reference to the Easysocial language string in here which works for me but may only be because I load the toolbar login on every page - you may need to add a new line to the Easydiscuss language file instead):

<div class="media">

				<div class="media-object pull-left">

					<img src="<?php echo JURI::root();?>components/com_easydiscuss/themes/simplistic/images/icon-locked.png" alt="<?php echo JText::_( 'COM_EASYDISCUSS_LOGIN_IMAGE' , true );?>" />

				</div>

				<div class="media-body small">

					<h4><?php echo JText::_( 'COM_EASYDISCUSS_PLEASE_LOGIN_TO_REPLY_TITLE' );?></h4>

					<p><?php echo JText::_( 'COM_EASYDISCUSS_PLEASE_LOGIN_TO_REPLY_INFO' );?></p>

					<a href="<?php echo DiscussHelper::getRegistrationLink();?>" class="btn btn-success mt-10"><?php echo JText::_( 'COM_EASYDISCUSS_REGISTER_HERE' );?></a>

				<div><h4><?php echo JText::_( 'COM_EASYSOCIAL_LOGIN_JFB' );?></h4></div>

				

				<div class="row-fluid"> 

					<div class="span12"> 

					{JFBCLogin}

					</div>

				</div>				

				</div>

				

			</div>

For JReviews, edit file components/com_jreviews/jreviews/views/themes/default/elements/login.thtml

The old code with the new changes, starting on line 52 looks like this:

<div class="jrFieldDiv jrInfo" style="">



		<?php /* When guests submission enabled and account creation activated, remove the create account button */?>



		<?php if(isset($access_submit) && $access_submit):?>



			<?php echo sprintf(__t("Already have an account? %sLog in now%s",true),'<a href="javascript:void(0)" class="jr-show-login jrButton">','</a>');?>



		<?php else:?>



			<?php echo sprintf(__t("Already have an account? %sLog in now%s or %sCreate an account%s or login with {JFBCLogin}",true),'<a href="javascript:void(0)" class="jr-show-login jrButton">','</a>','<a class="jrButton" rel="nofollow" href="'.$register_url.'">','</a>');?>



		<?php endif;?>

Good luck and if I can help any further give me a shout.

Dave

Forgot to mention, I also added your change to the language string to include "Register" and upgraded JFB so LinkedIn is also included now. If you need to see the CSS, you can Inspect it with Chrome or Firebug (Firefox) as I had to make some changes and additions for the fourth button. http://rentalcarreviews.com
Dave

Perfect Dave, thank you, much appreciated. The site is very good indeed, nice adjustment with the buttons when using a right hand column on the page.

A suggestion, to give you total flexibility on the button layout with a right hand column, as the login area disappears after a member logs in, if you do not need the right hand column to be visible to visitors (or members who have not logged in) just set the right hand column modules to 'Registered' access instead of 'Public' for that page** and it means you do not need to change the layout of the buttons, keeping the page full width.

It will auto adjust to include a right hand column when a member logs in.

Therefore you can have your wide 4 button layout or narrower 2x2 button layout, whatever option you wish on any page where the full login/unity menu version appears, depending on whether you wish to show the right hand column at all times or not.

We also have Guest or Visitor only view but as the login area disappears anyway it is not needed for this process (but is very useful elsewhere on a site).

**If you need the modules visible at all times on other pages, allocate them to Public and create new modules for the same content for the login page and allocate them to 'Registered'.

Thanks Richard. I'd actually like to keep the right hand column even for everyone whether logged in or not so I will leave the setup as is. Of course mobile and tablet views throw potential spanners into the works for everything but I think I have the displays set up fairly well for all devices. Of course improvements can and will be made on an ongoing basis. Appreciate your comments and advice. Do you have a URL where I could see your setup or are you still in development/localhost mode?

It does look good for all devices David.

I am in the final stages of local host/dev mode now Purity III is a stable release but (hopefully) will be ready to go at the end of the week and will certainly post a link here for you.

Thanks Richard. I look forward to seeing it!

[ Perhaps move this thread to EasySocial as most of the links are for ES items? ]

All changes made and working well, on the home stretch once ES 1.2 stable is out....

Thank you for your help David, I always make a note of my changes in a Word doc so have extracted the JFBConnect section with images and attached the file to this post, in case anyone wants a detailed spec of what was done. I am sure you have your own notes, but if not feel free to download it.

I noticed you were able to place the login dropdown on your main menu, how did you do that?

Hi Richard,

Sorry for taking so long to reply - been extremely busy which I guess is a good thing.

Lots of changes to this with the new release of ES. I have upgraded and pretty much all of the customised files needed updating as well. I have put together the images of what I managed to get the different sections on the site looking like now and attached it for you an others - lots of CSS, you will need to check the site to see what I did as it will be slightly different no doubt for your template. http://rentalcarreviews.com.

To answer your earlier question, I have a template position called "Toolbar" in my template that is on the right hand side of the main menu bar. I put the Easysocial Toolbar in that module position so that it shows on all pages, login if a guest and the Easysocial dropdown menu when a user is logged in.

Note with the new version of ES that unity has been depracated.

The new quick registration module is AWESOME looking (thanks StackIdeas team!!!) and I have added it to a few pages as well - you can see it in the image attached and on http://rentalcarreviews.com/write-review.

So now I have customised the files in dashboard (replaces unity), login and toolbar folders in com_easysocial and also the mod_easysocial_register default file to put the JFB buttons in.

If you need the details of the changes (they are pretty much the same as we did previously) let me know and when I have some time I'll add them into this thread.

Dave

Hi David,

Thank you again, the guidance and image in your post was indeed helpful and yes, the new Quick Registration Module is very impressive!

I updated to ES 1.2.3 and switched to the Frosty theme, changing the codes as required to make the JFBConnect social buttons fit correctly into the Purity 3 template.

I also amended the Guideline Coding Document and have attached the file to this post as a reference point for you or anyone else who is interested in the steps required to integrate JFBConnect with ES v 1.2.3

There may be a small difference in method or coding of styles due to the different templates or perhaps I have taken a longer route in some cases, but the end result is working so far!

The one part that still puzzles me is how to get a 2x2 button layout in the Quick Registration module without reducing the button sizes (as you did in your template). I found where the original padding code of 20px (left and right) for the Quick Reg Form is located but when I tried to amend it in custom.css it did not work, so there must be something I missed that overrides any changes. If the padding is reduced to 10px (left and right) in the form it will still look fine and allow the normal size buttons to be included.

I included what I tried to do in the document, perhaps something for Stackideas to resolve if they are reading this thread!

Hey guys,

Just a heads up for you guys, we'll be adding a built in integration with JFBConnect buttons in 1.2.4.

It looks like the days of EasySocial manual integration are nearly over David (see this thread), thank you once again for your help and also to Mark for the new auto integration!

No problem Richard! To be honest this thread is a little lengthy and I haven't gone through all of them yet but I will also cherry pick some of David's patch here and try to include it within EasySocial's core so that your efforts are not wasted.