Feature request for Connections plugin

jansuhr
OFFLINE
Posts: 52
Thanks: 1
Karma: 2

13 years 5 months ago #171819 by jansuhr

Feature request for Connections plugin was created by jansuhr

I did a hack to the cb.connections.php to get a better display of the connections, I have set the avatar images to a pretty large size and in the connections pane they take up to much space. I edited the code to give the image and surrounding box some css-classes, then in the css I gave them a smaller size.

I think it would be a good thing to have the avatar size as a setting for the Connections plugin so that you could set the avatar to a setting that would suite your site.

This is how it looks for me now, much better.

Jan

Jan Suhr
Nyköping, Sweden

Attachments:

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48671
Thanks: 8313
Karma: 1446

13 years 5 months ago #171832 by krileon

Replied by krileon on topic Re: Feature request for Connections plugin

Connections system is due for a complete rewrite in CB 2.0, which we're hoping to have completed before the end of this year (not a release date, just an internal goal). All of what you're wanting however can be done using CSS with zero hacks. With CSS2/CSS3 selectors it can be done.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

jansuhr
OFFLINE
Posts: 52
Thanks: 1
Karma: 2

13 years 5 months ago #171855 by jansuhr

Replied by jansuhr on topic Re: Feature request for Connections plugin

Well, I tried to get it with CSS but for that image in the connection plugin there is some hard coded style settings. My hack was to replace them with class tags.

Code:

$return		.=	"<div class=\"connectionBox\" style=\"position:relative;height:" . ( $boxHeight + 24 ) . "px;width:" . $boxWidth . "px;\">" . "<div style=\"position:absolute; top:3px; width:auto;left:5px;right:5px;\">" . $actionIMG . '</div>' . "<div style=\"position:absolute; top:18px; width:auto;left:5px;right:5px;\">" . $tooltipAvatar . '</div>' . "<div style=\"position:absolute; bottom:0px; width:auto;left:5px;right:5px;\">" . $onlineIMG . " " . getNameFormat( $connection->name, $connection->username, $ueConfig['name_format'] ) . "<br /><a href=\"" . cbSef( "index.php?option=com_comprofiler&amp;task=userProfile&amp;user=" . $connection->memberid ) . '"><img src="' . $live_site . "/components/com_comprofiler/images/profiles.gif\" border=\"0\" alt=\"" . _UE_VIEWPROFILE . "\" title=\"" . _UE_VIEWPROFILE . "\" /></a> " . $emailIMG . " " . $pmIMG . "\n";

Changed to this:

Code:

$return		.=	"<div class=\"connectionBox\">" . "<div class=\"connectionImage\">" . $actionIMG . '</div>' . "<div class=\"cb-connection-frame\">" . $tooltipAvatar . '</div>' . "<div class=\"cb-connect-image\">" . $onlineIMG . " " . getNameFormat( $connection->name, $connection->username, $ueConfig['name_format'] ) . "<br /><a href=\"" . cbSef( "index.php?option=com_comprofiler&amp;task=userProfile&amp;user=" . $connection->memberid ) . '"><img src="' . $live_site . "/components/com_comprofiler/images/profiles.gif\" border=\"0\" alt=\"" . _UE_VIEWPROFILE . "\" title=\"" . _UE_VIEWPROFILE . "\" /></a> " . $emailIMG . " " . $pmIMG . "\n";

And then in the CSS file I included this to get control over the image sizes and the surrounding frame.

Code:

.cb-connection-frame img {width: 40px; height: 40px;}

.connectionBox {width: 40%;}

Jan

Jan Suhr
Nyköping, Sweden

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48671
Thanks: 8313
Karma: 1446

13 years 5 months ago #171866 by krileon

Replied by krileon on topic Re: Feature request for Connections plugin

You can override in-line styles using the "!important" tag, which all browsers from IE7 and onwards support. Example of its usage as follows.

Code:

.connectionBox {
	width: 40% !important;
}

Please Log in or Create an account to join the conversation.

jansuhr
OFFLINE
Posts: 52
Thanks: 1
Karma: 2

13 years 5 months ago #172003 by jansuhr

Replied by jansuhr on topic Re: Feature request for Connections plugin

Kyle,

Your suggestions works only half way.

If I do an override like

Code:

.connectionBox img {
	width: 40px !important; height: 40px !important;
}

.connectionBox {
	width: 40% !important;
	height: 130px !important;
}

All the icons become 40x40px too since they fall under the .connectionBox img selection.

To have the icon in their original and intended size I must hack the file and give the Avatar its own class selector.

Jan

Jan Suhr
Nyköping, Sweden

Please Log in or Create an account to join the conversation.

pepperstreet
OFFLINE
Posts: 468
Thanks: 51
Karma: 22

13 years 5 months ago - 13 years 5 months ago #172006 by pepperstreet

Replied by pepperstreet on topic Re: Feature request for Connections plugin

@jansuhr
Working on exactly the same output... I know what you are talking about. In general, CBs class/id output is very good. With some little exceptions ;-)

The avatar thumb is surrounded by an extra SPAN. Needed for the overlib tooltip thingy. So, you may try ...

.connectionBox span img {...}

EDIT:
Since CB is jQuery addicted, this could also be a nice addition, without changing any core files:
webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

Last edit: 13 years 5 months ago by pepperstreet.

The following user(s) said Thank You: jansuhr

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon