[SOLVED] CB Connect button display in CB Login Module after logging in

Working with CB Connect 5.2.1 - before logging in the Facebook, Twitter... buttons are left aligned, after logging in the Link Facebook, Twitter... buttons are center aligned. Using the vertical layout in CB Login.

Looking at the elements of the page the centering is generated by a element.style

<div style="text-align:center; margin:auto; margin: 1.4em 0px 2px 0px;">

and I wasn't able to hunt down where this is set.

Sorry for this fussy little question, the rest of the system works great.

Edit your CB login module within Extensions > Module Manager and set "Avatar position" to "Left". That should get rid of all the center alignment.

Thanks for the prompt response, but it didn't work for me, independent of whether the avatar was displayed or not, right or left alignment, pretty much any combination of login module settings. The avatar div is closed before the buttons are shown.

Then you'll need to add CSS to left align the module. You can use !important tag to override inline styles. The below should work.

I was able to make it work with a slightly different approach:

.mod_logout_plugin {
text-align: left !important;
}

But to get the Logout button to align left I had to add

.moduletable {
float:left;
width:200px;
height:200px;
}

.cbLogoutButtonSpan {
float:left;
}

The height and width were required to make the module play nice with other modules in the same position, not real happy with putting in a fixed size but it works for now.

Don't float the entire module as you're not clearing it. You'll have a design break. The below is tested working for the logout display.


The only reason for the above to not work is if you modified the login module or you added a class suffix to the module. If you added a class suffix then append it to the end of mod_login_logoutform . Example as follows.