Topic-icon Formating SC Login Module

Active Subscriptions:

None
14 years 1 month ago #21416 by isache
Hi,

My currently website has a login toolbar at the top which looks like the image below:
File Attachment:


However, I wish to change the formatting to make it look more like this:
File Attachment:


Using Firebug, I've determined the code to be
[div class="sc_connect_user"]Connect this site to your Social network?[/div]
[div class="fb_connect_user"]
[fb:login-button onlogin="javascript:jfbc.login.login_button_click();" v="2"]
[a class="fb_button fb_button_medium"]
[span class="fb_button_text">Connect[/span]
[/a]
[/fb:login-button]
[/div]

I've look at the login.php, logout.php, helper.php and mod_sclogin.php file and can't locate which are the lines of code I need to amend. Can you help me locate which are the pertinent lines as well as guide me how to realign these elements horizontally?

Thank you.
The topic has been locked.
Support Specialist
14 years 1 month ago #21451 by alzander
Replied by alzander on topic Formating SC Login Module
Isaac,
There's a few different locations that that code can exist, and it depends on which version of JFBConnect you are using. Please let us know the version of the and the login module, and we can help further.

Also, please post from the account you have an active subscription to JFBConnect from. Priority support is for subscribers only.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
14 years 1 month ago #22432 by isache
Replied by isache on topic Formating SC Login Module
Hi Alzander,

I've just purchased an active subscription. I'm using the latest versions of all the components, SC Login and JFBConnect. Do you have an update as to how I may solve this issue?

Thanx!
The topic has been locked.
Support Specialist
14 years 4 weeks ago #22443 by alzander
Replied by alzander on topic Formating SC Login Module
Isaac,
Thanks for the subscription! We definitely appreciate it.

For what you're doing, I'd recommend doing the following:
* In the current SCLogin module you have setup, hide the "Show Logout Button" and "Show Connect Account Button(s)" parameters. That will leave just the "Welcome, Blah" text on the left-hand side
* Create a new SCLogin module and set it in the same template position so it shows up on the right.
* Set the Access Level to "Registered" so that it only shows after the user is logged in.
* Hide the logout button, profile pic, and other things here so only the "Show Connect Account Button(s)" is enabled in the logout view.
* Then, add the following style to your template's CSS file:
.sc_connect_user, .fb_connect_user {float: left; }
* Finally, edit the /languages/en_GB/en_GB.mod_sclogin.ini file, find the language string for the "Connect Accounts" text and update it to what you want it to display.

Whew! Hope that all helps, but if you have any other questions, just let us know!

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
14 years 3 weeks ago #22683 by isache
Replied by isache on topic Formating SC Login Module
Thanx Alex! Your solution seems to work.

A few follow up questions:
1. Just wondering, the language file does not recognize multiple spaces. The only way to implement the string "| Connect to Facebook" would be to use multiple   (i.e."|    Connect to Facebook")?

2. Where is the correct place to put the CSS style? I've put the style in com_jfbconnect/assets/jfbconnect.css and it seems to work. Is that the best practice, or is there a method of placing it in an override file so that when I upgrade the JFBConnect component it does not replace my changes?

3. When you are a registered user but not connected with FB, why does the Facebook button in the toolbar at the top display on the line below and only when the page finishes loading does the button move to its correct inline position? i.e. the jfbconnect.css stylesheet above only seems to "kick-in" or take effect once everything is loaded.

4. When you load the site, when you're not logged in in anyway, the button "Login with Facebook" in the toolbar at the top is not aligned vertically centered. Do you know how I can fix this? I've found the style to be .jfbcLogin. I've tried margin-top:-3px; and padding-top:-3px; but that doesn't work.

5. Just out of curiosity, I don't think I've provided my website domain name anywhere in my user profile, so how do you know my domain name? In any case, I've deleted the User Map of your Facebook account so you can't test No. 3 above.
The topic has been locked.
Support Specialist
14 years 3 weeks ago #22701 by alzander
Replied by alzander on topic Formating SC Login Module
Glad to hear our suggestions above worked.. as for your other questions:
1) Yes,   is the standard HTML way to create multiple spaces. If the language file isn't allowing  , I'm not sure why, but you can try something like:
<span style="margin:0 10px;">|</span>Connect to Facebook
Think that should work, but who knows..
2) I'd throw that style in your template.css file, as your template is usually less updated than JFBConnect. Many templates (from clubs at least) have a special 'user' CSS file as well.
3) That may have been a bug with Facebook that was occurring yesterday. Please try again, and let me know if this is still an issue and we can help figure it out.
4) Add this to your template. It's a more specific CSS style, which will make it used over the .jfbcLogin one you found:
#toolbar .jfbcLogin {margin: 0px;}
5) When you run the Remote Error Checker in Autotune, we record the results to help us find issues and help debug problems when users need help. We mention that at the bottom of the Error Checker when you run it as well. It also helps as most users don't always post their URL in their initial post, and some don't want to make it public at all. We have a Private Message system, but it takes extra effort to go back and forth just to get a URL when we can get it quicker automatically.

Hope that helps, but if you need anything else, let us know!

Thanks,
Alex
The topic has been locked.