× Joomla Facebook Connect support forum

Topic-icon how to customize jfbconnect login text color and background color?

Active Subscriptions:

None
how to customize jfbconnect login text color and background color? How do I customize the login text color and background its displaying on my template as an almost unreadable color though. Also for some reason facebook invite wont work anymore the plug in is activated but it wont show up. any ideas. my site is www.cagebook.com. if you click news blog for instance youll see the jfbconnect there on that page.
The topic has been locked.
Support Specialist
To change the color of the background or text, you'll want to add a Module Class Suffix to the module itself. To do so, in the JFBCLogin parameters, on the right side, simply set the Module Class Suffix to "-jfbclogin", for example. Then, in your stylesheet, you can add the following to style the box however you want:
.moduletable-jfbclogin {
color:#FF0000; // Set the text color to bright red
background:#00FF00; // Set the background to green
}

Hope that helps, but if you need more info, let me know!
The topic has been locked.
Active Subscriptions:

None
Hi Alex,

I am having the same template CSS override issue that Mario describes. I tried using the snippet you provided above (with a suffix of -fbloginbutton) and had no luck. I have "-fbloginbutton" in the module parameter, but don't see the class anywhere through Firebug. I'm sure I've done something stupid but can't figure it out. Any ideas would be greatly appreciated. Login module is on my test site @: 174.37.130.155/~nlmtest/login .

Thanks!
The topic has been locked.
Support Specialist
NLM,
This may go over your head, so if so, just let us know. The Module Class Suffix parameter only works if your Joomla site's template is setup to take advantage of it. In your template's file that includes the module position that you have the login button in, the style must be set to xhtml.

To check this, you should check (usually) the index.php of your template file (in /templates/<YOUR_TEMPLATE>/index.php. In this file, you'll want to look for the include command for the module position you're looking for. It should look like below:
<jdoc:include type="modules" name="user2" style="xhtml" />

The name is the module position (left, user1, top, etc) and the style is set to xhtml. If this isn't how the module position inclusion that you're template looks like, try adding the style=xhtml bit, and the module class suffix should then start working.

Let me know how that goes, or if it just adds to your confusion. Hopefully, this will get you squared away.

Good luck!
Alex
The topic has been locked.
Active Subscriptions:

None
That was very helpful! It was something I didn't realize and I had the module placed with a custom module name that wasn't specified xhtml in the template. After I moved the module to an existing module position that was configured correctly, I was able to make the change with a little trial and error. Because the button text is nested in <span> tags, I had to add that to the code and I also needed to add !important to make the change override the template. What ended up working in the CSS file was:

.moduletable-fbloginbutton span{
color:#FFFFFF !important;
}

My template must be a little funky. Thanks again for your help! I'm pretty stoked about getting this in fighting shape for my live site.
The topic has been locked.
Support Specialist
That's great to hear! Glad you got it going, and should you need anything else, just let us know.

Also, if you haven't already, please consider leaving a rating and review for JFBConnect and/or our support, on the Joomla Extension Directory. It's certainly not required, but is very appreciated. They even use JFBConnect, so you can create an account there quickly!
extensions.joomla.org/extensions/social-...ook-integration/7215

Thanks, and best of luck to you,
Alex
The topic has been locked.